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 ?

Luke Melaia · Accepted Answer · 2020-07-31 06:37:58Z

78

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

edited Jul 31, 2020 at 6:37

Luke Melaia

1,46814 silver badges23 bronze badges

answered Jul 31, 2020 at 1:29

Eslam Adel

1,18911 silver badges12 bronze badges

Not working using columnWrapperStyle={{justifyContent: 'space-between'}}
– Chanrithisak Phok - Zen 善
Commented Nov 2, 2020 at 6:34
1

did you give the item it self a width of 45% for example
– Eslam Adel
Commented Nov 3, 2020 at 10:48
For me, space-around looks better than space-between.
– Murtuza
Commented Jul 24, 2021 at 9:38

Add a comment |

Sanjeev · Accepted Answer · 2019-08-12 17:20:46Z

42

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

edited Aug 12, 2019 at 17:20

Sanjeev

4,3753 gold badges30 silver badges37 bronze badges

answered Jan 26, 2019 at 18:01

Nicolas Sturm

6915 silver badges10 bronze badges

Add a comment |

Komeyl94 · Accepted Answer · 2017-10-15 05:31:49Z

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

Also make sure horizontal={true} is not defined in <FlatList> — Joe McLean, Commented May 19, 2022 at 1:58

Green · Accepted Answer · 2022-05-02 18:18:44Z

10

How to create two columns with equal spacing between items:

    <FlatList 
        data={DATA}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        horizontal={false}   // you must include this line when using numColumns [per the documentation][1]
        numColumns={2}   // creates two columns
        key={2}   // add key to prevent error from being thrown
        columnWrapperStyle={{justifyContent: 'space-between'}}   // causes items to be equally spaced
    >

Also, this will set each column to 1/2 the screen width:

const styles = StyleSheet.create({
item: {
      flex: 1/2,
}})

answered May 2, 2022 at 18:18

Green

1,7791 gold badge18 silver badges27 bronze badges

Just adding columnWrapperStyle={{justifyContent: 'space-between'}} does it for me.
– Chaudhry Talha
Commented Jan 31, 2024 at 3:04

Add a comment |

Peyotle · Accepted Answer · 2017-05-11 07:53:05Z

3

Just add some margin to the style of the list Item.

listItem: {
  margin: 10,
}

answered May 11, 2017 at 7:53

Peyotle

2,3051 gold badge17 silver badges16 bronze badges

This will mess with flatList scrolling offset, thus producing a scrollable list that can't scroll to the bottom of the content.
– Alen Zarkovic
Commented Jan 5, 2018 at 17:21

Add a comment |

TechnoTim · Accepted Answer · 2019-11-06 23:08:51Z

Based on your example it looks like you can add a margin to your list item styles:

listItem: {
    maxWidth: Dimensions.get('window').width /2,
    flex:0.5,
    backgroundColor: '#fff',
    marginBottom: 10,
    borderRadius: 4,
    margin: 18,
},

Keep in mind that this is equivalent to doing:

listItem: {
    maxWidth: Dimensions.get('window').width /2,
    flex:0.5,
    backgroundColor: '#fff',
    marginBottom: 10,
    borderRadius: 4,
    marginTop: 18,
    marginBottom: 18,
    marginRight: 18,
    marginLeft: 18,
},

Customize to your liking or spec :)

Chisom Maxwell · Accepted Answer · 2023-07-09 00:10:20Z

You can do this by adding the flex property gap in columnWrapperStyle

<View style={styles.container}>
    <FlatList
        columnWrapperStyle={{gap:5}}
        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>

Archimedes Trajano · Accepted Answer · 2021-10-07 21:14:55Z

Assuming your items are flex:1 and no width specified. You can wrap your renderItem with another view that adds the padding if needed


function columnWrappedRenderItemFunction<ItemT>(
  renderItem: ListRenderItem<ItemT>,
  numColumns: number,
  space: FlatListProps<ItemT>["space"],
  numberOfItems: number
): FlatListProps<ItemT>["renderItem"] {
  return function columnWrappedRenderItem({
    index,
    ...props
  }: Parameters<ListRenderItem<ItemT>>[0]): ReturnType<ListRenderItem<ItemT>> {
    const needsGapOnLeft = index % numColumns !== 0;
    let extraItems = 0;
    if (index === numberOfItems - 1) {
      extraItems = (numColumns - (numberOfItems % numColumns)) % numColumns;
    }
    if (needsGapOnLeft) {
      return (
        <>
          <View style={{width:space}} />
          {renderItem({ index, ...props })}
          {Array.from({ length: extraItems }, (_, k) => (
            <View key={"extra_" + k} style={{marginLeft:space, flex:1}} />
          ))}
        </>
      );
    } else {
      return (
        <>
          {renderItem({ index, ...props })}
          {Array.from({ length: extraItems }, (_, k) => (
            <View key={"extra_" + k} marginLeft={space} style={{flex:1}} />
          ))}
        </>
      );
    }
  };
}

e.g.

function myRenderItem() { ... }
...
return (<FlatList 
   ...
   data={data}
   renderItem={
     numColumns === 1
          ? renderItem
          : columnWrappedRenderItemFunction(
              renderItem,
              numColumns,
              space,
              data.length
            )
      }
   numColumns={numColumns}
   ItemSeparatorComponent={() => <View style={{height: space}} />}
  />);

Manish Kahodariya · Accepted Answer · 2024-02-07 09:10:30Z

You can do this by adding the flex property gap in columnWrapperStyle

<FlatList
                data={data}
                columnWrapperStyle={{gap:s(5)}}
                renderItem={({ item }) => (
                  <View
                    style={{
                      flex: 1,
                      alignItems: "center",
                      gap: s(8),
                      flexDirection: "row",
                    }}
                  >
                    
                  </View>
                )}
                ItemSeparatorComponent={({ item, index }) => (
                  <View
                    style={{
                      marginVertical: s(5), //Add space between rows
                    }}
                  />
                )}
                numColumns={2}
                keyExtractor={(item, index) => index.toString()}
              />

Saleel · Accepted Answer · 2017-04-11 11:55:57Z

-1

I haven't used this library, but adding padding: 10 to listItem styles should help.

answered Apr 11, 2017 at 11:55

Saleel

8995 silver badges10 bronze badges

Add a comment |

Collectives™ on Stack Overflow

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

10 Answers 10

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

Linked

Related