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}
      />
    ),
    []
  );