Stateid collisions \ RecyclerListView animation render during pagination

[illkle]

Current behavior

Trying to render array of items(data array). Items are sorted depending on their inclusion in another array(favorites array).

This causes Possible stateid collision when adding\removing items from favorites array. Collisions error can be fixed with copying and data array each time, however this causes RecyclerListView animation render during pagination errors. Bug is unique to flashlist and is not present on FlatList\Reanimated FlatList.

Expected behavior

Items sort correctly without errors.

To Reproduce

1. Click on random items. Observe stableid collision error.
2. Reload, click multiple times on first item, observe it not changing color as it should.
3. Uncomment lines in removeItem and addItem. Observe stableid collision not happening anymore.
4. (optional) Replace FlashList with FlatList or Animated.FlatList — non of the issues above are reproducable.

import { useRef, useState } from "react";
import { LayoutAnimation, Pressable, Text, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { FlashList } from "@shopify/flash-list";

export default function Index() {
  const [data, setData] = useState(["1", "2", "3", "4", "5"]);

  const [favorites, setFavorites] = useState(["1"]);

  const listRef = useRef<FlashList<string> | null>(null);

  const removeItem = (item: string) => {
    setFavorites([...favorites.filter((v) => v !== item)]);
    //setData([...data]);
    listRef.current?.prepareForLayoutAnimationRender();
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
  };

  const addItem = (item: string) => {
    setFavorites([...favorites, item]);
    //setData([...data]);
    listRef.current?.prepareForLayoutAnimationRender();
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
  };

  const sorted = data.sort((a, b) => {
    const at = favorites.includes(a);
    const bt = favorites.includes(b);
    if (at && !bt) return -1;
    if (bt && !at) return 1;
    return a.localeCompare(b);
  });

  const renderItem = ({ item }: { item: string }) => {
    return (
      <Pressable
        onPress={() => {
          if (favorites.includes(item)) {
            removeItem(item);
          } else {
            addItem(item);
          }
        }}
      >
        <View
          style={{
            height: 100,
            backgroundColor: favorites.includes(item) ? "red" : "white",
          }}
        >
          <Text>Cell Id: {item}</Text>
        </View>
      </Pressable>
    );
  };

  return (
    <FlashList
      ListHeaderComponent={() => (
        <>
          <SafeAreaView edges={["top"]} />
          <Text style={{ color: "white" }}>
            {JSON.stringify(favorites)}

            {favorites.includes("1") ? "y" : "n"}
          </Text>
        </>
      )}
      ref={listRef}
      keyExtractor={(item: string) => {
        return item;
      }}
      id="asl;kdjds"
      renderItem={renderItem}
      estimatedItemSize={100}
      data={sorted}
    />
  );
}

Platform:

• iOS
• Android — have no ability to test

Environment

"@shopify/flash-list": "1.7.1",
"react-native": "~0.74.5",
"expo": "~51.0.30",

[cnx-caiobarroso]

Same here, I can reproduce this issue even without removing items, just by animating an item this issue occurs, the app freezes. I believe that's something to do with the item size/location.

EDIT: I reproduced this issue on Android, and the animation was size related, like an expansive box.