React-native-screens: 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]

https://github.com/software-mansion/react-native-screens/issues/556#issuecomment-654283994
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: https://github.com/software-mansion/react-native-screens/issues/556#issuecomment-656044339? 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]

https://github.com/software-mansion/react-native-screens/issues/556#issuecomment-656044339 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().

https://user-images.githubusercontent.com/13892132/105480810-f9b8ac00-5c84-11eb-92c6-6b4e1462daa1.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.