ColumnWrapperStyle example

[BalogunofAfrica]

Hi guys, I don't understand how to achieve columnWrapperStyle with FlashList. I have checked other discussions and tried playing with the overrideItemLayout prop, but I am not getting the desired result

Given this code with FlatList where I have 2 columns with the items touching the edge of the screen, how do I achieve the same using FlashList?

      <FlatList
        columnWrapperStyle={{
          justifyContent: 'space-between'
        }}
        keyExtractor={item => item.id}
        data={data}
        numColumns={2}
        renderItem={Item}
       />

Here's a minimal snack showing what I am getting with both implementations:

https://snack.expo.dev/@balogunofafrica/example-flashlist

[BalogunofAfrica]

cc: @hirbod

[BalogunofAfrica]

Solved this by creating a helper component and calculating the alignment of each column based on the index

import { StyleSheet, View, ViewProps } from "react-native";

const getItemStyle = (index: number, numColumns: number) => {
  const alignItems = (() => {
    if (numColumns < 2 || index % numColumns === 0) return "flex-start";
    if ((index + 1) % numColumns === 0) return "flex-end";

    return "center";
  })();

  return {
    alignItems,
    width: "100%",
  } as const;
};

type ColumnItemProps = ViewProps & {
  children: React.ReactNode;
  index: number;
  numColumns: number;
};
export const ColumnItem = ({ children, index, numColumns, ...rest }: ColumnItemProps) => (
    <View style={StyleSheet.flatten([getItemStyle(index, numColumns),rest.style])} {...rest}>
      {children}
    </View>
);

You can then use the component in your renderItem:

...

const numColumns = 3

...

<FlashList 
    data={data}
    numColumns={numColumns}
    renderItem={({index}) => (
       <ColumnItem index={index} numColumns={numColumns}>
          <CardContent />
       </ColumnItem>
    )}
/>

....

[BalogunofAfrica]

Oh nice, mind sharing? :)

[hirbod]

Our solutions or @naqvitalha version?

[BalogunofAfrica]

Yeah yours or both if you can

[hirbod]

Here is our implementation by @intergalacticspacehighway. I forgot that we changed from modulo to negative margin.
https://snack.expo.dev/@nishanbende/a1ae57

The other implementation is experimental, I'd wait for approval by @naqvitalha before sharing.

[BalogunofAfrica]

Nice, thank you :)

[fahminurk]

thx bro i need this!

[Mokhtaar]

how to add spaces between the list while keeping them centered?

[seva3l]

you can use the ItemSeparatorComponent and pass a component into it.
like this

import { View, Text } from 'react-native'
import React from 'react'

interface Props{
  gap: number
}
const ListGap = ({gap}: Props) => {
  return (
    <View style={{height: gap ? gap : 10}}/>
  )
}

export default ListGap

 <FlashList
        data={data}
        ItemSeparatorComponent={ListGap}