React-native-navigation: Blank screen after setStackRoot or push at intermittently on different screens

[tomsjansons]

First off, a fantastic library, thank you for all the work that these been put into it, much appreciated!

Issue Description

We've been experiencing the weirdest behaviour.
On some android devices in some (seemingly random) instances, a screen transition will result in a blank screen.
This can't be reliably repeated, some devices experience this almost always on a 'push' or 'setStackRoot', other devices only occasionally, but most devices are working perfectly.

This never seems to happen on high-end devices, two devices that can somewhat reliably repeat this problem we have access to are cheap and slow devices.

I've been adding debug log statements and repeating a list of actions over and over again that results in this problem manifesting itself, this can be repeated once in multiple attempts.

So all the above seems to point to some sort of race condition, but unfortunately, I'm not experienced enough with native packages to be able to properly debug and determine where this is coming from.

I also don't have access to any devices that are able to reproduce this problem reliably enough to do efficient debugging.

Steps to Reproduce / Code Snippets / Screenshots

The only things I'm able to provide at the moment are two logs of the same actions and same screen transitions resulting in correct behaviour and the same actions and transitions resulting in the blank screen. This list of actions include logging out, killing the app, opening it, logging in, waiting for the offline data cache sync, etc. No idea why these are the steps that sometimes result in the error, but going through the screen without these steps results in a problem once in maybe 50 transitions, with these steps it happens once in maybe 5-6 tries.

The odd thing is that it seems when the blank screen is encountered, the ReactNative code is being executed and the components are rendered. Line ReactNativeJS: { CustomHeader: 'Home' } is coming from a React component that renders on each screen

Rest of the logs are coming from the RNN native code logging that I've added in the following places:
StackController:

ViewController:

Correct behavior logs:

04-01 00:28:01.171 16137 16137 D ReactNativeNavigation: StackController.setRoot com.reactnativenavigation.utils.NativeCommandListener@e10fae7
04-01 00:28:01.171 16137 16137 D ReactNativeNavigation: StackController.setRoot before push
04-01 00:28:01.171 16137 16137 D ReactNativeNavigation: StackController.setRoot after push
04-01 00:28:01.173 16137 16137 D ReactNativeNavigation: StackController.addChildToStack child: com.reactnativenavigation.viewcontrollers.ComponentViewController@f576694
04-01 00:28:01.180 16137 16137 D ReactNative: ReactInstanceManager.createReactContextInBackground()
04-01 00:28:01.180 16137 16137 D ReactNative: ReactInstanceManager.attachRootViewToInstance()
04-01 00:28:01.183 16137 16137 D ReactNativeNavigation: StackController.addChildToStack end
04-01 00:28:01.211 16137 16137 D ReactNativeNavigation: ViewController.onGlobalLayout
04-01 00:28:01.211 16137 16137 D ReactNativeNavigation: ViewController.isRendered: true
04-01 00:28:01.211 16137 16137 D ReactNativeNavigation: ViewController.onGlobalLayout
04-01 00:28:01.211 16137 16137 D ReactNativeNavigation: ViewController.isRendered: true
04-01 00:28:01.211 16137 16137 D ReactNativeNavigation: ViewController.onGlobalLayout
04-01 00:28:01.211 16137 16137 D ReactNativeNavigation: ViewController.isRendered: true
04-01 00:28:01.215 16137 16137 D ReactNativeNavigation: ViewController.onGlobalLayout
04-01 00:28:01.215 16137 16137 D ReactNativeNavigation: ViewController.onAttachToParent
04-01 00:28:01.215 16137 16137 D ReactNativeNavigation: ViewController.isRendered: true
04-01 00:28:01.215 16137 16137 D ReactNativeNavigation: ViewController.onViewAppeared
04-01 00:28:01.233 16137 16137 D ReactNativeNavigation: EventEmitter.emit RNN.ComponentDidAppear
04-01 00:28:01.325 16137 16188 I ReactNativeJS: Running "navigation.adapxis.YourAppsScreen" with {"initialProps":{"componentId":"Component4"},"rootTag":11}
04-01 00:28:01.495 16137 16188 I ReactNativeJS: { CustomHeader: 'Home' }
04-01 00:28:01.521 16137 16137 D ReactNativeNavigation: EventEmitter.emit RNN.ComponentDidDisappear
04-01 00:28:01.522 16137 16137 D ReactNativeNavigation: ViewController.onViewDisappear
04-01 00:28:01.523 16137 16137 D ReactNative: ReactInstanceManager.detachViewFromInstance()
04-01 00:28:01.526 16137 16137 D ReactNativeNavigation: EventEmitter.emit RNN.CommandCompleted
04-01 00:28:01.534 16137 16137 D ReactNativeNavigation: ViewController.onGlobalLayout
04-01 00:28:01.535 16137 16137 D ReactNativeNavigation: ViewController.isRendered: true
04-01 00:28:01.535 16137 16137 D ReactNativeNavigation: ViewController.onGlobalLayout
04-01 00:28:01.535 16137 16137 D ReactNativeNavigation: ViewController.isRendered: true
04-01 00:28:01.535 16137 16137 D ReactNativeNavigation: ViewController.onGlobalLayout
04-01 00:28:01.535 16137 16137 D ReactNativeNavigation: ViewController.isRendered: true
04-01 00:28:01.742 16137 16188 I ReactNativeJS: { YourAppsScreen: [ 'arguments', 'caller', 'length', 'prototype', 'name' ],
04-01 00:28:01.742 16137 16188 I ReactNativeJS:   YourAppsScreenPrototype: [ 'constructor' ] }
04-01 00:28:01.811 16137 16137 D ReactNativeNavigation: ViewController.onGlobalLayout
04-01 00:28:01.811 16137 16137 D ReactNativeNavigation: ViewController.isRendered: true
04-01 00:28:01.811 16137 16137 D ReactNativeNavigation: ViewController.onGlobalLayout
04-01 00:28:01.812 16137 16137 D ReactNativeNavigation: ViewController.isRendered: true
04-01 00:28:01.812 16137 16137 D ReactNativeNavigation: ViewController.onGlobalLayout
04-01 00:28:01.812 16137 16137 D ReactNativeNavigation: ViewController.isRendered: true
04-01 00:28:01.861 16137 16137 D ReactNativeNavigation: ViewController.onGlobalLayout
04-01 00:28:01.861 16137 16137 D ReactNativeNavigation: ViewController.isRendered: true
04-01 00:28:01.862 16137 16137 D ReactNativeNavigation: ViewController.onGlobalLayout
04-01 00:28:01.862 16137 16137 D ReactNativeNavigation: ViewController.isRendered: true
04-01 00:28:01.862 16137 16137 D ReactNativeNavigation: ViewController.onGlobalLayout
04-01 00:28:01.862 16137 16137 D ReactNativeNavigation: ViewController.isRendered: true
04-01 00:28:07.833 16137 16188 I ReactNativeJS: localCacheSync done

The same actions resulting in a blank screen:

04-01 00:31:15.844 16292 16292 D ReactNativeNavigation: StackController.setRoot com.reactnativenavigation.utils.NativeCommandListener@3592246
04-01 00:31:15.845 16292 16292 D ReactNativeNavigation: StackController.setRoot before push
04-01 00:31:15.845 16292 16292 D ReactNativeNavigation: StackController.setRoot after push
04-01 00:31:15.848 16292 16292 D ReactNativeNavigation: StackController.addChildToStack child: com.reactnativenavigation.viewcontrollers.ComponentViewController@d891c07
04-01 00:31:15.856 16292 16292 D ReactNative: ReactInstanceManager.createReactContextInBackground()
04-01 00:31:15.856 16292 16292 D ReactNative: ReactInstanceManager.attachRootViewToInstance()
04-01 00:31:15.860 16292 16292 D ReactNativeNavigation: StackController.addChildToStack end
04-01 00:31:16.008 16292 16339 I ReactNativeJS: Running "navigation.adapxis.YourAppsScreen" with {"initialProps":{"componentId":"Component4"},"rootTag":11}
04-01 00:31:16.148 16292 16339 I ReactNativeJS: { CustomHeader: 'Home' }
04-01 00:31:16.179 16292 16292 D ReactNativeNavigation: EventEmitter.emit RNN.ComponentDidDisappear
04-01 00:31:16.183 16292 16292 D ReactNativeNavigation: ViewController.onViewDisappear
04-01 00:31:16.186 16292 16292 D ReactNative: ReactInstanceManager.detachViewFromInstance()
04-01 00:31:16.196 16292 16292 D ReactNativeNavigation: EventEmitter.emit RNN.CommandCompleted
04-01 00:31:16.388 16292 16339 I ReactNativeJS: { YourAppsScreen: [ 'arguments', 'caller', 'length', 'prototype', 'name' ],
04-01 00:31:16.388 16292 16339 I ReactNativeJS:   YourAppsScreenPrototype: [ 'constructor' ] }
04-01 00:31:16.434 16292 16292 D ReactNativeNavigation: ViewController.onGlobalLayout
04-01 00:31:16.434 16292 16292 D ReactNativeNavigation: ViewController.isRendered: true
04-01 00:31:16.435 16292 16292 D ReactNativeNavigation: ViewController.onGlobalLayout
04-01 00:31:16.435 16292 16292 D ReactNativeNavigation: ViewController.isRendered: true
04-01 00:31:16.435 16292 16292 D ReactNativeNavigation: ViewController.onGlobalLayout
04-01 00:31:16.435 16292 16292 D ReactNativeNavigation: ViewController.onAttachToParent
04-01 00:31:16.435 16292 16292 D ReactNativeNavigation: ViewController.isRendered: true
04-01 00:31:16.435 16292 16292 D ReactNativeNavigation: ViewController.onViewAppeared
04-01 00:31:16.456 16292 16292 D ReactNativeNavigation: EventEmitter.emit RNN.ComponentDidAppear
04-01 00:31:22.385 16292 16339 I ReactNativeJS: localCacheSync done

The big differences I can see that calls to onGlobalLayout and isRendered are missing between StackController.addChildToStack end and Running "navigation.adapxis.YourAppsScreen", also calls to onAttachToParent, onViewAppeared and EventEmitter.emit RNN.ComponentDidAppear are seen much later in the execution in the blank screen.

I realise this isn't much to go on, but any help would be appreciated - how to set up a good test example, debugging suggestions, places to add more logging to, etc.

---

Environment

• React Native Navigation version: 6.4.0
• React Native version: 0.61.5
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Devices LG-K9, MyPhone FUN 18x9 Dual (Android 7), Release and Debug

[RomualdPercereau]

This isn't related to https://github.com/wix/react-native-navigation/issues/6000 ?

And did you tried :

Navigation.setDefaultOptions({
  animations: {
      setRoot: {
        waitForRender: true
      },
      showModal: {
        waitForRender: true
      },
      push: {
        waitForRender: true
      }
    },

[tomsjansons]

hi @RomualdPercereau thanks for the suggestion. But unfortunately, this didn't help, I was able to reproduce the blank screen.

But now I've seen another weird behaviour - on one of my reproduction attempts, the screen seemed to do the animation, I got logs for the new screen, but the old screen was still showing.

It does, however, seem to take more tries to replicate the bug with waitForRender: true but that's probably not useful info as I've not been keeping track of the average number of attempts required to replicate the bug. So hard to say it if just feels like taking more attempts or actually taking more attempts.

[VKabz]

I faced the same problem

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[ravindranpandu]

@RomualdPercereau your snippet saved my day, thanks

[ddcrobert]

I think I have a similar issue like the one @tomsjansons described in its comment.

The following actions are being done within a bottom tab, might help.
First, I can push a screen onto another, close it, push it again, no issue.

However, if I happen to display a Modal (legacy code using RN's Modal, therefore displaying means setting visibile flag to true) and close it (same visible flag to false), then I can't push a screen onto another as I did before (both with RNN).
The logs will be telling me it has been pushed and mount. But I can't see it like John Cena.

If I switch waitForRender to false, I'll see a blank screen. If I switch it back to true, I won't see anything.

I don't know exactly since when I have the issue, I only know I didn't have such issues around v3.

Edit :
Removed RN's Modal and StatusBar usages, replaced with showModal and the issue seems to be gone.

Version: 6.7.2
Devices having the issue: LG G5, Honor 5C
Devices not having or having less the issue (not 100% sure it doesn't): Xiaomi A2