This is NOT-JUST-ANOTHER-GRID-LAYOUT library! We are trying to simplify flexbox with easier approach.
React Native Easy Grid is part of the NativeBase ecosystem, built by GeekyAnts.
We specialize in:
- React Native Development - Expert mobile app development
- UI/UX Design Services - Creating intuitive user interfaces
Need a custom layout solution? Let's talk
npm install react-native-easy-grid --save
import { Col, Row, Grid } from "react-native-easy-grid";
<Grid>
<Col></Col>
<Col></Col>
</Grid>
Note: If you don't assign the size property, it defaults to equal width (or height) with its siblings
<Grid>
<Row></Row>
<Row></Row>
</Grid>
<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>
Same concept applies to
<Col />
<Grid>
<Col></Col>
<Col></Col>
<Col></Col>
</Grid>
<Grid>
<Row size={2}></Row>
<Row size={1}></Row>
<Row size={1}></Row>
</Grid>
| 1 | 2 |
| 3 |
<Grid>
<Col>
<Text>1</Text>
</Col>
<Col>
<Row>
<Text>2</Text>
</Row>
<Row>
<Text>3</Text>
</Row>
</Col>
</Grid>
<Grid>
<Col style={{ width: 40 }}>
<Text>Fixed width</Text>
</Col>
<Col>
<Text>Fluid width</Text>
</Col>
</Grid>
<Grid>
<Row style={{ height: 40 }}>
<Text>Fixed width</Text>
</Row>
<Row>
<Text>Fluid width</Text>
</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!
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 theheightstyling.