White/Blank Screen after code push installed

[JakeRawr]

Thanks so much for filing an issue or feature request! Please fill out the following (wherever relevant):

• react-native-code-push version: 1.16.1-beta
• react-native version: 0.40.0
• iOS/Android/Windows version: Android all version
• Does this reproduce on a debug build or release build? Both
• Does this reproduce on a simulator, or only on a physical device? Both
• Repro steps and/or stack trace:

my launch_screen.xml in layout looks like this

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="match_parent"
        android:scaleType="centerCrop"
        android:layout_height="match_parent"
        android:src="@drawable/screen"
        android:layout_gravity="center"
        />
</LinearLayout>

When the app launches without code push update, the splash/launch screen shows up fine.

Problem:

When there's an code push update, seems like there's split second that splash screen is not shown while Android is relaunching the new javascript bundle from code push. When the splash screen is not shown, it's just a pure white screen.

Ideally, while the code push updated, the splash screen is shown until after code push is done launching the new javascript bundle.

(The more info the faster we will be able to address it!)

[sergey-akhalkov]

@JakeRawr, you've probably faced with the one of common issues:

Images dissappear after installing CodePush update
If your app is using the React Native assets system to load images (i.e. the require(./foo.png) syntax), then you MUST release your assets along with your JS bundle to CodePush.

Please look at the list of supported components, seems like you are using static images syntax (i.e. using the { uri: "foo" }), such approach does not supported by CodePush, so you have to use React Native assets system (i.e. using the require("./foo.png") syntax) like here.

Please let me know if it helps or if you have any questions.

[JakeRawr]

thanks @sergey-akhalkov

I've fixed the issue using React-Native-Splash-Screen. I simply added SplashScreen.show() when code push is installing the updated bundle. Thank you for your help and now closing this.

Jake

[pvinis]

@JakeRawr when do you call that? is there a callback to know when the update will happen?

[JakeRawr]

@pvinis

Yes. If you look at the doc, codePushStatusDidChange is how I determine code push states.

codePushStatusDidChange(status) {
        switch(status) {
            case codePush.SyncStatus.CHECKING_FOR_UPDATE:
                console.log("Checking for updates.");
                break;
            case codePush.SyncStatus.DOWNLOADING_PACKAGE:
                console.log("Downloading package.");
                break;
            case codePush.SyncStatus.INSTALLING_UPDATE:
                console.log("Installing update.");
                break;
            case codePush.SyncStatus.UP_TO_DATE:
                console.log("Up-to-date.");
                break;
            case codePush.SyncStatus.UPDATE_INSTALLED:
                SplashScreen.show()
                console.log("Update installed.");
                break;
        }
    }

[SamiChab]

In my case, I forgot to call the sync() function when app starts

[zzq0826]

hi. It seems that SplashScreen.show() is not work on ios? @JakeRawr

[youngjuning]

@JakeRawr 我也用不了 SplashScreen.show()

[byteab]

@JakeRawr why you show splash when update installed. why not when installing