react-native-reanimated: Layout Animation breaks after navigate

@Latropos I’ve created a new repro here: https://github.com/nicolascavallin/reanimated-bug

Basically, the existing keys lost their layout animation ability after the navigation with the @react-navigation/stack. Not the new ones.

Let me know how I can help.

Thanks in advance.

https://github.com/software-mansion/react-native-reanimated/assets/22961489/b7472bc9-9297-4335-9d81-c996112f16fb

We are experiencing the same issue. Layout animation works fine but after navigating to another screen, the animation stop working. The issue is only encountered on iOS, debug/release build, simulator and real device.

Here is a minimal reproduction repository

"react-native": "0.72.1",
"react-native-reanimated": "^3.3.0",
"react-native-screens": "^3.22.0",
"@react-navigation/native": "^6.1.7",
"@react-navigation/native-stack": "^6.9.13"

And the following capture from iOS simulator :

https://github.com/software-mansion/react-native-reanimated/assets/11976270/f99c3f94-7380-4b8a-8cc3-0685f252c199

@sguidotti It will be available in the next release, but you can test it now via nightly

Seems still not working 🥲

The example of #4997 is implemented with the react-navigation-native-stack but with the react-navigation-stack it doesn’t work

I am still encountering this issue with tabs using the nightly build:

reanimated: 3.9.0-nightly-20240403-6dc1e6fbf expo: 50.0.14

Initially the layout transition works correctly, then after navigating to another tab and then returning, the transitions no longer occur.

I think the reason that david was able to have his issue fixed, at least per the example he included, is that this only occurs when navigating from one stack to another. If you are navigating between screens within the same stack this issue indeed has been fixed in previous merges. I am using

   "react-native-reanimated": "^3.7.0",
   "@react-navigation/bottom-tabs": "^6.5.7",
   "@react-navigation/native": "^6.1.6",
   "@react-navigation/native-stack": "^6.9.17",

and still seeing this issue when navigating between bottom tabs stack and another native stack at the same level as the bottom tabs stack. However, if i keep navigation between screens to within the same stack the issue is not a problem.

I am still having this issue,

    "@react-navigation/native": "6.1.9",
    "@react-navigation/native-stack": "6.9.17",
    "react-native": "0.72.6",
    "react-native-reanimated": "3.6.1",
    "react-native-screens": "3.27.0",

The LinearTransition animation breaks after navigation.

While this issue is being resolved here, you can temporarily use the ‘InteractionManager’ from react-native to hack the problem:

const [isNavigationDone, setIsNavigationDone] = React.useState(false);

React.useEffect(() => {
    InteractionManager.runAfterInteractions(() => {
      setIsNavigationDone(true);
    })
}, [])

return (
  <View>{isNavigationDone ? <YourAnimatedComponent /> : null}</View>
)

The issue was fixed in #5495

Any update on this. with react-native-reanimated = 3.6.0 still experiencing with the native stack.

Same issue here only on iOS:

https://github.com/software-mansion/react-native-reanimated/assets/24797481/d9e5a98f-29f1-4760-8052-5c05fb0fcf42

It was resolved for me. I originally created a reproduction to show the issue still exists, but it seems to be fixed now. I was also only having the issues on iOS.

Using the following package versions

    "@react-navigation/native": "6.1.9",
    "@react-navigation/native-stack": "6.9.17",
    "react-native": "0.72.6",
    "react-native-reanimated": "3.6.1",
    "react-native-screens": "3.27.0",

See my working example here: https://github.com/davidjbng/reanimated-layout-animation-bug

https://github.com/software-mansion/react-native-reanimated/assets/29679909/a4ca7059-e7d8-49b3-8949-9c4a275c856d

Hi, @nicolascavallin, I can confirm the issue still exist. With native-stack. When I’m navigating from material-top-tabs to native-stack, then back to top-tabs, all layout animations in top-tabs navigator are broken.

“react-native”: “0.72.6”, “@react-navigation/material-top-tabs”: “^6.6.5”, “@react-navigation/native-stack”: “^6.9.17”, “react-native-reanimated”: “^3.6.1”,

Also there is freezeOnBlur: true option enabled. It’s iOS only. Android works fine. Hope this will help.

🙌🏼 🙌🏼 🙌🏼

Thanks @Latropos @piaskowyk for the #4997

Bravo for the fix! I can’t wait for it to be shipped!

Hello again! It looks like this issue is dragging on a bit, I find it surprising that such a cool and useful feature doesn’t work 😦

I’d like to help solve the problem, do you have any hints or tips when it comes to specific places in the code to look?

By the way, in the discussion related to PR #4421, @piaskowyk said that someone would try to investigate the problem, has that been possible? Were there any conclusions as to what changes should be made to solve the problem?

Thanks so much for your work, I hope I’m not spamming the notifications too much.

Has anyone found a better workaround than changing the key? The problem with changing the key is that it re-runs the entering animations for all the child components 😦

PS: I realize that @emzet93 seems to have managed to apply the workaround without the children’s animations launching. Out of curiosity, how did you do it?

FlatList is also affected. Related issue: #4450, the itemLayoutAnimation part. Footage can be found here.

They are using the same thing under the hood. So it’s expected I guess.

Hey Same here, there’s enough reproductions above so i will skip that - layout breaks on stack navigation screen change and going back, however tried to re-render on focus hack but no that didn’t work.

did the animation work for android? I can not animate anything with FlatList Android

Yes, in my case everything works as expected in Android