react-native-grid-example's Introduction

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 you're flexbox is somewhat rusty, I highly recommend you go through this guide

Credits & References

This example was based on Colin Ramsay's suggestion on StackoverFlow
This is a follow up the disucction started on facebook/react-native#1276
The example code was based on ListView example, included in the ReactNative's UIExplorer examples.

Recommend Projects