react-native-easy-grid-view

    0.1.1 • Public • Published

    react-native-easy-grid-view

    npm package

    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

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

    Example

    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;
     

    Install

    npm i react-native-easy-grid-view

    DownloadsWeekly Downloads

    28

    Version

    0.1.1

    License

    ISC

    Last publish

    Collaborators

    • clh161