Add row/col gaps in flatlist

App.tsx

function App() {
  const data = Array(10).fill(0);
  const GAP = 5;
  const numColumns = 3;
  const { width } = Dimensions.get("window");
  // Reduce the size to accomodate margin space by items
  const ITEM_SIZE = width / numColumns - ((numColumns - 1) * GAP) / numColumns;

  const renderItem = ({ index }) => {
    const col = index % numColumns;
    const isInFirstCol = col === 0;
    return (
      <View
        style={
          {
            marginLeft: isInFirstCol ? 0 : GAP,
          }
        }
      >
        <View
          style={{
            width: ITEM_SIZE,
            height: ITEM_SIZE,
            backgroundColor: "black",
          }}
        />
      </View>
    );
  };

  return (
    <FlatList
      renderItem={renderItem}
      data={data}
      numColumns={numColumns}
      keyExtractor={(_item, index) => index.toString()}
      ItemSeparatorComponent={() => (
        <View style={{ height: GAP }} />
      )}
      key={numColumns}
    />
  );
}