https://github.com/sauldom102/react-native-json-grid-list
https://github.com/sauldom102/react-native-json-grid-list
android component flatlist flatlist-grid grid ios mobile react react-native reactjs reactnative
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/sauldom102/react-native-json-grid-list
- Owner: sauldom102
- Created: 2019-11-24T20:18:16.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-27T05:18:05.000Z (over 3 years ago)
- Last Synced: 2025-09-07T07:29:08.365Z (9 months ago)
- Topics: android, component, flatlist, flatlist-grid, grid, ios, mobile, react, react-native, reactjs, reactnative
- Language: TypeScript
- Size: 14.8 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.
```bash
npm install -S react-native-json-grid-list
```
or
```bash
yarn add react-native-json-grid-list
```
### Usage
#### Usage (FlatGrid)
Import the `FlatGrid` component.
```javascript
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](https://unsplash.com).
```javascript
const ITEM_CONTENT = {
photo: {
uri: 'https://source.unsplash.com/random',
},
};
```
Render our grid list.
```javascript
```
##### Properties
| Property | Type | Default value | Description |
| ----------------- | ---------------------------------------------- | ------------------------------------- | ---------------------- |
| rowSeparator | number | | Separator between rows |
| paddingHorizontal | number | | Padding horizontal |
| layouts | [Layouts](src/components/FlatGrid/types.ts) | [LAYOUTS](src/models/Layout/mock.tsx) | Layout definition |
| data | [ItemType[]](src/components/FlatGrid/types.ts) | | 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:
1. Rows:
```js
{
"id": "row-1",
"type": "row",
"flex": 2,
"layouts": [
// ...more rows, columns or items
]
}
```
2. Columns:
```js
// You can omit flex attribute if it's equal to 1
{
"id": "col-1",
"type": "column",
// "flex": 1,
"layouts": [
// ...more rows, columns or items
]
}
```
3. Items:
```js
// 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
```js
// 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
},
]
}
```