Dead Simple Layouts with React Native

We wrote a very simple utility library for React Native to build layouts. Flex-box is awesome but it can be complex for newbies and that’s why we built React Native Easy Grid (Open Source — Give me a star?).

Straight to the example:

If you want two columns with 50% width each, you just do

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

Two columns of the same width

More examples

What if you need three columns of the same size? You just do this

<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

There are cases when you want a “fixed width column” on the left and a column with “fluid width” on the right. 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 split the layout into columns inside a <ScrollView />. These elements, <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. You can always assign some “height” to them and add more nested layouts within.

For installation, check Github readme

EasyGrid is a part of NativeBase.io

This project is a part of our another Open Source project called NativeBase.io

Please subscribe, star our repos (EasyGrid repo / NativeBase repo) and follow us on Twitter.

Feel free to add comments and contribute to the repo.

Authors: Sanket, Sankhadeep and Himanshu from GeekyAnts