├── renovate.json
├── assets
    └── demo_image_1.png
├── .github
    └── dependabot.yml
├── lib
    ├── GridViewDataSource.js
    └── GridView.js
├── package.json
├── LICENSE
└── README.md


/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": [
3 |     "config:base"
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/assets/demo_image_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/clh161/react-native-easy-grid-view/HEAD/assets/demo_image_1.png


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 | updates:
3 | - package-ecosystem: npm
4 |   directory: "/"
5 |   schedule:
6 |     interval: daily
7 |     time: "21:00"
8 |   open-pull-requests-limit: 10
9 | 


--------------------------------------------------------------------------------
/lib/GridViewDataSource.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | import {ListView} from "react-native";
 3 | 
 4 | class GridViewDataSource extends ListView.DataSource {
 5 |     cloneWithCells(data, cellsInRow) {
 6 |         var groupedData = [];
 7 |         for (var i = 0; i < data.length; i++) {
 8 |             groupedData[Math.floor(i / cellsInRow)] = groupedData[Math.floor(i / cellsInRow)] || [];
 9 |             groupedData[Math.floor(i / cellsInRow)].push(data[i]);
10 |         }
11 |         var dataSource = super.cloneWithRows(groupedData);
12 |         dataSource.cellsInRow = cellsInRow;
13 |         return dataSource
14 |     }
15 | 
16 | }
17 | export default GridViewDataSource;
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-easy-grid-view",
 3 |   "version": "0.1.1",
 4 |   "description": "Easy grid view for react-native",
 5 |   "main": "lib/GridView.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [
10 |     "react",
11 |     "native",
12 |     "react native",
13 |     "grid",
14 |     "grid view",
15 |     "gridview",
16 |     "list",
17 |     "list view",
18 |     "listview",
19 |     "react-component",
20 |     "react-native",
21 |     "ios",
22 |     "android"
23 |   ],
24 |   "repository": {
25 |     "type": "git",
26 |     "url": "git+https://github.com/clh161/react-native-easy-grid-view.git"
27 |   },
28 |   "author": "Jacob Ho <clh161@gmail.com> (https://github.com/clh161)",
29 |   "license": "ISC",
30 |   "bugs": {
31 |     "url": "https://github.com/clh161/react-native-easy-grid-view/issues"
32 |   },
33 |   "homepage": "https://github.com/clh161/react-native-easy-grid-view#readme"
34 | }
35 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Jacob Ho
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/lib/GridView.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | import {View, ListView} from "react-native";
 3 | import React, {Component} from "react";
 4 | import GridViewDataSource from "./GridViewDataSource";
 5 | class GridView extends Component {
 6 |     static DataSource = GridViewDataSource;
 7 | 
 8 |     constructor(props) {
 9 |         super(props);
10 |         this.listView = null
11 |     }
12 | 
13 |     scrollTo(options)
14 |     {
15 |         this.listView.scrollTo(options)
16 |     }
17 | 
18 |     render() {
19 |         return (
20 |             <ListView
21 |                 ref={(ref)=>{this.listView = ref}}
22 |                 renderRow={this._renderRow.bind(this)}
23 |                 {...this.props}/>
24 |         )
25 |     }
26 | 
27 |     _renderRow(data, sectionID, rowID, highlightRow) {
28 |         var cells = [];
29 |         for (var i = 0; i < this.props.dataSource.cellsInRow; i++) {
30 |             var view = <View key={rowID+"-"+i} style={{flex:1}}/>;
31 |             if (i < data.length) {
32 |                 view = <View key={rowID+"-"+i} style={{flex:1,justifyContent:'center'}}>
33 |                     {this.props.renderCell(data[i])}
34 |                 </View>
35 |             }
36 |             view.props.style.flex = 1;
37 |             //Add spacing
38 |             if (this.props.spacing) {
39 |                 if (rowID > 0) {
40 |                     view.props.style.marginTop = this.props.spacing / 2;
41 |                 }
42 |                 if (rowID < this.props.dataSource.getRowCount()) {
43 |                     view.props.style.marginBottom = this.props.spacing / 2;
44 |                 }
45 |                 if (i > 0) {
46 |                     view.props.style.marginLeft = this.props.spacing / 2;
47 |                 }
48 |                 if (i < this.props.dataSource.cellsInRow - 1) {
49 |                     view.props.style.marginRight = this.props.spacing / 2;
50 |                 }
51 |             }
52 |             cells.push(view);
53 |         }
54 |         return <View key={rowID} style={{flexDirection:'row',justifyContent:'space-between'}}>
55 |             {cells}
56 |         </View>
57 |     }
58 | }
59 | export default GridView;
60 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # react-native-easy-grid-view
  2 | [![npm package](https://img.shields.io/npm/v/react-native-easy-grid-view.svg?style=flat-square)](https://www.npmjs.org/package/react-native-easy-grid-view)
  3 | [![npm](https://img.shields.io/npm/dm/react-native-easy-grid-view.svg)](https://www.npmjs.com/package/react-native-easy-grid-view)
  4 | [![Gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg?style=flat-square)](https://gitter.im/react-native-easy-grid-view/Lobby#)
  5 | 
  6 | > A React Native component for grid view. Compatible with both iOS and Android.
  7 | <p align="center">
  8 |   <img width="240" src="./assets/demo_image_1.png"/>
  9 | </p>
 10 | 
 11 | ## Installation
 12 | 
 13 | ```sh
 14 | npm install react-native-easy-grid-view --save
 15 | ```
 16 | 
 17 | 
 18 | ## Usage
 19 | 
 20 | ### Props
 21 | 
 22 | | Prop | Type | Description | Required | Default |
 23 | |---|---|---|---|---|
 24 | |**`spacing`**|`number`|Set spacing between cells|`No`|`0`|
 25 | |**`renderCell`**|`function(data)`|function of rendering cell view|`Yes`||
 26 | 
 27 | 
 28 | ### DataSource
 29 | 
 30 | Use `cloneWithCells(data,number of cells in a row)` to clone data
 31 | 
 32 | ```js
 33 | this.state = {
 34 |             dataSource: ds.cloneWithCells([1,2,3,4],3)
 35 |         };
 36 | ```
 37 | 
 38 | 
 39 | ### Example
 40 | 
 41 | 
 42 | 
 43 | 
 44 | ```js
 45 | import React, {Component} from "react";
 46 | import {Text, View} from "react-native";
 47 | import GridView from "react-native-easy-grid-view";
 48 | 
 49 | class Example extends Component {
 50 |     constructor(props) {
 51 |         super(props);
 52 |         var ds = new GridView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
 53 |         this.state = {
 54 |             dataSource: ds.cloneWithCells([
 55 |                 {
 56 |                     text: 1,
 57 |                     backgroundColor:'#f00'
 58 |                 }
 59 |                 , {
 60 |                     text: 2,
 61 |                     backgroundColor:'#0f0'
 62 | 
 63 |                 }, {
 64 |                     text: 3,
 65 |                     backgroundColor:'#00f'
 66 | 
 67 |                 }, {
 68 |                     text: 4,
 69 |                     backgroundColor:'#f0f'
 70 | 
 71 |                 }, {
 72 |                     text: 5,
 73 |                     backgroundColor:'#fff'
 74 | 
 75 |                 }, {
 76 |                     text: 6,
 77 |                     backgroundColor:'#000'
 78 | 
 79 |                 }], 2),
 80 |             cellWidth: 0,
 81 |             cellHeight: 0
 82 |         };
 83 |     }
 84 | 
 85 |     _renderCell(cell) {
 86 |         return <View onLayout={event => {
 87 |           var width = event.nativeEvent.layout.width;
 88 |          if(this.state.cellWidth!=width){
 89 |          this.setState({cellWidth:width})
 90 |          }
 91 |          if(this.state.cellHeight!=width){
 92 |          this.setState({cellHeight:width})
 93 |          }
 94 |         }}>
 95 |             <View style={{width:this.state.cellWidth,height:this.state.cellHeight,justifyContent:'center',backgroundColor:cell.backgroundColor}}
 96 |                    resizeMode={Image.resizeMode.stretch} source={cell.image}>
 97 |                 <Text style={{backgroundColor:'#0004',textAlign:'center',color:'#fff',fontSize:24}}>{cell.text}</Text>
 98 |             </View>
 99 |         </View>
100 |     }
101 | 
102 |     render() {
103 |         return <View>
104 |             <GridView dataSource={this.state.dataSource}
105 |                       spacing={8}
106 |                       style={{padding:16}}
107 |                       renderCell={this._renderCell.bind(this)}
108 | 
109 |             />
110 |         </View>
111 |     }
112 | }
113 | 
114 | module.exports = Example;
115 | 
116 | ```
117 | 


--------------------------------------------------------------------------------