react-native-responsive-grid-system
v1.0.4
react-native-responsive-grid-system components
react-nativegridlayoutresponsive-gridresponsive-grid-systemreact-native-responsive-gridreact-native-responsive-grid-systemgrid-system
41/weekUpdated 3 years agoISCUnpacked: 124.7 KB
Published by al_fahad
npm install react-native-responsive-grid-system
React native responsive grid system
This component helps you to create responsive grids in your
react-native app design.
Get Started
$3
npm i react-native-responsive-grid-system
$3
Start using the components
``jsx
import { Row, Col } from 'react-native-responsive-grid-system';
Your content goes here
`
Components included:
$3
Components included:
- Row
- Col
How it works
React native grid system uses a series of rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.
$3
* Rows are wrappers for columns. Each column has padding-right (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
* Row have margin-right to create the gutters, however, you can remove the margin from rows with rowStyles={{ marginRight:0 }} on the Row.
`jsx
`
$3
* In a grid layout, content must be placed within columns and only columns may be immediate children of rows.
* Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use xs={4}, sm={4}, md={4} or lg={4}.
* Column widths are set in percentages, so they’re always fluid and sized relative to their parent element.
* Columns have padding-right to create the gutters between individual columns, however, you can remove the padding from columns with colStyles={{ paddingRight:0 }} on the Col.
* To make the grid responsive, there are 4 grid breakpoints, one for each responsive breakpoint: all breakpoints extra-small (xs), small (sm), medium (md) and large (lg).
`jsx
`
Customization
$3
jsx
`$3
jsx
Your content goes here
`
Responsive
We design this for multiple screen size. Like extra small, small, medium and large size screen. When you use this component your app UI response you in different screen ( standard size mobile, large-screen mobile, mid-screen tab, and large screen tab )
Example
jsx |
----
----
-----
----
``#### Mobile
#### Tab ( small )
#### Tab ( big )
