React-native-navigation: [V3][Android] Blank screen on push (RN 0.60.5)

[Stalder]

Issue Description

In my original project attempt to push next screen on Android leads to blank screen. When i tried to create another project from scratch to reproduce this issue I've collided with another, but similar issue. First time push works fine, but after first reload push leads to the white screen. After second reload there is just a white screen, first screen doesn't appear at all.

Steps to Reproduce / Code Snippets / Screenshots

sh git clone https://github.com/Stalder/rnn-android-issue.git cd rnn-android-issue yarn react-native start react-native run-android

Navigation will fire automatically. Then shake phone and reload. And then once again.

---

Environment

• React Native Navigation version: 3.1
• React Native version: 0.60.5
• Platform: Android
• Device info: Honor 8 lite, Android 8, debug mode

[caranico]

I encounter the same anomaly, with the same configuration.
This anomaly is not present on simulator, only on devices

[Stalder]

@caranico i've just tested both apps with Huawei Nova 3i, Android 9, and it worked nicely. Probably it depends on Android version. Which simulator did you use, internal in Android Studio, or Genymotion (or any other emulator with VM) ?

[tientruongvan1995]

I'm using LG V10, Android 7 and having the same issue.
React Native Navigation version: 3.1
React Native version: 0.60.5

• I downgraded to 3.0 but nothing changed, it works perfectly with iOS

[Stalder]

Another device with Android 8 (Xiaomi MI 5s) works fine. Seems like it depends not on the OS version

[Kabangi]

I had a similar issue.

In my case I was upgrading from V1 to V3. I had remnant code at MainActivity that was showing a splash screen

i.e this line of code.

@Override
   public void addDefaultSplashLayout() {
        R.layout.splash;
  }

I have commented it out and everything is working as expected.

[krom-xr]

I have similar issue.
Redmi Note 3 MIUI Global 10.2
Android 6.0.1
RN: 0.60.5
RNN: 3.0.0

In some situations when push i have white screen.
When i press hardware menu button. I see apps list. I select my app again and white screen disappear

[zheldRnaskan]

I have the same issue.
Samsung galaxy S6
android 7.0
RN: 0.60.5
RNN: 3.1.1

[arahmanali]

any update?

[DaveLomber]

Having same issue on some devices.
It works perfectly with Nexus, Samsung devices.
But some users reports they see a blank screen on push (sometimes) on devices like Oppo ,Vivo, ASUS, Xiaomi

Seems started happening after upgrade to RN60 and RNN 3.2, but not sure

Release mode

[markhomoki]

I had this issue and started debugging today. For me, updating the statusbar color on Android caused the issue. More specifically, switching between light and dark style causes the problem.

After I left the statusbar as default, all screens are working properly.

[DaniShalash]

Having the same issue as well.
In my case, I have multiple themes in my app, and whenever I change the theme, I call setDefaultOptions, and then every screen/modal pushed is blank.

Same as @krom-xr
Pressing back button until I exit the application, open it again from the apps list and everything works.

[cinder92]

@markhomoki you are right, that was the issue, thanks!

[pdziak]

I can confirm this issue and @markhomoki's solution. Will this be fixed :) ?

[trostinsky]

Also faced with this issue. @markhomoki's solution isn't work. I've not any status bar...

[herarya]

solved

 if (Platform.Version > 25) {
    await Navigation.setDefaultOptions({
    ....
    });
  }

[khorark]

solved

 if (Platform.Version > 25) {
    await Navigation.setDefaultOptions({
    ....
    });
  }

My version equal 26 and isn't work.

For solution need disabled:

1. StatusBar style in options when we show modal.
   

1. StatusBar style in options when we merge options.
   

2. And other manipulation with status bar.

When we start app setDefaultOptions worked, even if we change statusBar style and/or color.
If we manipulate status bar from ReactNative component it's also break RNN.

[trostinsky]

solved

 if (Platform.Version > 25) {
    await Navigation.setDefaultOptions({
    ....
    });
  }

My version equal 26 and isn't work.

For solution need disabled:

1. StatusBar style in options when we show modal.
   
2. StatusBar style in options when we merge options.
   
3. And other manipulation with status bar.

When we start app setDefaultOptions worked, even if we change statusBar style and/or color.
If we manipulate status bar from ReactNative component it's also break RNN.

I'm not used statusBar, but have this bug when try to push new screen from opened sideMenu.
Navigation.push("mainStack", { component: { name: screen, id: screen, options: { animations: { push: { waitForRender: true } } } } });

[arturhtml]

Same issue

[Luckfried]

I found that issue with devices which have the possibility to not open apps in fullscreen.

[linhth-0720]

same issue:
"react-native": "0.61.4",
"react-native-navigation": "3.6.0",

[Lestoroer]

Please, fix that issue

[shaheem-khanzada]

If anybody solve this issue please help get stuck seeing blank screen

[shaheem-khanzada]

@Lestoroer i guess i found an issue remove StatusBar from all over your app even if you importing from react-native hope it will help

[Frekansapp]

Removing all about statusbar worked. RN version 0.61.5 RNN version 4.0.3

[glauberfc]

The solution provided by @markhomoki worked for me. Thanks, guy!

[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 Detox and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[DaniShalash]

This issue haven't been solved yet.
The lack of activity is the lack of solution, but the issue is still there.

[Stalder]

Is it possible to reopen this issue? I'm not interested already, but if issue is still not resolved, it should be open

[rodolfoviolac]

+1

[DaniShalash]

For future reference, based on @markhomoki and @Frekansapp solutions, I was able to overcome the problem, however, it's a mix of both.

My problem was (and bare with me for obvious things):

• I have 2 themes in my app, light and dark.
• Android Status bar color and content color must change based on theme selected, and the same should apply in iOS (what's applicable of it).

Now, let's say a user is 2 screens deep in the app, and the theme changed (either by the user or following OS settings), we have 2 types of actions should be made here:

1. setDefaultOptions for future opened screens.
2. mergeOptions OR RN StatusBar for currently opened screens.

For point number 2, using StatusBar is what was causing the blank screen issue when setting default options, so the solution is to use merge options and remove all references of StatusBar.

A problem arrises here is that you need to keep track of the navigation history in order to use mergeOptions.
So what I did is I created a wrapper service around RNN that automatically keeps track of the navigation history along with any additional data (like passProps), which allowed me to use mergeOptions effectively (and in general provided more benefits actually).

Now, everything is working properly on Android, on iOS it's a different thing, because mergeOptions is too slow to change to statusBar content color compared to RN StatusBar.

So what I ended up doing, is using StatusBar for iOS, and mergeOptions for Android along with the RNN wrapper service, which works well on all platforms.

[NQuirmbach]

@DaniShalash could you share your code for your wrapper and describe more in detail what you've done there? I'm currently stuck with the same issue.

[guyca]

this thread completely slipped by me. Thanks @sorokin0andrey for bringing it to my attention. If I understand the issue, changing statusBar style causes blank screens on Android API 27 and bellow. I've looked into this extensively in the past and wasn't able to find a solution. I suspect this is an Android issue as reported here.

We've faced this issue in the Wix app when changing StatusBar style dynamically with mergeOptions. In our case, changing StatusBar style wasn't actually required. But generally, we don't change styles dynamically with mergeOptions and setDefaultOptions.

If you're required to change theme, we recommend you call setDefaultOptions following by setRoot. This will render your applications root with the new theme and ensures consistent behavior across both platforms and OS versions.

[Natteke]

My problem was stretched topBar on old xiaomi.
Im not 100% sure, but looks like some stretched system element pushed all other content off screen.
In our case part of content appeared when we change screen orientation to album.

Most frustrating is that it was reproduced only on some xiaomi like:
MI 5s+ / Android 8.0.0
Redmi 5 / Android 8.1.0

But everything fine on 100% IOS devices and 99% Android devices of our colleagues.
Event Nokia with Android 5.1 works great.

Anyway try this:
Navigation.setDefaultOptions({ topBar: { visible: false, height: 0 } });

[bozaigao]

I have the same issue, solve by remove all rn component StatuStatusBar and remove follow code :Navigation.mergeOptions(this.props.componentId,{
statusBar: {
backgroundColor:'light'
}
}); don't to change StatusBar's state everything is ok!