How do I add gap in between items in flatlist?

Question

I want to add some spacing in react native using flatlist, but it seems more difficult than it should be at the moment.

Turns out that react native does not support gap property, which makes this very complicated.

I solved the horizontal spacing, by making my item 49.5% wide which means I have 1% space horizontally, now how do I do the same for vertical spacing?

Most importantly how do i ensure that both horizontal and vertical "gaps" are EQUAL.

const renderItem = ({ item }) => (
  <Pressable onPress={() => alert(item.name)} style={{
        aspectRatio: 1,
    width: "49.5%",
    position: "relative",
  }}>
    <Image
      style={{
        width: "100%",
        height: "100%"
      }}
      source={{
        uri: item.url,
      }}
    />
    <View
      style={{
        position: "absolute",
        zIndex: 3,
        bottom: 0,
        paddingHorizontal: 2,
        paddingVertical: 8,
        flexDirection: "row",
        // justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Text style={{ color: "white", fontSize: 16 }}>{item.name}</Text>
    </View>
  </Pressable>
);

export default function App() {
  return       <FlatList
        numColumns={2}
        data={people}
        renderItem={renderItem}
        columnWrapperStyle={{
          justifyContent: "space-between"
        }}       
      />
}

Answer 1

Update

As Antonio Jaime stated in his answer, since RN 0.71 released in January 2023 there is a more clever and straightforward way to do it: gap in contentContainerStyle and columnWrapperStyle. Please check it out.

Previous Answer

You could use the ItemSeparatorComponent property of the FlatList component to make the vertical gap. This property is a component rendered in between each FlatList item, but not at the top, bottom, right or left. You can read more about it on the documentation.

Change the FlatList to this:

<FlatList
  numColumns={2}
  data={people}
  renderItem={renderItem}
  ItemSeparatorComponent={() => <View style={{height: 20}} />}
  /* that is not necessary anymore
columnWrapperStyle={{
    justifyContent: "space-between"
  }} */      
/>

In order for the horizontal space to be given the same size as the vertical space, you can move one column away from the other using padding:

• The items on the left have a paddingRight of half the size of the vertical space.
• The ones on the right get paddingLeft instead of paddingRight.

Here's the code:

const renderItem = ({ item, index }: Props) => (
  <View
    style={[
      {
        aspectRatio: 1,
        flexGrow: 1,
        width: "50%",
        position: "relative",
      },
      index % 2 === 0
      ? {
        paddingRight: 10,
      } : {
        paddingLeft: 10
      }
    ]}
  >
    <Pressable
      onPress={() => alert(item.name)}
    >

Some points:

• A parent View component was created because if the Pressable had the padding property, the vertical gap would be pressable too.
• Don't forget to set width: '50%' because this makes the images took half the screen's width.
• Both sides should receive the same padding value because this is important to make the gap centered.
• You should use padding instead of margin because the width still is 50%, so margin would push the elements beyond the right edge of the screen. If you use a greater value like 40 instead of 10 and margin instead of padding you can see the problem.

This was the visual result.

P.S.: I ran your app in my machine with some URL images I got on Unsplash and it worked: the vertical gap was created by the ItemSeparatorComponent.

P.S. 2: I made some changes to the code and now both horizontal and vertical gaps are equal sized. This was the result. In addition, I changed my answer.