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-gridYARN:
yarn add react-native-flex-gridUsage
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;Component Props - can be used to customize Layout components
Container
export declare interface ContainerProps
extends React.ComponentProps<typeof View> {
/** Fluid Container */
fluid?: boolean;
/** No Padding */
noPadding?: boolean;
/** Element to render - defaults to View */
Element?: React.ElementType;
}Row
export declare interface RowProps extends React.ComponentProps<typeof View> {
/** Gutter size -- [Bootstrap Gutters](https://getbootstrap.com/docs/5.0/layout/gutters/) */
gx?: 0 | 1 | 2 | 3 | 4 | 5;
/** Direction */
dir?: 'ltr' | 'rtl';
/** Element to render - defaults to View */
Element?: React.ElementType;
}Col
export declare interface ColProps extends React.ComponentProps<typeof View> {
/** xs size */
xs?: number | string;
/** sm size */
sm?: number | string;
/** md size */
md?: number | string;
/** lg size */
lg?: number | string;
/** xl size */
xl?: number | string;
/** xs offset */
xsOffset?: number | string;
/** sm offset */
smOffset?: number | string;
/** md offset */
mdOffset?: number | string;
/** lg offset */
lgOffset?: number | string;
/** xl offset */
xlOffset?: number | string;
/** xs order */
xsOrder?: number | string;
/** sm order */
smOrder?: number | string;
/** md order */
mdOrder?: number | string;
/** lg order */
lgOrder?: number | string;
/** xl order */
xlOrder?: number | string;
/** Gutter size -- [Bootstrap Gutters](https://getbootstrap.com/docs/5.0/layout/gutters/) */
gx?: 0 | 1 | 2 | 3 | 4 | 5;
/** Direction */
dir?: 'ltr' | 'rtl';
/** Element to render - defaults to View */
Element?: React.ElementType;
}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
- Blogpost
- Bootstrap layout documentation
- Reactstrap layout documentation
- React Native Extended StyleSheet
Contributing
Pull requests are highly appreciated! For major changes, please open an issue first to discuss what you would like to change.