Stateid collisions \ RecyclerListView animation render during pagination

[ze-kel]

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",