[2.3.0-beta.1] React-Navigation Back Button unmounts previous screen with Reanimated #2460

SultanTanirkul · 2021-09-27T13:45:48Z

Description

After updating reanimated to the latest version 2.3.0.-beta.1 from 2.2.2 the navigation between existing screens removes interactivity as well as some styles from the screen (presumably unmounts previous screen when back button is pressed). Simple example is navigating from screen 'A' to 'B' and going back causes this bug or issue. It is only seems to affect native stack navigator.

Everything is working just fine on version 2.2.2

Expected behavior

Navigation from one screen to another and then using back button shows the previous screen as it has been before navigating.

Actual behavior & steps to reproduce

Navigation from one screen to another and then using back button unmounts the previous screen.

Snack or minimal code example

https://github.com/SultanTanirkul/navigation-reanimated-bug

Package versions

React Native: 0.65.1
React Native Reanimated: 2.3.0-beta.1
@react-navigation/native: 6.0.4
@react-navigation/native-stack: 6.2.2
react-native-screens": 3.7.2

Affected platforms

Android
iOS
Web

github-actions · 2021-09-27T13:46:03Z

Issue validator

The issue is valid!

exneval · 2021-09-27T14:25:22Z

I'm also able to reproduce the issue in 2.3.0-beta.1 with @react-navigation/native-stack 6.2.2 and react-native-screens 3.7.2

mateusz1913 · 2021-09-27T15:56:08Z

I am also able to reproduce similar issue, you can check example repo https://github.com/mateusz1913/react-native-avoid-softinput/tree/master/example

Package versions

@react-navigation/native: "6.0.3",
@react-navigation/native-stack: "6.2.0",
react: "17.0.2",
react-native: "0.65.1",
react-native-reanimated: "^2.3.0-beta.1",
react-native-safe-area-context: "3.3.2",
react-native-screens: "3.7.2"

When screen is dismissed (via back button or hardware back press), it is pushed again on screen, which makes app not responding to any user's input.

here is gif of incorrect behavior

evgenusov · 2021-09-27T18:09:31Z

Same for me!

Ralisson-Mattias · 2021-09-29T15:40:34Z

Same problem here

nazrdogan · 2021-09-30T09:09:42Z

Same for me

Darapsas · 2021-09-30T14:17:59Z

Same here, with these package versions:

  "dependencies": {
    "@react-native-masked-view/masked-view": "0.2.6",
    "@react-navigation/bottom-tabs": "6.0.7",
    "@react-navigation/devtools": "6.0.2",
    "@react-navigation/native": "6.0.4",
    "@react-navigation/stack": "6.0.9",
    
    "react": "17.0.2",
    "react-native": "0.65.1",
    
    "react-native-gesture-handler": "1.10.3",
    "react-native-reanimated": "2.3.0-beta.1",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "3.8.0"
  }

The issue only appears in the release version (using hermes engine), the development version seems to work pretty well

tominou · 2021-10-03T04:01:36Z

Same issue here.
react-native 0.66.0
react-native-reanimated 2.3.0-beta.2

yaredtaye · 2021-10-04T09:51:24Z

I confirm Same issue .
react-native 0.66.0
react-native-reanimated 2.3.0-beta.2

When will the fix be available?

ruairioliverwv · 2021-10-04T11:05:00Z

This resolves it for me: #2477 (comment)

mlecoq · 2021-10-06T14:43:38Z

For information when I set a custom headerLeft :

options={({navigation}) => ({
          headerLeft: () => <Button title="back" onPress={navigation.goBack} />,
        })}

I have this error
The specified child already has a parent. You must call removeView() on the child's parent first

bilarslan · 2021-10-10T11:03:33Z

The same for me :(

"react": "17.0.2",
"react-native": "0.66.0",
"react-native-reanimated": "^2.3.0-beta.2",
"@react-navigation/native": "^6.0.4",
"@react-navigation/native-stack": "^6.2.2",

nazacity · 2021-10-10T16:05:03Z

same for me

cyim02 · 2021-10-12T07:33:49Z

same for me. needed RN 0.66 for preparing the support on iOS 15 and Android 12.

savv · 2021-10-12T09:55:01Z

I have the same error, and I can confirm that the AAR here fixes things for me.

@piaskowyk would it make sense to release 2.2.3, with an aar for rn .66?

hannojg · 2021-10-12T11:39:04Z

I have the same error, and I can confirm that the AAR here fixes things for me.

@piaskowyk would it make sense to release 2.2.3, with an aar for rn .66?

I mean, this fix works because it uses version < 2.3

We still need a fix for version 2.3 on android 😅

savv · 2021-10-12T11:47:33Z

I guess many people upgraded to 2.3.0-beta.x only because it supports RN 0.66.0. A new patch release that supports it would unblock all those many people.

hannojg · 2021-10-13T09:20:36Z

Just tested whether #2486 has fixed this issue as stated here, but unfortunately, it didn't.

savv · 2021-10-13T14:05:10Z

I prepared a version of 2.2.2 that is compatible with RN66 here: https://github.com/savv/react-native-reanimated/tree/2.2.6
I also compiled it and pushed it here

You can use it in your react native project like this:
"react-native-reanimated": "npm:react-native-reanimated-savv@2.2.6",

bilarslan · 2021-10-16T14:06:41Z

Just tested with v2.2.3 on android and the issue solved 🎉🎉🎉

albinekb · 2021-10-17T01:24:11Z

Thank you for your temporary version @savv! I have updated to 2.2.3 on Android now and the issue is solved 🎉

hannojg · 2021-10-18T08:40:08Z

Don't want a wrong impression to arise here: the issue is not solved. The issue is still existing for the beta version of 2.3.0.
Using 2.2.3 is obviously no option if you want to use the new features from 2.3.0 😄
(Haven't tested beta 3 yet, but as far as I can see, none of the PRs that are included in beta 3 have fixed this issue)

Darapsas · 2021-10-19T05:44:35Z

The issue seems to still persist on the latest package versions:

"react-native": "0.66.1",
"react-native-reanimated": "2.3.0-beta.3",

software-mansion/react-native-reanimated#2460

000xuandu · 2021-11-09T06:01:23Z

Same issue:

"react-native": "0.64.0",
"react-native-reanimated": "^2.3.0-beta.2",
"react-native-screens": "^3.8.0",

bilaltahseen · 2021-11-15T21:18:19Z

Same error for me , however running in emulator is fine but not working in real device , I am testing on Samsung Note 5

@piaskowyk

## Description Animations of disappearing for native stack elements are more complicated, so we decided to disable this type of animation at this moment. It's just a temporary solution. We will come back to this after a stable release. Fixes: #2460 #2501 Autors: @piaskowyk @WoLewicki ## Example code <details> <summary>example 1</summary> ```js import {NavigationContainer} from '@react-navigation/native'; import {createNativeStackNavigator} from '@react-navigation/native-stack'; import React from 'react'; import {Button, Text, View} from 'react-native'; const Stack = createNativeStackNavigator(); function HomeScreen({navigation}) { return ( <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}> <Text>Home Screen</Text> <Button title="navigate" onPress={() => navigation.navigate('Next')} /> </View> ); } const NextScreen = () => { return ( <View> <Text>Some Text</Text> <Button title="Navigate" /> </View> ); }; const App = () => { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Next" component={NextScreen} /> </Stack.Navigator> </NavigationContainer> ); }; export default App; ``` </details> <details> <summary>example 2</summary> ```js import React, { useState } from 'react'; import {Text, View, Button} from 'react-native'; import {NavigationContainer} from '@react-navigation/native'; import {createNativeStackNavigator} from '@react-navigation/native-stack'; import {ReanimatedScreenProvider} from 'react-native-screens/reanimated'; import {createStackNavigator} from '@react-navigation/stack'; const Stack = createStackNavigator(); let mleko = { isLogged: false } let rerender = null; const HomeScreen = () => { return ( <View style={{flex: 1}}> <View style={{flex: 1, padding: 60}}> <Text>Logged</Text> </View> </View> ); }; const LoginScreen = (props: any) => { return ( <View style={{flex: 1}}> <View style={{flex: 1, padding: 60}}> <Button onPress={() => { mleko.isLogged = true; rerender(Math.random()); console.log("mleko"); }} title="Login" /> </View> </View> ); } export const HomeNavigator = () => { return ( <Stack.Navigator screenOptions={{headerShown: false, gestureEnabled: true}}> <Stack.Screen name="Home" component={HomeScreen} /> </Stack.Navigator> ); }; export const LoginNavigator = () => { return ( <Stack.Navigator screenOptions={{ headerShown: false, gestureEnabled: true, }}> <Stack.Screen name="Login" component={LoginScreen} /> </Stack.Navigator> ); }; function RootNavigator() { const [a, setA] = useState(1); rerender = setA; return ( <Stack.Navigator screenOptions={{ headerShown: true, gestureEnabled: true, }}> {mleko.isLogged ? ( <Stack.Screen name="HomeNavigator" component={HomeNavigator} /> ) : ( <Stack.Screen name="LoginNavigator" component={LoginNavigator} /> )} </Stack.Navigator> ); }; const App = () => { return ( <ReanimatedScreenProvider> <NavigationContainer> <RootNavigator /> </NavigationContainer> </ReanimatedScreenProvider> ); }; export default App; ``` </details>

SultanTanirkul added 🏠 Reanimated 2 Bug labels Sep 27, 2021

Kesmek mentioned this issue Sep 27, 2021

ViewManager for tag xxxxxxxxxxx could not be found. react-native-admob-native-ads #2457

Closed

3 tasks

piaskowyk added Area: Layout Animations Library: Screens labels Sep 27, 2021

mateusz1913 mentioned this issue Sep 30, 2021

Back navigation is buggy with createNativeStackNavigator on Android software-mansion/react-native-screens#1160

Closed

Japjappedulap mentioned this issue Oct 5, 2021

Back navigation support in android with Reanimated 2 react-navigation/react-navigation#9999

Closed

11 tasks

mlecoq mentioned this issue Oct 7, 2021

The specified child already has a parent (when using with react-navigation) #2501

Closed

3 tasks

piaskowyk added the Important This seem to be a serious issue and we will need to take a deeper look into it some time soon label Oct 14, 2021

ldstein mentioned this issue Oct 19, 2021

Android: Screen transitions broken in Example App🐛 mrousavy/react-native-vision-camera#542

Closed

4 tasks

hannojg mentioned this issue Oct 21, 2021

"react-native-reanimated": "^2.3.0-beta.*" android navigation goBack() fall to whitescreen without error #2557

Closed

lionep mentioned this issue Oct 22, 2021

App freezes when we go back from the screen which uses this library meliorence/react-native-snap-carousel#874

Open

5 tasks

xmflsct added a commit to tooot-app/app that referenced this issue Oct 24, 2021

Temporarily fix reanimated

43d21ba

software-mansion/react-native-reanimated#2460

This was referenced Oct 29, 2021

[ios] Orphaned view remains after (react native's) modal dismissed #2538

Closed

Going back (navigation.goBack() or hardware button) completely freezing app react-navigation/react-navigation#10096

Closed

mrousavy mentioned this issue Nov 5, 2021

Pop animation skipped with custom header react-navigation/react-navigation#10078

Closed

11 tasks

piaskowyk self-assigned this Nov 9, 2021

piaskowyk mentioned this issue Nov 9, 2021

Disable disapearing animation for native stack #2617

Merged

piaskowyk closed this as completed in #2617 Nov 23, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[2.3.0-beta.1] React-Navigation Back Button unmounts previous screen with Reanimated #2460

[2.3.0-beta.1] React-Navigation Back Button unmounts previous screen with Reanimated #2460

SultanTanirkul commented Sep 27, 2021 •

edited

Loading

github-actions bot commented Sep 27, 2021

exneval commented Sep 27, 2021

mateusz1913 commented Sep 27, 2021

evgenusov commented Sep 27, 2021

Ralisson-Mattias commented Sep 29, 2021

nazrdogan commented Sep 30, 2021

Darapsas commented Sep 30, 2021 •

edited

Loading

tominou commented Oct 3, 2021 •

edited

Loading

yaredtaye commented Oct 4, 2021

ruairioliverwv commented Oct 4, 2021

mlecoq commented Oct 6, 2021 •

edited

Loading

bilarslan commented Oct 10, 2021

nazacity commented Oct 10, 2021

cyim02 commented Oct 12, 2021

savv commented Oct 12, 2021

hannojg commented Oct 12, 2021

savv commented Oct 12, 2021

hannojg commented Oct 13, 2021

savv commented Oct 13, 2021

bilarslan commented Oct 16, 2021

albinekb commented Oct 17, 2021

hannojg commented Oct 18, 2021

Darapsas commented Oct 19, 2021

000xuandu commented Nov 9, 2021 •

edited

Loading

bilaltahseen commented Nov 15, 2021

[2.3.0-beta.1] React-Navigation Back Button unmounts previous screen with Reanimated #2460

[2.3.0-beta.1] React-Navigation Back Button unmounts previous screen with Reanimated #2460

Comments

SultanTanirkul commented Sep 27, 2021 • edited Loading

Description

Expected behavior

Actual behavior & steps to reproduce

Snack or minimal code example

Package versions

Affected platforms

github-actions bot commented Sep 27, 2021

Issue validator

exneval commented Sep 27, 2021

mateusz1913 commented Sep 27, 2021

Package versions

evgenusov commented Sep 27, 2021

Ralisson-Mattias commented Sep 29, 2021

nazrdogan commented Sep 30, 2021

Darapsas commented Sep 30, 2021 • edited Loading

tominou commented Oct 3, 2021 • edited Loading

yaredtaye commented Oct 4, 2021

ruairioliverwv commented Oct 4, 2021

mlecoq commented Oct 6, 2021 • edited Loading

bilarslan commented Oct 10, 2021

nazacity commented Oct 10, 2021

cyim02 commented Oct 12, 2021

savv commented Oct 12, 2021

hannojg commented Oct 12, 2021

savv commented Oct 12, 2021

hannojg commented Oct 13, 2021

savv commented Oct 13, 2021

bilarslan commented Oct 16, 2021

albinekb commented Oct 17, 2021

hannojg commented Oct 18, 2021

Darapsas commented Oct 19, 2021

000xuandu commented Nov 9, 2021 • edited Loading

bilaltahseen commented Nov 15, 2021

SultanTanirkul commented Sep 27, 2021 •

edited

Loading

Darapsas commented Sep 30, 2021 •

edited

Loading

tominou commented Oct 3, 2021 •

edited

Loading

mlecoq commented Oct 6, 2021 •

edited

Loading

000xuandu commented Nov 9, 2021 •

edited

Loading