Block

Block

This component is the main component block used to build everything in Galio and any type of layout. There are so many props available for easier access to different styling options that you'll rarely write another style prop.

Usage

Imports:

import { Block } from 'galio-framework';

Simple example:

<Block>{children}</Block>

Advanced examples:

<Block 
  flex 
  row 
  space="between" 
  style={{ padding: 20 }}
>
  <Text>Left content</Text>
  <Text>Right content</Text>
</Block>

<Block 
  card 
  shadow 
  style={{ margin: 10 }}
>
  <Text>Card content</Text>
</Block>

Props

Prop	Type	Default	Description
children	node	null	Block content
bottom	bool	false	alignItems: 'flex-end' alignSelf: 'flex-end'
card	bool	false	Changes the View's border-radius, -width and -color
center	bool	false	alignItems: 'center' alignSelf: 'center'
flex	bool, number	false	flex: 1 or custom flex value
fluid	bool	false	width: 'auto'
height	number	null	Changes the height of the Block
left	bool	false	alignItems: 'flex-start'
middle	bool	false	alignItems: 'center' alignSelf: 'center'
right	bool	false	alignItems: 'flex-end'
row	bool	false	flexDirection: 'row'
safe	bool	false	Wraps the Block with a SafeAreaView
shadow	bool	false	Adds shadow on the Block
shadowColor	string	null	Changes the shadow's color
space	string	null	Options: 'between', 'around' or 'evenly'
style	object	null	Custom styles
width	number	null	Changes the width of the Block
...View.props	-	-	All React Native View props are supported