Animations in recycled components seem to be broken from v3.9.0 and up

[LcTwisk]

Description

The changes in #5268 result in animations not properly resetting when a component is being recycled in e.g. a FlashList (even if the SharedValue's backing the animation are reset.

Was able to work around it by explicitly setting a property that would change when recycling. That results in the _requiresNewInitialshere to become true (because of a change in props). However, I'm not sure if this is the intended solution for recycling. Any thoughts?

      <Animated.View
+       key={index}
        style={animatedStyle}
        height={height}
        onLayout={onLayout}
      />

A video showing the issue in our app:

The following can be observed: an animation is triggered on component 1, but the state is not being reset when the component is recycled on index 11 (there's a recycle pool of 10 components).
The backing SharedValue's are being reset when the component is recycled:

if (id !== previousId.current) {
  stepperOpacity.value = 0;
  stepperTranslateX.value = 0;
  previousId.current = id;
}

RPReplay_Final1719850658.MP4

Steps to reproduce

1. Create a large list with uniform components that will be recycled using e.g. a FlashList
2. Animate a state change in the first item of the list
3. Scroll down and see the animated style change appear on the recycled component (while the actual state change is reset)

Snack or a link to a repository

Will create a reproduction project later

Reanimated version

3.9.0 (and up)

React Native version

0.72.14

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Paper (Old Architecture)

Build type

Debug app & dev bundle

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[erquhart]

I'm also seeing this - specifically, onScroll from a handler created with useAnimatedScrollHandler is no longer called on scroll in a FlashList animated via reanimated createAnimatedComponent. Happy to try early releases to test any fix candidates if it's helpful. Building with Expo for iOS.

[LeslieOA]

I've had to stick to 3.6.2 to not break my animations with FlashList (it's especially noticeable when mid-scroll and updating objects in an array).

[szydlovsky]

Hey @erquhart @LeslieOA @LcTwisk could please try out the following patch?
reanimated_3.13.0_styles.patch

[LeslieOA]

Hey @erquhart @LeslieOA @LcTwisk could please try out the following patch? reanimated_3.13.0_styles.patch

I’m using Expo prebuild, but will see if I can create a confit plugin (or use build properties [???]) to apply the patch.
If not: I’ll branch and manually patch then get back to you later today. 🙏🏾

[LcTwisk]

Hey @erquhart @LeslieOA @LcTwisk could please try out the following patch? reanimated_3.13.0_styles.patch

That's essentially reverting #5268, right? Yes, we're using a similar patch at the moment, and it fixed the issues we experienced 👍

[szydlovsky]

The fix should be there by the next stable version (3.14.0 or next iteration of 3.13.x)

[JustJoostNL]

@LcTwisk do you mind giving a small explaination on how you've used FlashList with react-native-reanimated. I can't get the layout transitions to work.

[erquhart]

@szydlovsky sorry it took so long to try this out - still broken for me as of 3.10.1.

Edit: apparently I can't read, you said 3.13x+. I'll try the actual patch.

Update: installed 3.14.0, works! Thanks!