Easy React Native Layout & Grid for the Dumb
JavaScript
Latest commit c4acb9c Jan 10, 2017 @sankhadeeproy007 sankhadeeproy007 0.1.8
Permalink
Failed to load latest commit information.
Components fixing missing components Dec 1, 2016
Examples Added examples May 5, 2016
Utils Update computeProps.js Nov 27, 2016
.gitignore initial commit May 5, 2016
LICENSE Create LICENSE May 8, 2016
README.md Update README.md Jul 28, 2016
index.d.ts Update index.d.ts Nov 16, 2016
index.js path changed May 5, 2016
package.json 0.1.8 Jan 10, 2017

README.md

React Native Easy Grid 🐵

This is NOT-JUST-ANOTHER-GRID-LAYOUT library! We are trying to simplify flexbox with easier approach.

Installation

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

Usage

Include the components

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

1. Two columns (50% and 50%)

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

col-50-50

Note: If you don't assign the size property, it defaults to equal width (or height) with its siblings

2. Two rows

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

row-50-50

3. Two rows (75% and 25%)

<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>

row-75-25

Same concept applies to <Col />

4. Three columns (33.33% each)

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

col-33-33-33

5. Three rows (50%, 25% and 25%)

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

row-50-25-25

6. Nested Layout or Grid

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

complex

7. Fixed width and fluid width combination

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

col-fluid-fixed.png

8. Fixed height and fluid height combination

<Grid>
    <Row style={{ height: 40 }}> Fixed width </Row>
    <Row> Fluid width </Row>
</Grid>

Do you think anything could be simpler than that? This repo is part of our bigger project called NativeBase.io. Do check that!

Important note about usage with <ScrollView />

Note: If you're using <Row /> inside a <ScrollView />, the height of the component would be flexible according to the content, though you can always apply the height styling.