react-native-easy-grid-view
A React Native component for grid view. Compatible with both iOS and Android.
Installation
npm install react-native-easy-grid-view --save
Usage
Props
Prop | Type | Description | Required | Default |
---|---|---|---|---|
spacing |
number |
Set spacing between cells | No |
0 |
renderCell |
function(data) |
function of rendering cell view | Yes |
DataSource
Use cloneWithCells(data,number of cells in a row)
to clone data
thisstate = dataSource: ds ;
Example
;;; { superprops; var ds = r1 !== r2; thisstate = dataSource: ds cellWidth: 0 cellHeight: 0 ; } { return <View onLayout= { var width = eventnativeEventlayoutwidth; ifthisstatecellWidth!=width this ifthisstatecellHeight!=width this }> <View style=width:thisstatecellWidthheight:thisstatecellHeightjustifyContent:'center'backgroundColor:cellbackgroundColor resizeMode=ImageresizeModestretch source=cellimage> <Text style=backgroundColor:'#0004'textAlign:'center'color:'#fff'fontSize:24>celltext</Text> </View> </View> } { return <View> <GridView dataSource=thisstatedataSource spacing=8 style=padding:16 renderCell=this_renderCell /> </View> } moduleexports = Example;