When I want to go to the previous page, everything suddenly disappears

[ugurdalkiran]

Description

I'm opening a new page on Android and everything is fine. When I want to come back from that opened page, all Views and Texts disappear from the screen. A white screen appears. Then my back page opens.

At this stage, I want the objects on my screen not to disappear.

In my opinion such a problem occurs when FABRIC is enabled. If fabric is not enabled, everything continues as normal. Could it be that the react-navigation package's fabric support is not working properly?

Here is the video.

ezgif-1-be282d7b39.mp4

"react": "18.2.0",
"react-native": "0.71.0",
---
"@react-navigation/native": "6.1.2",
"@react-navigation/native-stack": "6.9.8",
"react-native-gesture-handler": "2.9.0",
"react-native-safe-area-context": "4.4.1"
"react-native-screens": "3.18.2"

<GestureHandlerRootView style={{ flex: 1 }}>
	<NavigationContainer>
		<Stack.Navigator
		screenOptions={{
			headerMode: "screen"
		}}
		initialRouteName="Home">
		<Stack.Screen name="Home" component={Home} />
		<Stack.Screen
			name="Page"
			component={Page}
			options={{ animation: "slide_from_right" }}
		/>
		</Stack.Navigator>
	</NavigationContainer>
</GestureHandlerRootView>

props.navigation.navigate("Page");
props.navigation.goBack();

Steps to reproduce

1. I go to a page.
2. I click the back button.
3. Everything disappears. A white page appears instantly and the previous page opens.

Snack or a link to a repository

https://stackoverflow.com/help/mcve

Screens version

3.18.2

React Native version

0.71.0

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

Android emulator

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?

[ugurdalkiran]

@kkafar

I have now installed the updated version (3.19.0) and checked again but the problem persists. 😥

Probably the problem is not related to the react-native-screens package. Can we say that the problem is caused by the react-navigation package?

[kkafar]

Hi @ugurdalkiran!

Probably the problem is not related to the react-native-screens package. Can we say that the problem is caused by the react-navigation package?

No, the problem definitely lies in react-native-screens, moreover we are aware that this problem exists. It is caused by change of order in which views are unmounted on new architecture, that is leafs to root (bottom - top) ==> child views are unmounted before the transition begins. On Paper it was not the case, because the order was opposite - root to leafs (top - bottom).

We still need to find a proper solution to this problem.

[ugurdalkiran]

I am glad that you are aware of the problem and that you are looking for a solution.

I hope it will be resolved as soon as possible, thanks for your efforts. ❤️

[nandorojo]

Similar problem happening on iOS, without Fabric enabled.

The screen goes blank and just like flies out of place instead of animating out.

Before (correct)

Here is screens version 3.11.1:

RPReplay_Final1674498235.mov

After

Here is 3.18.2.

Notice it looks weird when going back. If I swipe back, it works fine. The issue only happens if I call goBack()/use the back button.

RPReplay_Final1674498490.mov

Any idea which version this started with? Would be useful to downgrade to avoid it happening. Thank you!

[miladdev85]

It seems to be the same issue as this: #1532
Although the one I linked to is Reanimated 2

[dppo]

Similar problem happening on android with fabric enabled
"@react-navigation/native": "^6.1.6", "@react-navigation/native-stack": "^6.9.12", "react": "18.2.0", "react-native": "0.71.7", "react-native-safe-area-context": "^4.5.2", "react-native-screens": "^3.20.0"

[RyuWoong]

same issue here +1

platform ios
library version all lastest

enable fabric and using some navigation method (reset , replace)

any solution?

[TwistedMinda]

Might be related to #1661

[Obhenimen]

Hi @ugurdalkiran!

Probably the problem is not related to the react-native-screens package. Can we say that the problem is caused by the react-navigation package?

No, the problem definitely lies in react-native-screens, moreover we are aware that this problem exists. It is caused by change of order in which views are unmounted on new architecture, that is leafs to root (bottom - top) ==> child views are unmounted before the transition begins. On Paper it was not the case, because the order was opposite - root to leafs (top - bottom).

We still need to find a proper solution to this problem.

Please is there a quick fix or any hack to get around this behaviour. Thanks for your reply

[tboba]

Hi everyone! I know that this problem is unfortunately still relevant and I want to really say sorry that some of you may experience it. From our side we're still waiting to merge @WoLewicki PR to official React Native repo about adding listeners for screen mount operations so we could perform proper logic when the screen will unmount on Android. With those listeners it will be possible to fix this issue, but for now we only have to wait 😓

[kirillzyusko]

Hey @tboba @WoLewicki @kkafar

I think react-native team hasn't accepted this PR (unfortunately 😔). Are you planning to create any fixes for that (maybe you have some other ideas on how to fix it)?

As I can understand the problem now is that views are getting actually removed from the screen before root Screen component receives the same event, right (i. e. when Screen component get this event - at this point of time all childs already removed)?

[tboba]

Hi @kirillzyusko! Yeah, we know this PR has been rejected, sadly 😢 AFAIK, currently @kkafar is working on possible fix for that bug, do you know Kacper what's the current state of it?
About the second thing - yes, that's exactly why all of the elements are gone on going backwards.

[kirillzyusko]

@tboba Cool, glad to hear that progress is moving 😎

I just thought to suggest that potentially we can pospone unmounting a component in JS (I guess it's managed by react-navigation). Just potentially instead of excluding a component from JS tree we can assign a new prop (like removing=true/false) and actually remove a component only when transition has completed.

But I'll be glad to hear how you managed to overcome this problem 💪 👀

[WoLewicki]

Hey all, could you check #2134 fixes this problem and does not introduce any new ones?

[kirillzyusko]

@WoLewicki I can check only next week (currently on a short vacation and don't have an access to my laptop) 👀