App stuck on white screen when launched from deep link while in background (android)

[ThomasDelteil]

Issue Description

When deep linking into the app, while the app is in background, from an external link using a custom scheme a la myapp:// the app is stuck on a blank screen on Android. It works fine on iOS, both from background and first launch. Android works fine for first launch.

I found somewhat similar issues reported several time, I tried a patchwork of the proposed fixes, none of them worked.

If someone knows what is happening in the lifecycle of the android activity when coming back from background that would cause such issue, that would be nice.

Steps to Reproduce / Code Snippets / Screenshots

Code is as follows:

app.android.tsx

import React from 'react'; // eslint-disable-line
import AppState from 'react-native';
import { Provider } from 'react-redux';
import { Navigation, NativeEventsReceiver } from 'react-native-navigation';
import { compose, createStore } from 'redux';
import rootReducer from './redux';

import { registerScreens, registerScreenVisibilityListener, tabs, navigatorStyle } from './views';

const store = compose()(createStore)(rootReducer);
registerScreens(store, Provider);
registerScreenVisibilityListener();

function startApp() {
    Navigation.startSingleScreenApp({
        screen: {
            screen: 'app.home',
            title: 'Home',
            navigatorStyle,
            leftButtons: [
                {
                    id: 'sideMenu'
                }
            ]
        },
        drawer: {
            left: {
                screen: 'app.drawer'
            }
        }
    });
    
}

Navigation.isAppLaunched()
    .then(appLaunched => {
        if (appLaunched) {
            startApp(); // App is launched -> show UI
        }
        new NativeEventsReceiver().appLaunched(startApp); // App hasn't been launched yet -> show the UI only when needed.
    });

relevant part of base Component class inherited by all the screens, including Home:

constructor(props) {
    super(props);
    this._handleOpenURL = this._handleOpenURL.bind(this);
    this._checkDeepLink = this._checkDeepLink.bind(this);
    this._navigateToScreenAndroid = this._navigateToScreenAndroid.bind(this);
    this._handleAppStateChange = this._handleAppStateChange.bind(this);
}

componentDidMount() {
    AppState.addEventListener('change', this._handleAppStateChange);
    Linking.addEventListener('url', this._handleOpenURL);
}

componentWillUnmount() {
    AppState.removeEventListener('change', this._handleAppStateChange);
    Linking.removeEventListener('url', this._handleOpenURL);
}

_handleAppStateChange(currentAppState) {
    if (currentAppState == 'active') {
        Linking.getInitialURL().then(url => this._checkDeepLink(url));
    }
}

_handleOpenURL(event) {
    this._checkDeepLink(event.url);
}

_checkDeepLink(url) {
    if (url) {
        var parts = url.split('myapp://myhost.com/')
        if (parts.length > 0) {
            var target = parts[1];
            this._navigateToScreenAndroid(target);
        }
    }
}

_navigateToScreenAndroid(screen) {
    this.props.navigator.resetTo({
        screen: 'app.'+screen,
        title: screen,
        navigatorStyle,
        animated: true,
        animationType: 'fade',
        leftButtons: [
            {
                id: 'sideMenu'
            }
        ]
    });
}

The android-logs show that, after clicking on a deep-link in the browser:

02-16 15:00:53.102 22518 22518 D ReactNative: ReactInstanceManager.detachViewFromInstance()
02-16 15:00:53.102 22518 22518 D ReactNative: ReactInstanceManager.detachViewFromInstance()
02-16 15:00:53.102 22518 22518 D ReactNative: CatalystInstanceImpl.destroy() start
02-16 15:00:53.139 22518 22518 D ReactNative: ReactInstanceManager.ctor()
02-16 15:00:53.172 22518 22518 D ReactNative: ReactInstanceManager.createReactContextInBackground()
02-16 15:00:53.172 22518 22518 D ReactNative: ReactInstanceManager.recreateReactContextInBackgroundInner()
02-16 15:00:53.172 22518 22518 D ReactNative: ReactInstanceManager.onJSBundleLoadedFromServer()
02-16 15:00:53.172 22518 22518 D ReactNative: ReactInstanceManager.recreateReactContextInBackground()
02-16 15:00:53.173 22518 22518 D ReactNative: ReactInstanceManager.runCreateReactContextOnNewThread()
02-16 15:00:53.188 22518 22532 D ReactNative: CatalystInstanceImpl.destroy() end
02-16 15:00:53.194 22518 22564 D ReactNative: ReactInstanceManager.createReactContext()
02-16 15:00:53.247 22518 22564 D ReactNative: Initializing React Xplat Bridge.
02-16 15:00:53.248 22518 22564 D ReactNative: Initializing React Xplat Bridge before initializeBridge
02-16 15:00:53.256 22518 22564 D ReactNative: Initializing React Xplat Bridge after initializeBridge
02-16 15:00:53.256 22518 22564 D ReactNative: CatalystInstanceImpl.runJSBundle()
02-16 15:00:53.257 22518 22567 D ReactNative: ReactInstanceManager.setupReactContext()
02-16 15:00:53.257 22518 22567 D ReactNative: CatalystInstanceImpl.initialize()
02-16 15:00:53.273 22518 22518 D ReactNative: CatalystInstanceImpl.destroy() start
02-16 15:00:53.550 22518 22541 D ReactNative: CatalystInstanceImpl.destroy() end

---

Environment

• React Native Navigation version: 1.1.378
• React Native version: 0.53.0
• Platform(s) (iOS, Android, or both?): android
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator / Debug

[laukaichung]

@ThomasDelteil
I have the same android logs as yours from adb logcat *:S ReactNative:V ReactNativeJS:V

Every other time my app gets stuck on the white screen as it starts. It's not good because FCM is unable to send notifications to the app when it's in the background.

[noambonnie]

Same here, RNN 1.1.397, RN 0.51.0, Android

[noambonnie]

@ThomasDelteil Just curious - have you found a solution yet?

[ThomasDelteil]

In the end it wasn't happening on my actual device, but only on the emulator. Looks like some race condition. I have since moved to a different project so I haven't investigated further.

[Noitidart]

Is this related to this - #2180 - does going to multitasking mode and coming back fix it?

[ericketts]

I've posted a comment with a potential solution that may be related to this here.

Try it out and see if it works for you, but note as I said there, don't ship code with this hack!.

[stale]

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]

The issue has been closed for inactivity.