Layout Animation on Animated/Reanimated when trying to add to first element of list

[henrymoulton]

Current behavior

Adding an item to the end of the list and animating it in using the Layout Animation documentation works great.

Simulator.Screen.Recording.-.iPhone.13.-.2022-09-27.at.14.53.34.mp4

However, when trying to animate in an item at the beginning of the list it's a bit buggy:

Simulator.Screen.Recording.-.iPhone.13.-.2022-09-27.at.14.51.59.mp4

  const handleRenderItem = useCallback(({ item }) => {
    if (isOfHeaderType(item)) {
      // Rendering header
      return <TransactionListSectionHeader title={item} daySpend={0} />;
    }
    return <TransactionListItem transaction={item.transaction} transactionCategory={item.transactionCategory} />;
  }, []);

  const handleGetItemType = useCallback((item) => {
    return isOfHeaderType(item) ? "sectionHeader" : "row";
  }, []);

  const stickyHeaderIndices = useMemo(() => getStickyHeaderIndices(flashListTxs), [flashListTxs]);

  const [txs, setTxs] = useState<FlashListData>(flashListTxs);

  const list = useRef<FlashList<unknown> | null>(null);

const handleOnPress = () => {
    setTxs((txs) => {
      // BUGGY... but doesn't animate in at the front of the list.
      // return [
      //   {
      //     transactionCategory: TransactionCategory.Card,
      //     transaction: generateTransactionData("Random Name Lol"),
      //   },
      // ].concat(...txs);
     // works... but not how we want it
      return txs.concat({
        transactionCategory: TransactionCategory.Card,
        transaction: generateTransactionData("Random Name Lol"),
      });
    });
    // This must be called before `LayoutAnimation.configureNext` in order for the animation to run properly.
    list.current?.prepareForLayoutAnimationRender();
    // After removing the item, we can start the animation.
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
  };

 <Button title={"Add to list"} onPress={handleOnPress} />
      <AnimatedFlashList
        data={txs}
        // Saving reference to the `FlashList` instance to later trigger `prepareForLayoutAnimationRender` method.
        ref={list}
        estimatedItemSize={TRANSACTION_ITEM_HEIGHT}
        renderItem={handleRenderItem}
        getItemType={handleGetItemType}
        stickyHeaderIndices={stickyHeaderIndices}
        // CellRendererComponent={(props) => {
        //   return <AnimatedCellContainer {...props} />;
        // }}
        keyExtractor={(item: any) => {
          if (isOfHeaderType(item)) {
            return `${item.title}-${item.daySpend}`;
          }
          return item.transaction.id;
        }}
        // disableAutoLayout={true}
      />

Expected behavior

Items that are new in the list (I assume from using a unique key, should animate in nicely).

To Reproduce

Platform:

• iOS
• Android

Environment

"@shopify/flash-list": "^1.3.0",

[iuliuvisovan]

I presume I'm encountering the same bug (basically only the affected item is animating, and the rest of the list "jumps"):

With React Native's FlatList (smooth):

Screen.Recording.2022-10-03.at.22.32.37.mov

With Shopify's FlashList (jumpy):

Screen.Recording.2022-10-03.at.22.33.06.mov

[fortmarek]

Hey, it'd be really appreciated if you could create a reproducible project in Snack 🙏

[nandorojo]

Does anyone have a working example of layout animations from Reanimated in FlashList? I can't get it working

[smfunder]

Hello, I come here to try to help in reproducing this issue. I still have the same issue reported and can't figure it out how to solve it. Basically if we add items at last position the animation works great by only animating the just inserted item, but when the new item is inserted first in the array all the other items jumps and then animate to the final position.

Here I recorded a video on iOS simulator where when I hit Add Entry we can see how the other items are going down first and then animate up. I expect to those items just move up without jumping and the new item just animates.

(sorry the video is failing to upload)

I also created a snack with very basic code to just show the issue. I intentionally put a 3 seconds animation to make sure we can easily see the jumpy cells.

I use the list inverted because it is a chat app. I also need to insert the items first because of the same reason.

Here is the snack: https://snack.expo.dev/@smfunder2/flashlistanimation

Thank you!