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!

[byrizki]

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!

[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] |

[on1force]

this is indeed the easiest to implement atm.. thanks man 👏

[yogesharcuss12]

any solution for masonry ?

[fadbad]

Here's my solution for a GridList component using FlashList

import { View } from "react-native";
import { FlashList, FlashListProps } from "@shopify/flash-list";

interface Props {
    gap: number;
    cols: number;
}

export default <T extends Props>({gap, cols, ...rest}: FlashListProps<T> & Props) => (
    <FlashList 
        numColumns={cols}
        ItemSeparatorComponent={() => <View style={{height: gap}} />}
        CellRendererComponent={({style, index, ...props}) => {
            const itemGap = (gap * (cols - 1)) / cols;
            const paddingLeft = ((index % cols) / (cols - 1)) * itemGap;
            const paddingRight = itemGap - paddingLeft
            return (
                <View 
                    style={{...style, flexGrow: 1, paddingLeft, paddingRight}} 
                    {...props} 
                />
            )
        }}
        {...rest}
    />
)

[latinrev]

This issue is almost 3 years old by now, is there really no roadmap on this getting implemented?