KartikTalwar/rn-grid-view

React Native GridView

React Native GridView

Screenshot

Installation

Use NPM

npm install rn-grid-view --save

Basic Example

var React = require('react-native');
var {
  View,
  Text,
  Image,
  StyleSheet,
} = React;

var GridView = require('rn-grid-view');


var Books = React.createClass({

  getInitialState: function() {
    return {
             books : {
                      "Finished Reading": [
                                           {
                                            id: 1,
                                            image: "http://i.imgur.com/4KfXDqX.png"
                                           }
                                          ],
                     }
           }
  },


  _renderBook: function(item) {
    return (
            <View key={item.id}>
              <Image
                style={styles.thumb}
                source={{uri: item.image}} />
            </View>
           )
  },


  _renderHeader: function(data, id) {
    return (<View style={styles.header}>
              <Text style={styles.headerText}>{id}</Text>
            </View>);
  },


  render: function() {

    // All available props
    return (
            <GridView
              itemsPerRow={4}
              renderFooter={null}
              onEndReached={null}
              scrollEnabled={true}
              renderSeparator={null}
              style={{marginTop: 10}}
              items={this.state.books}
              fillIncompleteRow={false}
              renderItem={this._renderBook}
              renderSectionHeader={this._renderHeader}
              automaticallyAdjustContentInsets={false} />
           )
  },

});


var styles = StyleSheet.create({
  thumb: {
    width: 90,
    height: 140,
    resizeMode: 'cover',
    margin: 1,
  },
  header: {
    backgroundColor: '#1CC839',
  },
  headerText: {
    fontSize: 18,
    fontWeight: '700',
    textAlign: 'center',
    marginBottom: 4,
    marginBottom: 5,
    marginTop: 5,
    color: "white",
  },
});

License: MIT