Easy Grid View For React Native

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

Installation:

# NPM
$ npm install react-native-easy-grid-view --save

Usage:

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 <View onLayout={event => {
        var width = event.nativeEvent.layout.width;
       if(this.state.cellWidth!=width){
       this.setState({cellWidth:width})
       }
       if(this.state.cellHeight!=width){
       this.setState({cellHeight:width})
       }
      }}>
          <View style={{width:this.state.cellWidth,height:this.state.cellHeight,justifyContent:'center',backgroundColor:cell.backgroundColor}}
                 resizeMode={Image.resizeMode.stretch} source={cell.image}>
              <Text style={{backgroundColor:'#0004',textAlign:'center',color:'#fff',fontSize:24}}>{cell.text}</Text>
          </View>
      </View>
  }

  render() {
      return <View>
          <GridView dataSource={this.state.dataSource}
                    spacing={8}
                    style={{padding:16}}
                    renderCell={this._renderCell.bind(this)}

          />
      </View>
  }
}

module.exports = Example;

Preview:

Easy Grid View For React Native

Download Details:

Author: clh161

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/clh161/react-native-easy-grid-view

License: MIT

You Might Be Interested In:

Add Comment