Add gap between columns

[wong2]

I'm implementing a two column list with FlashList, ItemSeparatorComponent are only added between rows, how can I add a gap between these two columns?

[RohovDmytro]

@wong2 , any news on this?

[ivankdev]

same needs

[gavinnwang]

^

[abdoachhoubi]

It's not implemented yet in the FlashList!
However, I found a way to hack it.
I wrapped my elements in a View and depending on their indexes I added a padding:

// ...
renderItem={({data, index}) => {
return (
<View style={[index % 2 ? {paddingRight: 20} : {paddingLeft: 20}, {flex: 1}]} >
<Item data={data} />
</View> );
}}
// ...

If you have more columns I still have a way to hack it!

[muhamad-rizki]

if you have dynamic column number, you can try:

  const colNum = 4;
  const gap = 8;
  const renderRowItem = useCallback(({item, index}: any) => {
    return (
      <View
        style={{
          flexGrow: 1,
          paddingLeft: index % colNum === 0 ? gap : 0,
          paddingRight: index % 1 === 0 ? gap : 0,
          paddingBottom: index % 1 === 0 ? gap : 0,
          paddingTop: index < colNum ? gap : 0,
        }}>
        <RenderItemComponent {...item} />
      </View>
    );
  }, []);

[usmangurowa]

Although i am using tailwindcss with nativewind, you can use the same approach using stylesheet.

 const renderItem = React.useCallback(
    ({ item, index }: { item: BusinessType; index: number }) => (
      <BusinessCard
        className={cn("w-[95%]", {
          "mr-auto": index % 2 === 0,
          "ml-auto": index % 2 === 1
        })}
        {...item}
      />
    ),
    []
  );

with styles

 const renderItem = React.useCallback(
    ({ item, index }: { item: BusinessType; index: number }) => (
      <BusinessCard
       
 style={{
          width: "95%",
          marginRight: index % 2 === 0 ? "auto" : undefined,
          marginLeft: index % 2 === 1 ? "auto" : undefined
        }}
        {...item}
      />
    ),
    []
  );

[n-ii-ma]

How is this not already implemented?!

[Michota]

bump... we need this!

[LouisR-P]

@naqvitalha

[a16n-dev]

None of the above solutions worked for me - they all resulted in some columns being larger than others.

After a lot of trial and error I landed on this which seems to work well for 2 or more columns, and keeps all columns the same width:

const gap = 8;
const numCols = 4;

// Evenly distribute the gap width between each item (4 columns has 3 gaps)
const itemGap = (gap * (numCols - 1)) / numCols;

return (
  <FlashList
    renderItem={({ item, index }) => {
      // Left margin increases for each column, right margin decreases for each column
      // What's important is that marginRight + marginLeft === itemGap
      const marginLeft = ((index % numCols) / (numCols - 1)) * itemGap;
      const marginRight = itemGap - marginLeft

      return (
        <View
          style={{
            flexGrow: 1,
            marginLeft,
            marginRight,
          }}
        >
          {'...'}
        </View>
      );
    }}
  />
);

With the example above you get 4 nicely spaced columns:

| [ITEM] <-6-> | <-2-> [ITEM] <-4-> | <-4-> [ITEM] <-2-> |  <-6-> [ITEM] |