React Native JSON Grid List
This library will help you create impressive grid lists like these.
List 1 | List 2 |
---|---|
List 3 | List 4 |
---|---|
Getting started
Two main components are exported from this library: FlatGrid
and GridItem
. The most common use case is just using the first one, you won't need to use GridItem
unless you want to show a grid outside of a list.
Many grid templates are already created so you won't have to make your owns if you are comfortable with the ones which are included.
Installing
You can install the package via npm or yarn.
npm install -S react-native-json-grid-list
or
yarn add react-native-json-grid-list
Usage
Usage (FlatGrid)
Import the FlatGrid
component.
import FlatGrid, {LAYOUTS} from 'react-native-json-grid-list';
Now let's define what will be the content of our items. In this case, we just want a random photo from Unspash.
const ITEM_CONTENT = {
photo: {
uri: 'https://source.unsplash.com/random',
},
};
Render our grid list.
<FlatGrid
data={[
{
layout: 'layout-1',
items: {
'item-1': ITEM_CONTENT,
'item-2': ITEM_CONTENT,
'item-3': ITEM_CONTENT,
'item-4': ITEM_CONTENT,
},
},
]}
layouts={LAYOUTS}
rowSeparator={8}
paddingHorizontal={8}
showsVerticalScrollIndicator={false}
/>
Properties
Property | Type | Default value | Description |
---|---|---|---|
rowSeparator | number | Separator between rows | |
paddingHorizontal | number | Padding horizontal | |
layouts | Layouts | LAYOUTS | Layout definition |
data | ItemType[] | Items |
How to create your own layouts
Just the same way as you would nest components to get the layout you want, you can create your own grid layouts writing it in JSON format following some rules.
We got three layout types:
- Rows:
{
"id": "row-1",
"type": "row",
"flex": 2,
"layouts": [
// ...more rows, columns or items
]
}
- Columns:
// You can omit flex attribute if it's equal to 1
{
"id": "col-1",
"type": "column",
// "flex": 1,
"layouts": [
// ...more rows, columns or items
]
}
- Items:
// You can omit flex attribute if it's equal to 1
{
"id": "item-1",
// "flex": 1,
// add an overlay
"overlay": {
"color": "#f00",
"opacity": .6
}
}
Layout examples
// Note that you can omit flex when it's equal to 1
{
"spacing": 8,
"height": 350,
"layouts": [
{
"id": "column-1",
"type": "column",
"layouts": [
{
"id": "item-1",
"flex": 2,
},
{
"id": "item-2",
// "flex": 1
},
],
},
{
"id": "item-3"
// "flex": 1
},
]
}