Legend State with React Native and FlashList

[the-devbear]

Hey I'm playing around with legend state and FlashList.
Currently it does not update the list, but the text in the header:

import {observer} from "@legendapp/state/react";
import {store$} from "@/src/lib/legend-state/todo.state";
import React from "react";
import {View, Text, Button} from "react-native";
import {FlashList} from "@shopify/flash-list";

export const Example = observer(function Example() {
    const todos = store$.todos.get()
    const total = store$.total.get();
    return <FlashList
        ListHeaderComponent={() => {
            return <Text>You have {total} todos</Text>
        }}
        data={todos}
        renderItem={({item}) => {
            return <View>
                <Text>{item.text}</Text>
            </View>
        }}
        ListFooterComponent={() => {
            return <Button title={'Add Todo'} onPress={() => {
                store$.addTodo('new todo')
            }}/>
        }}
    />
})

When I change data={todos} to data={[...todos] it works.

I guess it is because everything is mutable for better performance? Source: #66 (comment)

Would that be the best option to copy the array?
When I look at the FlashList documentation the data prob is of type data: ReadonlyArray<TItem> | null | undefined;
I guess since FlashList expects it to be immutable, but LegendState has mutable arrays so a rerender is not triggered.

[jmeistrich]

Hmm, yes I believe that's because of the mutability and because FlashList specifically checks whether data has changed: https://github.com/Shopify/flash-list/blob/2226ab0a54573d78f01b0a743bc51f9450dd5151/src/FlashList.tsx#L185. And it seems that not even extraData can make it update the list items...

I guess your change to clone the array works... I can't think of a better way to make it work with FlashList at the moment. I'll think about it some more though.

For what it's worth though, I'm making a list component with better performance and ergonomics than FlashList. It's still pre-1.0 but I know a few companies are already using it in production. It may be a good alternative? https://github.com/LegendApp/legend-list

[the-devbear]

Sounds great! I will check it out, thanks for the reply.

Since I am using supabase with the supabase syncer I have to do Object.values(data) anyways, because a Record is returned.