React-native Block

Our React-native block component will help you structure an app and ensure consistent spacing between elements using 2 types of grid.

The Card component is using the Block component with predefined styles: borderRadius & padding ​ Both components are using a base value of 8px which can be customised from the theme constants.

Example:

Default example:

<Block>...</Block>

Card example:

<Block card>...</Block>

Properties

Property Type Default Description
id string ‘Block’ id for testID & accesibilityLabel
flex ViewStyle[‘flex’] 1 Renders a View flex style
row boolean false Renders a View flexDirection: row style
wrap ViewStyle[‘flexWrap’] undefined Renders a View flexWrap style
safe boolean false Renders a SafeAreaView component
keyboard boolean false Renders a KeyboardAwareScrollView component
scroll boolean false Renders a ScrollView component
shadow boolean false Generates a shadow style
card boolean false Renders a View with predefined backgroundColor, borderRadius, padding, shadow / elevation
center boolean false Renders a View with predefined justifyContent: center
outlined boolean false Renders a View with predefined borderWidth: 1, backgroundColor: ‘transparent’ & borderColor inherited
style StyleProp undefined Custom View style
overflow ViewStyle[‘overflow’] undefined Renders a View style overflow
color ViewStyle[‘backgroundColor’] undefined Renders a custom backgroundColor
gradient string[] undefined Renders LinearGradient component, colors
primary boolean false Renders a backgroundColor directly from the colors.primary value
secondary boolean false Renders a backgroundColor directly from the colors.secondary value
tertiary boolean false Renders a backgroundColor directly from the colors.tertiary value
black boolean false Renders a backgroundColor directly from the colors.black value
white boolean false Renders a backgroundColor directly from the colors.white value
gray boolean false Renders a backgroundColor directly from the colors.gray value
danger boolean false Renders a backgroundColor directly from the colors.danger value
warning boolean false Renders a backgroundColor directly from the colors.warning value
success boolean false Renders a backgroundColor directly from the colors.success value
info boolean false Renders a backgroundColor directly from the colors.info value
radius ViewStyle[‘borderRadius’] undefined Renders a custom borderRadius value
height ViewStyle[‘height’] undefined Renders a custom height value
width ViewStyle[‘width’] undefined Renders a custom width value
justify ViewStyle[‘justifyContent’] undefined Renders a flex justifyContent. Available values: ‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’, ‘space-evenly’
align ViewStyle[‘alignItems’] undefined Renders a flex alignItems. Available values: ‘auto’, ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’, ‘baseline’
children React.ReactNode undefined Renders the View content
blur boolean false Renders a BlueView component
intensity BlurProps[‘intensity’] undefined BlueView intensity, default: 50, values accepted: 1 to 100
tint BlurProps[‘tint’] undefined BlueView tint color, default: ‘default’, values accepted: ‘light’, ‘dark’, ‘default’
position ViewStyle[‘position’] undefined Renders the View position
right ViewStyle[‘right’] undefined Renders the View right offset
left ViewStyle[‘left’] undefined Renders the View left offset
top ViewStyle[‘top’] undefined Renders the View top offset
bottom ViewStyle[‘bottom’] undefined Renders the View bottom offset
end LinearGradientPoint undefined Renders LinearGradient end points
start LinearGradientPoint undefined Renders LinearGradient start points