Layout Animation breaks after navigate

[nicolascavallin]

Description

We are using @react-navigation/stack, and we are animating our UI search bar with the <Animation.View entering={FadeIn} exiting={FadeOut} .../> and everything insides <Animation.View layout={Layout} .../>

The UI animation works right in Android and in iOS. But, only in iOS, after do a navigate, and then going back, seems like something is break and the Layout animation doesn't work.

We tried with detachPreviousScreen to be sure that the screen is not unmounted but the bug still appears.

https://github.com/software-mansion/react-native-reanimated/assets/22961489/eb873bc4-6e5c-46e1-9315-2d0c7b00e8cd

Steps to reproduce

1. Create a Layout Animation in Screen 1
2. Navigate to Screen 2
3. Go back to Screen 1.

Snack or a link to a repository

https://github.com/nicolascavallin/reanimated-bug

Thanks to @dayze for the repro

Reanimated version

3.1.0

React Native version

0.71.8

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Release mode

Device

None

Device model

No response

Acknowledgements

Yes

[emzet93]

I can confirm, exactly the same thing happens for me on iOS. It also happens when using native-stack. However, it works ok if screen looses focus because of tab navigation change.

As a workaround I'm changing the key on wrapping container based on isFocused variable, to trigger remounting all animated components inside. It works, but it requires bunch of hacks to prevent layout animations run on those elements because of this key change.

[fukemy]

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

[nicolascavallin]

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

Yes, in my case everything works as expected in Android

[dayze]

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

[s-t-sa]

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.

[dayze]

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.

To make the hack works you need to change the key props on the Animated.View component

[s-t-sa]

alias not in my case, forcing a render on the layout views based the focus prop does nothing in my components that have this issue. Enter/Exit animations seem to still work just the layout is naffed. Thanks

[matinzd]

Same issue here only on iOS:

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

[Ecleziaste]

Same here. Changing key doesn't help

[a-vikor]

FlatList is also affected. Related issue: https://github.com/software-mansion/react-native-reanimated/issues/4450, the itemLayoutAnimation part. Footage can be found here from 0:45.

[matinzd]

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.

[HadiModarres]

Same issue

@react-navigation/native-stack: 6.9.13 @react-navigation/native: 6.1.7 react-native-reanimated: 3.3.0

[nicolascavallin]

Is not solved yet:

"react-native": "^0.72.1",
"react-native-reanimated": "^3.4.1",
"react-native-screens": "^3.23.0"

https://github.com/software-mansion/react-native-reanimated/assets/22961489/1f3a9755-a32b-426d-86c2-e9093b9c969c

[Thanaen]

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?

[Thanaen]

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.

[LucasHimelfarb]

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>
)

[Thanaen]

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

[nicolascavallin]

🙌🏼 🙌🏼 🙌🏼

Thanks @Latropos @piaskowyk for the #4997

[matinzd]

I wish you could include this in 3.5.4.

[cristiangu]

MVP!

[nicolascavallin]

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

[nicolascavallin]

@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

[batuhansahan]

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

[nicolascavallin]

Hey @batuhansahan are you sure that with the native-stack? Because it was solved here https://github.com/software-mansion/react-native-reanimated/pull/4997.

I reopened the issue because I'm having trouble with the stack by react-navigation (not the native one)

[AndrewTkachuk42]

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.

[davidjbng]

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

[Karthik-B-06]

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.

[sguidotti]

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.

[bartlomiejbloniarz]

The issue was fixed in #5495

[sguidotti]

What version can we expect this to be deployed with ? Thank you for fixing btw. Love the layout animations and was bummed this issue was making them less usable :)