Native Stack, React-nativation 5, white screen when navigating back

[sa8ab]

When navigating forward and back using back button in the header, sometimes ( like after 3, 4 ) times of navigating the first screen becomes white ( as it appears ).

Happens on Android not tested on IOS

how to reproduce

create a native stack navigator using react navigation and move forward and back by pressing the back button in the header.

[WoLewicki]

I cannot repro this. Can you provide a repo where this happens?

[sa8ab]

@WoLewicki here is the repo. I made it for Reanimated but I noticed this one as well, so don't mind the name.

https://github.com/sa8ab/reproducing-reanimated-issue

[beqramo]

I face same issue on "react-navigation": "^4.4.0" . it is a real one, it only occours when enableScreens() is called

@WoLewicki

[WoLewicki]

Yes, I have managed to reproduce it.

[WoLewicki]

@beqramo did you manage to make this bug appear every time, not randomly? It would be very helpful for debugging.

[beqramo]

@WoLewicki I have no clue when it happens sorry

[WoLewicki]

I am getting such an Error in Logcat of Android Studio when this bug happens:

Can someone spot the same thing? Looks like it is the source of the problem.

[sa8ab]

@WoLewicki It happens sometimes on navigating back for the second time, sometimes takes longer, as if you notice the screen recording it happened after 20 seconds or so.

[WoLewicki]

#556 (comment)
I debugged it more and this Error is not connected strictly to the bug. It just appears when you click on an empty View.

[WoLewicki]

Can you try and change https://github.com/software-mansion/react-native-screens/blob/master/android/src/main/java/com/swmansion/rnscreens/ScreenContainer.java#L189 to mCurrentTransaction.commitNowAllowingStateLoss(); and see if there are any regressions and if the bug does disappear? Also, could you provide a repo for the #309 since I cannot repro it in release build?

[sa8ab]

I changed the following line from node_modules and rebuilt the project as the result the bug seemed to be disappeared ( I couldn't face the white screen on navigating multiple times for 20 seconds or so ). plus the transition had changed a bit as well. here is the screen recording.

Should I test in release build as well? @WoLewicki

[WoLewicki]

I would be grateful if you could.

[chismadalina]

It happens for me as well with React Navigation 5 and screens enabled.

[WoLewicki]

@chismadalina does it happen after applying this: #556 (comment)? And are there any other issues after doing so?

[chismadalina]

@chismadalina does it happen after applying this: #556 (comment)? And are there any other issues after doing so?

@WoLewicki it does fix the issue when navigation back but then I have a white flicker when I enter the screen, only on some screens.

[WoLewicki]

Can you provide minimal code that shows the flickering after that change?

[chismadalina]

@WoLewicki I don't think the code of the screen will help as it happens in different screens

[sa8ab]

@chrisnojima does it happen only on the first screen?
I mean like you go from Screen1 to Screen2 and you see the white flicker, but when going from Screen2 to Screen3 there is no flicker.

[awinograd]

#556 (comment) fixed a similar bug for me that was showing only in release builds.

navigating from A -> push B -> goBack to A -> push B would sometimes cause B to show with opacity < 1.

[awinograd]

One of our testers reported a re-occurrence of this bug after the fix mentioned above. At least, the issue appears to be less common

[awinograd]

One more note from me and sorry for the noise. It looks like my issue wasn't related to react-native-screens at all, but rather LayoutAnimation on android

[ahmed5605]

Can someone let me know what worked for them?

[WoLewicki]

@ahmed5605 you can try and change the line to mCurrentTransaction.commitNowAllowingStateLoss(); here: https://github.com/software-mansion/react-native-screens/blob/master/android/src/main/java/com/swmansion/rnscreens/ScreenContainer.java#L219

[gazedash]

Native Stack, React-nativation 5, white screen when navigating back

in fact, in my case, it crashes with fatal exception about react-native-screens, but looks like a freeze with white background, exactly as described

[WoLewicki]

@gazedash can you provide a reproduction of this? It would help with debugging.

[ZeiRashed]

Still seeing repros of this issue. The line switch above didn't fix the issue for me - has anyone found a fix?

[iagormoraes]

The flickering is still happening with the components like fast-image and svg when we call goBack().

fast-image.mov

[darron1217]

In my case, map becomes empty when calling navigation.goBack().
But it's fine with touching back button on header.
(Edit)
It was map plugin's problem

[WoLewicki]

@darron1217 I think your problem is described in #773.

[darron1217]

@WoLewicki Sorry, it was map plugin's problem.
I appreciate for your help :)

[ZeiRashed]

@WoLewicki Do you happen to know if the issue with crashing/white screens when going back is being tracked?

[WoLewicki]

Unfortunately we didn't come up with a better solution than proposed yet, but we are open to suggestions.

[jslok]

This seems to have fixed the white screen issue on goBack but the navigation animation is different now. It's more like a partial swoop in from the left.

[WoLewicki]

Hopefully this issue should be solved by #1066 since the fragment transactions would be committed synchronously then. Could you check if it does not introduce any new problems? It certainly needs much testing and we would like to add it to the next release.