How to create two columns with space beetwen in react native - flatList

Question

Hi i'm new in React Native.

I am trying to create two columns layout with space beetween using react native component called flatList.

Here is my view Code:

<View style={styles.container}>
        <FlatList
            data={db}
            keyExtractor={ (item, index) => item.id }
            numColumns={2}
            renderItem={
                ({item}) => (
                    <TouchableWithoutFeedback  onPress ={() => showItemDetails(item.id)}>
                        <View style={styles.listItem}>
                            <Text style={styles.title}>{item.name}</Text>
                            <Image
                                style={styles.image}
                                source={{uri: item.image}}
                            />
                            <Text style={styles.price}>{item.price} zł</Text>
                        </View>
                    </TouchableWithoutFeedback>
                )
            }
        />
    </View>

Here is styles:

container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 10,
    marginBottom: 40
},
listItem: {
    maxWidth: Dimensions.get('window').width /2,
    flex:0.5,
    backgroundColor: '#fff',
    marginBottom: 10,
    borderRadius: 4,
},

And result is two columns but without space between. Could you help me resolve this problem ?

Answer 1

Use ItemSeparatorComponent for render a compontent between items

Docs: Rendered in between each item, but not at the top or bottom.

    <FlatList
        data={arrayOfData}
        horizontal
        ItemSeparatorComponent={
            () => <View style={{ width: 16, backgroundColor: 'pink' }}/>
        }
        renderItem={({ item }) => (
            <ItemView product={item} />
        )}
    />

Preview in horizontal list

If list is vertical and suppose columnCount is 2

Answer 2

You can give the item itself a width value of 45%. Also, flatlist has a property called columnWrapperStyle that you can give the value justifyContent: 'space-between.

Heres an example:

<FlatList
    columnWrapperStyle={{justifyContent: 'space-between'}}
    data={ApiData}
    numColumns={2}
    renderItem={({item}) => {
      return (
         <item style={{width: '45%'}} />
      );
    }}
/>

Answer 3

You have to give the styles.container to the contentContainerStyle propety of Flatlist, like so:

<FlatList
        data={db}
        keyExtractor={ (item, index) => item.id }
        contentContainerStyle={styles.container}
        numColumns={2}
        renderItem={
            ({item}) => (
                <TouchableWithoutFeedback  onPress ={() => showItemDetails(item.id)}>
                    <View style={styles.listItem}>
                        <Text style={styles.title}>{item.name}</Text>
                        <Image
                            style={styles.image}
                            source={{uri: item.image}}
                        />
                        <Text style={styles.price}>{item.price} zł</Text>
                    </View>
                </TouchableWithoutFeedback>
            )
        }
    />