ListView grid in React Native

Question

I'm building a simple app in React Native that fetches listings from a remote JSON source and displays them on screen.

So far, using the excellent example here, I've managed to get the results to display using the ListView components in rows (ie 1 result per row, see screenshot). I need the results to display in a grid, ie 3 to 6 items per row, depending on the screen size and orientation.

What is the best way to get these results into a grid? Can I use ListView for this, or is that only for one-per-row results? I've tried playing around with flexbox styles but, since React doesn't seem to accept % values and ListView doesn't accept styles, I haven't yet had any success.

Answer 1

You need to use a combination of flexbox , and the knowledge that ListView wraps ScrollView and so takes on its properties. With that in mind you can use the ScrollView's contentContainerStyle prop to style the items.

var TestCmp = React.createClass({
    getInitialState: function() {
      var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
      var data = Array.apply(null, {length: 20}).map(Number.call, Number);
      return {
        dataSource: ds.cloneWithRows(data),
      };
    },

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

Just a ListView with some dummy data. Note the use of contentContainerStyle . Here's the style object:

var styles = StyleSheet.create({
    list: {
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
    item: {
        backgroundColor: 'red',
        margin: 3,
        width: 100
    }
});

We tell the container we want items in a wrapping row, and the we set the width of each child object.

Answer 2

ListView is now deprecated and you should use FlatList instead. FlatList has a prop called numColumns which is exactly what we want to create a scrollable grid.

For example:

const data = [
  {id: 'a', value: 'A'},
  {id: 'b', value: 'B'},
  {id: 'c', value: 'C'},
  {id: 'd', value: 'D'},
  {id: 'e', value: 'E'},
  {id: 'f', value: 'F'},
];
const numColumns = 3;
const size = Dimensions.get('window').width/numColumns;
const styles = StyleSheet.create({
  itemContainer: {
    width: size,
    height: size,
  },
  item: {
    flex: 1,
    margin: 3,
    backgroundColor: 'lightblue',
  }
});

function Grid(props) {
  return (
    <FlatList
      data={data}
      renderItem={({item}) => (
        <View style={styles.itemContainer}>
          <Text style={styles.item}>{item.value}</Text>
        </View>
      )}
      keyExtractor={item => item.id}
      numColumns={numColumns} />
  );
}

This blog post does a good job explaining the new features of FlatList.

Note: For some reason you have to use keyExtractor on the FlatList instead of the typical key prop on each item. Otherwise you'll get a warning. Basic FlatList code throws Warning - React Native

Answer 3

I'm adding this as an answer because overflow comments are hidden under Colin Ramsay's response: as of React Native 0.28, you also need alignItems: 'flex-start', in the listview styling or the flexWrap won't work. Thanks to Kerumen on codedump.io for this. So,

var styles = StyleSheet.create({
list: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'flex-start',
},

...with the rest as in Colin's response.

Answer 4

I had the same problem and I wrote a component that solves that problem, you can find it here: https://github.com/pavlelekic/react-native-gridview

Also, one other thing this component does is it makes sure that the items width is a whole number, so that the borders of items don't have antialiasing, they are clear and crisp.

Answer 5

Follow Colin Ramsay's answer. And if you want half width for each item, try this way.

...
import { Dimensions } from 'react-native'; 
const { width, height } = Dimensions.get('window');
const gutter = 0; // You can add gutter if you want
...


const styles = StyleSheet.create({
  item: {
    width: (width - gutter * 3)/2,
    marginBottom: gutter,
    flexDirection: 'column',
    alignSelf: 'flex-start',
    backgroundColor: '#ff0000',
  },
  list: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    flexWrap: 'wrap',
    paddingHorizontal: gutter,
  },
});

Answer 6

use FlatList instead of Listview in react-native. it has more value added feature and better performance. checkout the example here

Answer 7

您可以使用 FlatList 并设置 numColumns 来获得与 grid 相同的结果

Answer 8

Check the following example using FlatList component of React Native to support infinite scrolling with an excellent performance:

//Resize the grid
onLayout = (event) => { 
  const {width} = event.nativeEvent.layout;
  const itemWidth = 150
  const numColumns = Math.floor(width/itemWidth)
  this.setState({ numColumns: numColumns })
}

render() {
  return (
    <Content 
     contentContainerStyle={{flex:1, alignItems: 'center'}}
     onLayout={this.onLayout}>
       <FlatList
        data={this.state.products}
        keyExtractor={(item, index) => index}
        key={this.state.numColumns}
        numColumns={this.state.numColumns}
        renderItem={({item}) => 
          <ListThumb //Custom component, it's only an example.
           navigation={navigation}
           brand={item.brand}
           price={item.price}
           imageSource={item.image_link}/>
        }
     />
   </Content>
  )
}    

The example looks like

Best regards, Nicholls

Answer 9

ScrollView with contentContainerStyle prop worked for me

        <ScrollView contentContainerStyle={{ flexDirection: "row", flexWrap: "wrap", alignContent: "center",}}>
            {user.posts.map((post, index) => (
                <Image
                    source={require(post.uri)}
                    key={index}
                    style={{ width: 100, height: 100 }}
                />
            ))}
        </ScrollView>