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

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%'}} />      );    }}/>

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

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>            )        }    />