React-native-navigation: White Screen appears for a split second and then it continues with project screen

[sabbiu]

Issue Description

Whenever I try to launch App, a blank screen appears for close to 1 sec, then it animates to project screen. Why does this happen?

Steps to Reproduce / Code Snippets / Screenshots

Default setup as shown in documentation.. https://wix.github.io/react-native-navigation/#/installation-android

I have published the app for you to see.. https://play.google.com/store/apps/details?id=com.billcalc&hl=en

Environment

• React Native Navigation version: "^1.1.300"
• React Native version: "0.50.4"
• Platform: Android (iOS not tested)
• Device info (Simulator/Device? OS version? Debug/Release?): Both Debug and Release

[amorenew]

@sabbiu
it's not a bug
android:windowBackground will fix it

in your project androidappsrcmainresvalues
styles.xml
in

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/splash_background</item>

[sabbiu]

@amorenew , is there a way to bypass SplashActivity?
After adding as you suggested above, now my app runs in such way..
Splash Screen --> White Screen --> App Screen

[amorenew]

@sabbiu could share your manifest.xml here?

[sabbiu]

@amorenew Here it is

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.billcalc"
xmlns:tools="http://schemas.android.com/tools"
android:versionCode="1"
android:versionName="1.0">

<uses-permission 
    android:name="android.permission.INTERNET" 
    tools:node="remove"/>
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission
    android:name="android.permission.READ_PHONE_STATE"
    tools:node="remove"/>

<uses-sdk
    android:minSdkVersion="16"
    android:targetSdkVersion="22" />

<application
  android:name=".MainApplication"
  android:allowBackup="true"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:theme="@style/AppTheme">
  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:windowSoftInputMode="adjustResize">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

</manifest>

[amorenew]

@sabbiu If you already added android:windowBackground in your theme then I think you do loading some stuff on your second screen before componentDidMount() if not then I think you should post a question on StackOverflow to get more help from anyone who could faced same issue

[sabbiu]

@amorenew Okay I'll try asking in stackoverflow, then...

[rcorrie]

@sabbiu could you please post the link to your stackoverflow thread so anyone facing the same issue can follow it?

[sabbiu]

@rcorrie, here it is.. https://stackoverflow.com/questions/47904913/wix-react-native-navigation-blank-screen-in-the-beginning
I couldn't find a solution for this. So, I am using react navigation for now

[baoanhng]

@sabbiu As you said in issue description, it waits for about 1s to load JS context then animate to project screen. So you can easily resolve the problem by removing animation when start your app.

Navigation.startSingleScreenApp({
    screen: {
      screen: 'example',
      title: 'Title'
    },
    animationType: 'none' // do not animate when start app
  });

Then it will run smoothly. Other native apps also need around 1s to render so it is acceptable.

I got same problem as yours and it works for me.

[guyca]

This doesn't seem like a bug, although it does emphasize the lack of design/thought that was put into the splash mechanism.
It's possible you're doing work on the Js thread before your initial screen is mounted and rendered.
At any case I'm closing this and we'll address this matter in v2

[pqkluan]

Hey, I just wrote a detail article about implementing Splash Screen with RNN.

You could check the gif results to see if the solution is suitable for you.