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:

``bash
npm install --save react-native-flex-grid
`

YARN:

`bash
yarn add react-native-flex-grid
`

Usage

`jsx
import { Container, Row, Col } from 'react-native-flex-grid';

const MyComponent = (



.col




.col


.col


.col


.col




.col-3


.col-auto - variable width content


.col-3




.col-6


.col-6




.col-6 .col-sm-4


.col-6 .col-sm-4


.col-sm-4




.col-sm-5 .order-sm-2 .offset-sm-1


.col-sm-5 .order-sm-1 .offset-sm-1




.col-sm-12 .col-md-6 .offset-md-3




.col-sm-auto .offset-sm-1


.col-sm-auto .offset-sm-1



);

export default MyComponent;
`

#### Component Props - can be used to customize Layout components

Container

`tsx
export declare interface ContainerProps
extends React.ComponentProps {
/* Fluid Container /
fluid?: boolean;
/* No Padding /
noPadding?: boolean;
/* Element to render - defaults to View /
Element?: React.ElementType;
}
`

Row

`tsx
export declare interface RowProps extends React.ComponentProps {
/* Gutter size -- Bootstrap Gutters /
gx?: 0 | 1 | 2 | 3 | 4 | 5;
/* Direction /
dir?: 'ltr' | 'rtl';
/* Element to render - defaults to View /
Element?: React.ElementType;
}
`

Col

`tsx
export declare interface ColProps extends React.ComponentProps {
/* 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 /
gx?: 0 | 1 | 2 | 3 | 4 | 5;
/* Direction /
dir?: 'ltr' | 'rtl';
/* Element to render - defaults to View /
Element?: React.ElementType;
}
``

$3

The grid is 100% modifiable, checkout the detailed docs

$3

Checkout the detailed docs for a set of useful responsive utilities like css/scss like media queries.

$3

Checkout the detailed docs to understand how to run the repo locally and how to develop with it.

$3

- Blogpost
- Bootstrap layout documentation
- Reactstrap layout documentation
- React Native Extended StyleSheet

$3

Pull requests are highly appreciated! For major changes, please open an issue first to discuss what you would like to change.