react-native-easy-grid-view


> A React Native component for grid view. Compatible with both iOS and Android.

Installation

``sh
npm install react-native-easy-grid-view --save
`




Usage

$3

| Prop | Type | Description | Required | Default |
|---|---|---|---|---|
|spacing|number|Set spacing between cells|No|0|
|renderCell|function(data)|function of rendering cell view|Yes||




$3

Use cloneWithCells(data,number of cells in a row) to clone data

`js
this.state = {
dataSource: ds.cloneWithCells([1,2,3,4],3)
};
`




$3


`js
import React, {Component} from "react";
import {Text, View} from "react-native";
import GridView from "react-native-easy-grid-view";

class Example extends Component {
constructor(props) {
super(props);
var ds = new GridView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithCells([
{
text: 1,
backgroundColor:'#f00'
}
, {
text: 2,
backgroundColor:'#0f0'

}, {
text: 3,
backgroundColor:'#00f'

}, {
text: 4,
backgroundColor:'#f0f'

}, {
text: 5,
backgroundColor:'#fff'

}, {
text: 6,
backgroundColor:'#000'

}], 2),
cellWidth: 0,
cellHeight: 0
};
}

_renderCell(cell) {
return {
var width = event.nativeEvent.layout.width;
if(this.state.cellWidth!=width){
this.setState({cellWidth:width})
}
if(this.state.cellHeight!=width){
this.setState({cellHeight:width})
}
}}>
resizeMode={Image.resizeMode.stretch} source={cell.image}>
{cell.text}


}

render() {
return
spacing={8}
style={{padding:16}}
renderCell={this._renderCell.bind(this)}

/>

}
}

module.exports = Example;

``