EnteringAnimation bug on a FlatList item - Additional ghost components

[passengerV]

Dear Reader,

The provided repository serves as chat application demo for representing strange Reanimated behavior of entering animation inside an animated FlatList:

SlideInUp and SlideInDown entering animations doesn't respect height constraints once the inverted FlatList contentContainerView is filled with items and the animation won't stop at expected boundary, but will leave the screen at top causing flying items. For example, let's have 10 items which fills the whole viewport. Until the viewport isn't filled, the enteringAnimation works as expected. Once the viewport is filled, the strange behavior starts and will stop until the viewport is exchanged with another 10 + 1 elements.

Notes:

• As chat applications usually does have chat rooms with messages from previous interaction, enteringAnimation is delegated to items by a criteria. The criteria is that chat message has to be earlier in time as the chat was opened (so we doesn't want to animate chat messages from past entering the screen, but only the newly added ones).
• Issues are mainly encountered on iOS, but Android seems to be affected as well.
• itemLayoutAnimation property of Animated.FlatList doesn't affect the issue.
• Strange behavior occurs both on Debug and Release builds.

Reproduction footage:

• can be found here.

Steps to reproduce

To reproduce enteringAnimation issue, run the provided repository on an emulator/simulator and:

1. Fill the viewport with items by pressing Add message button.
2. Once the viewport is filled, the strange behaviour will start.
3. Press the Add message button until the strange behaviour stops.

Snack or a link to a repository

https://github.com/passengerV/flatlist-layout

Reanimated version

3.4.0

React Native version

0.72.3

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[passengerV]

@Latropos Sorry, I can't assign you directly the ticket. If any support needed here, please ping me.

[github-actions[bot]]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Description section.

[Latropos]

Thank you very much! We have located the origin of the bug. The first element (Message 0) invokes onLayout too often. Right now I don't know why, but it happens after removing all the animations too. I've made sure I've removed import of reanimated, and indeed the extra invocation of onLayout still happens.

Please look at the recordings:

Error with slow animations on (it is a simulator debug option)	Calling onLayout without reanimated imported
https://github.com/software-mansion/react-native-reanimated/assets/56199675/8f2d83ff-1006-41b3-997b-1e320e167818	https://github.com/software-mansion/react-native-reanimated/assets/56199675/89762f4e-a20c-4b02-951e-4831bc46f827
As you can see the weird message is Message 0	For same reason `onLayout` is call even when reanimated is not imported at all

An we animate the entering animation of the Message 0 each time it invokes onLayout 😞

---

Now we are going to:

1. Investigate if the additional invocation of onLayout is the expected behaviour
2. If it is expected we will fix it in our library
3. If it is not expected we will try to fix it directly in react native

   ---

We also have a workaround for you problem, so if you want to get a solution faster: Append some dummyMessage as a last one in your list:

  const handleOnSend = (newMessage: ChatMessage) => {
    setMessages((prevState) => [
      newMessage,
      ...prevState,
+      { text: 'Dummy message' },
    ]);
  };

And don't render it:

const Message: React.FC<MeProps> = ({ message }) => {
  return (
    <React.Fragment>
+      {message.text === dummyMessage ? (
        <SomeMessage />
+      ) : null}
    </React.Fragment>
  );
};

Now it works!

[a-vikor]

@Latropos Thank you so much for the intensive research and provided workaround. If I have reported core React Native issue to your library, then I'm sorry about that and if it makes sense to report the same issue there (but with excluded animations), feel free to ping me. I will be here for testing the changes once they are ready. Thank you in advance!

[Latropos]

@a-vikor Thank you very much! It's already reported, so we're waiting for the answer 👌