react-native-flex-grid
A react-native flexbox grid similar to bootstap‘s web grid.
Check the DEMO, built with Storybook and react-native-web.
Getting Started
Installation
NPM:
npm install --save react-native-flex-grid
YARN:
yarn add react-native-flex-grid
Usage
import { Container, Row, Col } from 'react-native-flex-grid';
const MyComponent = (
<Container fluid>
<Row>
<Col>
<Text>.col</Text>
</Col>
</Row>
<Row>
<Col>
<Text>.col</Text>
</Col>
<Col>
<Text>.col</Text>
</Col>
<Col>
<Text>.col</Text>
</Col>
<Col>
<Text>.col</Text>
</Col>
</Row>
<Row>
<Col xs="3">
<Text>.col-3</Text>
</Col>
<Col xs="auto">
<Text>.col-auto - variable width content</Text>
</Col>
<Col xs="3">
<Text>.col-3</Text>
</Col>
</Row>
<Row>
<Col xs="6">
<Text>.col-6</Text>
</Col>
<Col xs="6">
<Text>.col-6</Text>
</Col>
</Row>
<Row>
<Col xs="6" sm="4">
<Text>.col-6 .col-sm-4</Text>
</Col>
<Col xs="6" sm="4">
<Text>.col-6 .col-sm-4</Text>
</Col>
<Col sm="4">
<Text>.col-sm-4</Text>
</Col>
</Row>
<Row>
<Col sm={5} smOrder={2} smOffset={1}>
<Text>.col-sm-5 .order-sm-2 .offset-sm-1</Text>
</Col>
<Col sm={5} smOrder={1} smOffset={1}>
<Text>.col-sm-5 .order-sm-1 .offset-sm-1</Text>
</Col>
</Row>
<Row>
<Col md={6} mdOffset={3} sm={12}>
<Text>.col-sm-12 .col-md-6 .offset-md-3</Text>
</Col>
</Row>
<Row>
<Col sm="auto" smOffset={1}>
<Text>.col-sm-auto .offset-sm-1</Text>
</Col>
<Col sm="auto" smOffset={1}>
<Text>.col-sm-auto .offset-sm-1</Text>
</Col>
</Row>
</Container>
);
export default MyComponent;
Modifying Grid Configuration
The grid is 100% modifiable, checkout the detailed docs
Responsive utils
Checkout the detailed docs for a set of useful responsive utilities like css/scss like media queries.
Development
Checkout the detailed docs to understand how to run the repo locally and how to develop with it.
Helpful resources
Contributing
Pull requests are highly appreciated! For major changes, please open an issue first to discuss what you would like to change.