Sometimes it becomes harder for UI/UX designers to build complex layouts in React Native.Here in this article we will show you how to use an very simple utility library for React Native to build layouts. You can download the version used in this tutorial at react-native-easy-grid-fork.

Or

npm install react-native-easy-grid --save

import { Col, Row, Grid } from "react-native-easy-grid";

Straight to the example:

If we need two columns with 50% width each, we can perform as follows

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

 

More examples

If we require three columns of the same size. We can perform as follows

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

 

 

You want horizontal bifurcation? Use <Row />

Just like <Col />, you can use <Row />

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

Can we assign percentage to rows and columns? — Yes!

To build, two rows having 75% and 25% height each, you can:

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

This is exactly same as

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

The catch with the size prop is that, it’s not percentage, but it’s a factor. We are saying, we want the first row with 3x height and the second row with 1x height.

Show me some complex layouts!

You can always nest <Row /> and <Col /> to build complex layouts. Say, if you want to split a column into two horizontal rows, you do something like this

<Grid>
<Col>1<Col>
<Col>
<Row>2</Row>
<Row>3</Row>
</Col>
</Grid>

Fixed left panel with fluid right column

If we desire a column with “fluid width” on the right and “fixed width column” on the left . This can be achieved with a bit of styling like this

<Grid>
<Col style={ { width: 140 } }> Fixed width <Col>
<Col> Fluid width </Col>
</Grid>

Usage with <ScrollView /> — There’s a catch!

If you see the column examples above, they span to 100% height of the device. They aren’t inside any <ScrollView />.

There might be cases when you want to divide the layout into columns inside a <ScrollView />. These component, <Row /> and <Col /> when placed inside <ScrollView /> doesn’t span to the entire height of the screen but start growing as we add content inside them. We can always cast some “height” to them and add more nested layouts within.