ListView Grid in React Native

Question

I am creating a simple application in React Native that extracts lists from a remote JSON source and displays them on the screen.

So far, using a great example , I managed to get results for display using ListView components in rows (for example, 1 result per row, see screenshot). I need results to display in a grid, i.e. 3 to 6 items per line, depending on screen size and orientation.

What is the best way to get these results in a grid? Can I use ListView for this, or is it just for results per line? I tried playing with flexbox styles, but since React doesn't seem to accept% and ListView doesn't accept styles, I haven't had time yet.

Answer 1

You need to use a combination of flexbox and the knowledge that ListView wraps ScrollView and therefore takes care of its properties. With that in mind, you can use the ScrollView contentContainerStyle prop to style elements.

 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. Pay attention to the use of contentContainerStyle . Here's a style object:

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

We tell the container that we want elements in the wrapper line, and we set the width of each child object.

Answer 2

I add this as an answer because overflow comments are hidden under Colin Ramsay's answer: with React Native 0.28 you also need alignItems: 'flex-start', in listview style, otherwise flexWrap will not work. Thanks to Kerumen on codedump.io for this. In this way,

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

... with the rest, as in Colin's answer.

Answer 3

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

In addition, another thing that this component does is that the width of the elements is an integer, so that the borders of the elements do not have smoothing, they are crisp and clear.

Answer 4

Follow Colin Ramsay. And if you want to get half the width for each element, try this method.

 ... 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 5

ListView is now deprecated and you should use FlatList . FlatList has support 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 describes the new features of FlatList well.

Note. For some reason, you should use keyExtractor in a FlatList instead of the typical key support for each element. Otherwise, you will receive a warning. Sources FlatList Warning - React Native

Answer 6

use FlatList instead of Listview in native-native. It has more added value and better performance. check the example here

Answer 7

You can use FlatList and set numColumns to get a result that matches the grid