Layout Animation breaks after navigate #4516

nicolascavallin · 2023-06-01T05:53:38Z

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.

274343957-b7472bc9-9297-4335-9d81-c996112f16fb.mov

Steps to reproduce

Create a Layout Animation in Screen 1
Navigate to Screen 2
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

The text was updated successfully, but these errors were encountered:

emzet93 · 2023-06-01T14:04:29Z

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 · 2023-06-05T02:27:08Z

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

nicolascavallin · 2023-06-06T07:25:09Z

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 · 2023-07-03T09:32:48Z

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 :

Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-07-03.at.11.28.46.mp4

s-t-sa · 2023-07-04T19:14:09Z

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 · 2023-07-05T06:01:40Z

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 · 2023-07-05T11:30:58Z

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 · 2023-07-10T19:33:56Z

Same issue here only on iOS:

bf6d3afd-b08a-4715-a263-89de0f4c6c17.mp4

Ecleziaste · 2023-07-13T07:12:54Z

Same here. Changing key doesn't help

a-vikor · 2023-07-14T15:38:20Z

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

matinzd · 2023-07-14T15:39:22Z

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 · 2023-07-24T23:17:12Z

Same issue

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

nicolascavallin · 2023-07-28T08:55:48Z

Is not solved yet:

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

Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-07-28.at.10.54.08.mp4

Thanaen · 2023-08-02T13:19:05Z

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 · 2023-08-10T08:28:46Z

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 · 2023-09-05T14:02:07Z

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

## Summary Closes #4816 Closes #4516 Fixing issue with react navigation. If given view is inside some view controller and it has layout animation don't remove its animations from subtree <table> <tr><td>BEFORE</td><td>AFTER</td></tr> <tr><td> https://github.com/software-mansion/react-native-reanimated/assets/56199675/e1581853-f2ba-4b55-a07a-977ca4a84808 </td><td> https://github.com/software-mansion/react-native-reanimated/assets/56199675/c366c6ff-1dc7-4b70-b9ed-33582f49da4d </td></tr> </table>  ## Test plan Code: <details> ```js import {NavigationContainer, useNavigation} from '@react-navigation/native'; import {createNativeStackNavigator} from '@react-navigation/native-stack'; import React from 'react'; import {Pressable, Text, View} from 'react-native'; import Animated, {Layout} from 'react-native-reanimated'; const Stack = createNativeStackNavigator(); const Screen1 = () => { const [isOpen, setIsOpen] = React.useState(false); const navigation = useNavigation(); return ( <> <Animated.View style={{backgroundColor: 'red'}} layout={Layout.duration(1000)}> <Pressable onPress={() => setIsOpen(!isOpen)}> <Text>Open</Text> </Pressable> {isOpen && <View style={{width: 300, height: 400}} />} </Animated.View> <Text onPress={() => navigation.navigate('Screen2')}>nav</Text> </> ); }; const Screen2 = () => { const [isOpen, setIsOpen] = React.useState(false); const navigation = useNavigation(); return ( <> <Animated.View style={{backgroundColor: 'red'}} layout={Layout.duration(1000)}> <Pressable onPress={() => setIsOpen(!isOpen)}> <Text>Open</Text> </Pressable> {isOpen && <View style={{width: 300, height: 400}} />} </Animated.View> </> ); }; const App = (props: Props) => { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Screen1" component={Screen1} /> <Stack.Screen name="Screen2" component={Screen2} /> </Stack.Navigator> </NavigationContainer> ); }; export default App; ``` </details>  --------- Co-authored-by: Aleksandra Cynk <aleksandra.cynk@swmansion.com> Co-authored-by: Krzysztof Piaskowy <krzysztof.piaskowy@swmansion.com>

Thanaen · 2023-09-21T19:28:57Z

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

nicolascavallin · 2023-09-22T06:55:57Z

🙌🏼 🙌🏼 🙌🏼

Thanks @Latropos @piaskowyk for the #4997

matinzd · 2023-09-22T06:58:33Z

I wish you could include this in 3.5.4.

cristiangu · 2023-09-22T15:23:25Z

MVP!

nicolascavallin · 2023-10-09T16:47:05Z

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 · 2023-10-11T16:02:16Z

@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.

Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-10-11.at.17.53.02.mov

batuhansahan · 2023-11-30T09:49:06Z

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

nicolascavallin · 2023-12-01T09:50:48Z

Hey @batuhansahan are you sure that with the native-stack? Because it was solved here #4997.

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

AndrewTkachuk42 · 2023-12-05T14:45:20Z

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 · 2023-12-06T13:59:40Z

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

Simulator.Screen.Recording.-.iPhone.15.-.2023-12-06.at.14.58.14.mp4

Karthik-B-06 · 2024-01-30T08:19:58Z

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 · 2024-02-10T03:56:12Z

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 · 2024-03-25T17:02:10Z

The issue was fixed in #5495

sguidotti · 2024-03-25T21:31:56Z

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

bartlomiejbloniarz · 2024-03-26T13:37:10Z

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

iamjoshua · 2024-04-04T17:10:09Z

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.

sguidotti · 2024-04-05T19:09:59Z

For me on "react-native-reanimated": "^3.9.0-rc.0" navigating between different stacks works. The stack i am navigating to exists outside of the tab navigation stack. All are native stacks as well.

nicolascavallin added the Needs review Issue is ready to be reviewed by a maintainer label Jun 1, 2023

github-actions bot added Missing repro This issue need minimum repro scenario Platform: iOS This issue is specific to iOS labels Jun 1, 2023

github-actions bot added Repro provided A reproduction with a snippet of code, snack or repo is provided and removed Missing repro This issue need minimum repro scenario labels Jul 5, 2023

terrysahaidak mentioned this issue Jul 14, 2023

[Shared Element Transition] Progress animation v2 #4421

Merged

passengerV mentioned this issue Jul 25, 2023

SlideInDown not respecting height boundaries and FlatList itemLayoutAnimation interference with navigation #4450

Closed

Latropos mentioned this issue Aug 28, 2023

Fix cleaning layout animation config on iOS #4997

Merged

piaskowyk closed this as completed in #4997 Sep 21, 2023

Latropos reopened this Oct 11, 2023

Latropos added Important This seem to be a serious issue and we will need to take a deeper look into it some time soon and removed Needs review Issue is ready to be reviewed by a maintainer labels Oct 11, 2023

bartlomiejbloniarz closed this as completed Mar 25, 2024

gaearon mentioned this issue Apr 29, 2024

Remove layout animation from search bluesky-social/social-app#3751

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Layout Animation breaks after navigate #4516

Layout Animation breaks after navigate #4516

nicolascavallin commented Jun 1, 2023 •

edited

Loading

emzet93 commented Jun 1, 2023 •

edited

Loading

fukemy commented Jun 5, 2023

nicolascavallin commented Jun 6, 2023

dayze commented Jul 3, 2023 •

edited

Loading

s-t-sa commented Jul 4, 2023

dayze commented Jul 5, 2023

s-t-sa commented Jul 5, 2023

matinzd commented Jul 10, 2023

Ecleziaste commented Jul 13, 2023

a-vikor commented Jul 14, 2023 •

edited

Loading

matinzd commented Jul 14, 2023

HadiModarres commented Jul 24, 2023

nicolascavallin commented Jul 28, 2023

Thanaen commented Aug 2, 2023 •

edited

Loading

Thanaen commented Aug 10, 2023

LucasHimelfarb commented Sep 5, 2023

Thanaen commented Sep 21, 2023

nicolascavallin commented Sep 22, 2023

matinzd commented Sep 22, 2023

cristiangu commented Sep 22, 2023

nicolascavallin commented Oct 9, 2023 •

edited

Loading

nicolascavallin commented Oct 11, 2023 •

edited

Loading

batuhansahan commented Nov 30, 2023 •

edited

Loading

nicolascavallin commented Dec 1, 2023

AndrewTkachuk42 commented Dec 5, 2023 •

edited

Loading

davidjbng commented Dec 6, 2023

Karthik-B-06 commented Jan 30, 2024 •

edited

Loading

sguidotti commented Feb 10, 2024 •

edited

Loading

bartlomiejbloniarz commented Mar 25, 2024

sguidotti commented Mar 25, 2024 •

edited

Loading

bartlomiejbloniarz commented Mar 26, 2024

iamjoshua commented Apr 4, 2024 •

edited

Loading

sguidotti commented Apr 5, 2024

Layout Animation breaks after navigate #4516

Layout Animation breaks after navigate #4516

Comments

nicolascavallin commented Jun 1, 2023 • edited Loading

Description

Steps to reproduce

Snack or a link to a repository

Reanimated version

React Native version

Platforms

JavaScript runtime

Workflow

Architecture

Build type

Device

Device model

Acknowledgements

emzet93 commented Jun 1, 2023 • edited Loading

fukemy commented Jun 5, 2023

nicolascavallin commented Jun 6, 2023

dayze commented Jul 3, 2023 • edited Loading

s-t-sa commented Jul 4, 2023

dayze commented Jul 5, 2023

s-t-sa commented Jul 5, 2023

matinzd commented Jul 10, 2023

Ecleziaste commented Jul 13, 2023

a-vikor commented Jul 14, 2023 • edited Loading

matinzd commented Jul 14, 2023

HadiModarres commented Jul 24, 2023

nicolascavallin commented Jul 28, 2023

Thanaen commented Aug 2, 2023 • edited Loading

Thanaen commented Aug 10, 2023

LucasHimelfarb commented Sep 5, 2023

Thanaen commented Sep 21, 2023

nicolascavallin commented Sep 22, 2023

matinzd commented Sep 22, 2023

cristiangu commented Sep 22, 2023

nicolascavallin commented Oct 9, 2023 • edited Loading

nicolascavallin commented Oct 11, 2023 • edited Loading

batuhansahan commented Nov 30, 2023 • edited Loading

nicolascavallin commented Dec 1, 2023

AndrewTkachuk42 commented Dec 5, 2023 • edited Loading

davidjbng commented Dec 6, 2023

Karthik-B-06 commented Jan 30, 2024 • edited Loading

sguidotti commented Feb 10, 2024 • edited Loading

bartlomiejbloniarz commented Mar 25, 2024

sguidotti commented Mar 25, 2024 • edited Loading

bartlomiejbloniarz commented Mar 26, 2024

iamjoshua commented Apr 4, 2024 • edited Loading

sguidotti commented Apr 5, 2024

nicolascavallin commented Jun 1, 2023 •

edited

Loading

emzet93 commented Jun 1, 2023 •

edited

Loading

dayze commented Jul 3, 2023 •

edited

Loading

a-vikor commented Jul 14, 2023 •

edited

Loading

Thanaen commented Aug 2, 2023 •

edited

Loading

nicolascavallin commented Oct 9, 2023 •

edited

Loading

nicolascavallin commented Oct 11, 2023 •

edited

Loading

batuhansahan commented Nov 30, 2023 •

edited

Loading

AndrewTkachuk42 commented Dec 5, 2023 •

edited

Loading

Karthik-B-06 commented Jan 30, 2024 •

edited

Loading

sguidotti commented Feb 10, 2024 •

edited

Loading

sguidotti commented Mar 25, 2024 •

edited

Loading

iamjoshua commented Apr 4, 2024 •

edited

Loading