Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including rn-grid-view with all npm packages installed. Try it out:

var rnGridView = require("rn-grid-view")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

rn-grid-view v1.1.0

React Native Grid View - Group lists (supports lists with headers) and display them as grouped rows

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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free