grid.md

The Grid component provides two types of layouts, Row and Column. This provides you with an easy way to position your elements on screen without using flex directly.

This component was inspired from react-native-easy-grid by GeekyAnts. Check out NativeBase.io if you haven't already!

Row

import {Grid, Row} from 'react-native-elements';

<Grid>
  <Row></Row>
  <Row></Row>
</Grid>

Column

import {Grid, Col} from 'react-native-elements';

<Grid>
  <Col></Col>
  <Col></Col>
</Grid>

Creating nested layout

1	2
	3

import {Grid, Col, Row} from 'react-native-elements';

<Grid>
  <Col></Col>
  <Col>
    <Row></Row>
    <Row></Row>
  </Col>
</Grid>

Using the size prop

A ratio can be passed to the Size Prop

<Grid>
  <Row size={3}></Row>
  <Row size={1}></Row>
</Grid>

<Grid>
  <Col size={75}></Col>
  <Col size={25}></Col>
</Grid>

GridComponent Props

prop	default	type	description
containerStyle	none	object (style)	Outer grid styling (optional)
onPress	none	function	onPress method (optional)
activeOpacity	1	number	Opacity on pressing (optional)

ColComponent Props

props	default	type	description
containerStyle	none	object (style)	Styling for the outer column (optional)
size	none	number	Size for column (optional)
onPress	none	function	onPress method (optional)
activeOpacity	1	number	Opacity on pressing (optional)

RowComponent Props

props	default	type	description
containerStyle	none	object (style)	Styling for the outer column (optional)
size	none	number	Size for row (optional)
onPress	none	function	onPress method (optional)
activeOpacity	1	number	Opacity on pressing (optional)