App crashing after restart on Android with react-native-navigation when starting app after AsyncStorage access

[jer-sen]

Steps to Reproduce

1. Install and configure last versions of react-native-code-push and react-native-navigation
2. Set index.js as following:

import { AsyncStorage } from 'react-native';
import { Navigation } from 'react-native-navigation';
import React from 'react';
import { Text } from 'react-native';
import codePush from "react-native-code-push";

const App = () =>
	<Text onPress={() => codePush.restartApp(false)}>
		Touch to run codePush.restartApp and see the crash
	</Text>
;

AsyncStorage.getItem('environment', () => {
	Navigation.registerComponent('app', () => App);
	Navigation.startSingleScreenApp({
		screen: {
			screen: 'app',
		},
		passProps: { },
	});
});

3. Build and run Android app
4. Tap to restart app

Expected Behavior

App restarts

Actual Behavior

App crashes with error:

Module AppRegistry is not a registered callable module (calling runApplication)

It's similar to #852
It also crashes after an immediate update.

Reproducible Demo

Cf repro steps.

Environment

+-- react@16.0.0
+-- react-native@0.50.4
+-- react-native-code-push@5.2.0-beta
+-- react-native-navigation@1.1.295

• iOS/Android/Windows version: Android only
• Does this reproduce on a debug build or release build? release only
• Does this reproduce on a simulator, or only on a physical device? on both

I really need to access AsyncStorage before starting the app to decide which screen display to the user.
Thanks for your help !

[ruslan-bikkinin]

Hi @Jay1337 and thanks for submitting the issue. Please try to replace index.js content with the following:

import { AsyncStorage } from 'react-native';
import { Navigation } from 'react-native-navigation';
import React from 'react';
import { Text } from 'react-native';
import codePush from "react-native-code-push";

class App extends React.Component {

    constructor(props) {
        super(props);
    }
    
    render() {
        return (
            <Text onPress={() => codePush.restartApp(false)}>
            Touch to run codePush.restartApp and see the crash
            </Text>
        );
    }
}
Navigation.registerComponent('app', () => codePush(App));
AsyncStorage.getItem('environment', () => {
	Navigation.startSingleScreenApp({
		screen: {
			screen: 'app',
		},
		passProps: { },
	});
});

Let us know if it helps.

[jer-sen]

Thanks for your help.

With your code, the app does not crash.
But I need the result of AsyncStorage.getItem to register screens so your code is not a fix nor a workaround for me. I need to read a value in AsyncStorage, in order to get the server url to use when connecting screens wrapped with GraphQL Apollo client, before registering them.

An other interesting case that makes the app crash:

import { AsyncStorage } from 'react-native';
import { Navigation } from 'react-native-navigation';
import React from 'react';
import { Text } from 'react-native';
import codePush from "react-native-code-push";

const App = () =>
	<Text onPress={() => codePush.restartApp(false)}>
		Touch to run codePush.restartApp and see the crash
	</Text>
;

const screenName = Math.random().toString();

Navigation.registerComponent(screenName, () => App);
Navigation.startSingleScreenApp({
	screen: {
		screen: screenName,
	},
	passProps: { },
});

Here are the logs:

D/ReactNative( 2166): ReactInstanceManager.createReactContextInBackground()
D/ReactNative( 2166): ReactInstanceManager.recreateReactContextInBackgroundInner()
D/ReactNative( 2166): ReactInstanceManager.recreateReactContextInBackgroundFromBundleLoader()
D/ReactNative( 2166): ReactInstanceManager.recreateReactContextInBackground()
D/ReactNative( 2166): ReactInstanceManager.runCreateReactContextOnNewThread()
D/ReactNative( 2166): ReactInstanceManager.createReactContext()
D/ReactNative( 2166): Initializing React Xplat Bridge.
D/ReactNative( 2166): Initializing React Xplat Bridge before initializeBridge
D/ReactNative( 2166): Initializing React Xplat Bridge after initializeBridge
D/ReactNative( 2166): CatalystInstanceImpl.runJSBundle()
D/ReactNative( 2166): ReactInstanceManager.setupReactContext()
D/ReactNative( 2166): CatalystInstanceImpl.initialize()
D/ReactNative( 2166): ReactInstanceManager.attachRootViewToInstance()
I/ReactNativeJS( 2166): Running application "0.9843317680060863" with appParams: {"initialProps":{"screenInstanceID":"screenInstanceID2","navigatorID":"navigatorID1_nav","navigatorEventID":"screenInstanceID2_events"},"rootTag":1}. __DEV__ === false, development-level warning are OFF, performance optimizations are ON

=========== restart =========

E/ReactNativeJS( 2166): Application 0.9843317680060863 has not been registered.
E/ReactNativeJS( 2166):
E/ReactNativeJS( 2166): Hint: This error often happens when you're running the packager (local dev server) from a wrong folder. For example you have multiple apps and the packager is still running for the app you were working on before.
E/ReactNativeJS( 2166): If this is the case, simply kill the old packager instance (e.g. close the packager terminal window) and start the packager in the correct app folder (e.g. cd into app folder and run 'npm start').
E/ReactNativeJS( 2166):
E/ReactNativeJS( 2166): This error can also happen due to a require() error during initialization or failure to call AppRegistry.registerComponent.
E/ReactNativeJS( 2166):
D/ReactNative( 2166): ReactInstanceManager.attachRootViewToInstance()
I/ReactNativeJS( 2166): Running application "0.07154778391122818" with appParams: {"initialProps":{"screenInstanceID":"screenInstanceID2","navigatorID":"navigatorID1_nav","navigatorEventID":"screenInstanceID2_events"},"rootTag":21}. __DEV__ === false, development-level warning are OFF, performance optimizations are ON
D/ReactNative( 2166): ReactInstanceManager.detachViewFromInstance()
D/ReactNative( 2166): CatalystInstanceImpl.destroy() start
D/ReactNative( 2166): [CodePush] Loading JS bundle from "assets://index.android.bundle"
D/ReactNative( 2166): ReactInstanceManager.ctor()

My feeling is that everything is not perfectly cleared before starting the app again (previous app id expected by RN) and also the app is not started again the good RN Navigation way (RN should not expect any app id to be registered since with RNN there is no getMainComponentName in MainActivity.java)...

[ruslan-bikkinin]

@Jay1337

RN should not expect any app id to be registered since with RNN there is no getMainComponentName in MainActivity.java

As documentation for react-native-navigation said,

Every screen that you want to be able to place in a tab, push to the navigation stack or present modally needs to be registered.

I believe, you have to place Navigation.registerComponent('app', () => codePush(App)); before AsyncStorage.getItem(..) anyway so probably you should change your approach for screen registration. Be aware to use codePush(App) instead of just App to "codepushify" your application the proper way to prevent errors in the future.

[jer-sen]

@ruslan-bikkinin, with registration after AsynStorage, everything works find except CodePush restart (that's why I've posted an issue here). Also everything is ok on iOS. So it's not a bad implementation of RNN.

I think that the way CodePush restarts the app is not compatible with RNN screens registration. Again, it's strange that RN expects a specific app id to be registered.

Have you tried to reproduce the bug on your side ?

As for codePush(App) I call codePush.sync manually and everything works fine.

[ruslan-bikkinin]

Hi @Jay1337 sorry for late response. After further investigation, yeah, I believe you was right, something isn't clearing up completely after CodePush.restart() in case of RNN. I am working on fix now so I'll keep you posted.

[jer-sen]

@ruslan-bikkinin Thanks for this update.