React Native FlashList

Question

I just started exploring the FlashList component and I came across a problem. Screenshot I'm following their approach of SectionList but I want to achive a card like list but this is rendering the items one by one so each item is a card on it's own. Does anybody knows how can I make each group one card?

Is this

expenses?.map((group: any) => (
  <Fragment key={group.date}>
    <Animated.Text
      entering={FadeIn}
      exiting={FadeOut}
      layout={transition}
      style={{
        color: Colours[colourScheme ?? "dark"].textLight,
        width: "100%",
        marginTop: Sizes.xSmall,
      }}
    >
      {group.date}
    </Animated.Text>
    <Animated.View
      style={styles(Colours[colourScheme ?? "dark"]).container}
      layout={transition}
    >
      <FlashList
        data={group.expenses}
        renderItem={renderExpenses}
        scrollEnabled={false}
        estimatedItemSize={70}
      />
    </Animated.View>
  </Fragment>

a better approach with this data

const expensesGroups = expenseQuery.data
? Object.values(
    expenseQuery.data?.reduce((spd, item) => {
      var today = moment(new Date(item.expenseDate.split("T")[0])).format(
        "DD MMMM YYYY"
      );
      if (!spd[today]) {
        spd[today] = {
          date: today,
          expenses: [],
        };
      }
      spd[today].expenses.push(item);
      return spd;
    }, [])
  )
: [];

or it defeats the whole point of FlashList?

Answer 1

If you want to replicate SectionList component using FlashList, your data array needs to look different. It is still a flat array of items.

So in regular FlashList implementation like a FlatList you have an array like this:

const data = [{...card0}, {...card1}, {...card2}]

If you want to implement SectionList your data array needs to look like:

const data = [{
    title: '', type: 0
}, 
{
    ...card0, type: 1
}, 
{
    ....card1, type: 1
}, 
{
    title: '', type: 0
}, 
{
    ...card2, type: 1
}]

And your FlashList Component:

const ContactsFlashList = () => {
  return (
    <FlashList
      data={contacts}
      renderItem={({ item }) => {
        if (item.type === 0) {
          // Rendering header
          return <Text style={styles.header}>{item}</Text>;
        } else {
          // Render item
          return <Text>{item.firstName}</Text>;
        }
      }}
      getItemType={(item) => {
        // To achieve better performance, specify the type based on the item
        return item.type === 0 ? "sectionHeader": "row";
      }}
      estimatedItemSize={100}
    />
  );
};

https://shopify.github.io/flash-list/docs/guides/section-list

Then inside your renderItem function, you can do something like this:

renderItem={({ item, index }) => {
        if (item.type === 0) {
          // Rendering header
            return <Text style={styles.header}>{item}</Text>;
        } else {
          // Render item
            const prevItem = index > 0 ? data[index - 1] : null;
            const nextItem = index < data.length - 1 ? data[index + 1] : null;
            let borderStyles = {}
            if (prevItem !== null && prevItem.type === 0) {
                borderStyles = {
                    borderTopLeftCornerRadius = 8
                    borderTopRightCornerRadius = 8
                }
            }
            if (nextItem !== null && nextItem.type === 0) {
                borderStyles = {
                    borderBottomLeftCornerRadius = 8
                    borderBottomRightCornerRadius = 8
                }
            }
                // apply styles.
          return <Text>{item.firstName}</Text>;
        }
      }}