React Native - Grid Layout Example
Switch branches/tags
Nothing to show
Clone or download
Latest commit 812ef9a Oct 11, 2017
Permalink
Failed to load latest commit information.
GridLayoutExample added docs Jun 15, 2015
README.md Typo fix in Readme Oct 10, 2017
demo.gif added demo gif Jun 15, 2015

README.md

React Native - Grid Layout Example

By default React Native's ListView renders as a table.

In order to change the table layout to a grid layout (similar to UICollectionViewFlowLayout) you need to do the following;

Setup the ListView container style

A ListView root element is a ScrollView that inherits the ListView's props:

    var ListView = React.createClass({
    // ...
        render: function() {
            return (
              <ScrollView {...props}
                ref={SCROLLVIEW_REF}>
                {header}
                {bodyComponents}
                {footer}
              </ScrollView>
            );
        }
    }

see source

With that in mind you can use the ScrollView's contentContainerStyle prop to style the ListView;

var GridLayoutExample = React.createClass({
// ...
render: function() {
    return (
      <ListView contentContainerStyle={styles.list}
        dataSource={this.state.dataSource}
        renderRow={(rowData) => <Text style={styles.item}>{rowData}</Text>}
      />
    );
  }

Define the grid layout using flexbox

Using basic flexbox we can define whatever grid layout we want;

var styles = StyleSheet.create({
    list: {
        justifyContent: 'center',
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
    item: {
        backgroundColor: '#CCC',
        margin: 10,
        width: 100,
        height: 100
    }
});

If your flexbox is somewhat rusty, I highly recommend you go through this guide

Credits & References