React-native Android: Error calling AppRegistry.runApplication

Question

I really don't know what's going on here. I've set up a basic app and used a codesharing method found here. It's all very basic, so here's the code:

// index.android.js
// index.ios.js
import React, { AppRegistry } from 'react-native';
import CompetitionAgent from './app/index';

AppRegistry.registerComponent('CompetitionAgent', () => CompetitionAgent);

And the component:

//./app/index.js
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    TextInput,
    View
} from 'react-native';

export default class CompetitionAgent extends Component {
    constructor() {
        super();
        this.state = {nickname:''};
    }
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.information}>
                    <Text style={styles.welcome}>
                        Welcome to the Competition Agent Connect app!
                    </Text>
                    <Text style={styles.instructions}>
                        When you are near a Competition Agent, you can join the session.
                    </Text>
                </View>
                <View style={{padding:10}}>
                    <TextInput style={styles.inputStyle} />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    information: {
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
    inputStyle: {
        flexDirection: 'row',
        backgroundColor: '#3E3134',
        color: '#FFFFFF',
    }
});

I know the error could be many things. So this basic layout produces the same error.

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    TextInput,
    View
} from 'react-native';

export default class CompetitionAgent extends Component {
    constructor() {
        super();
        this.state = {nickname:''};
    }
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.information}>
                    Welcome to the Competition Agent Connect app!
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    information: {
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    }
});

The stacktrace:

E/unknown:React: Exception in native call
                                              java.lang.RuntimeException: Error calling AppRegistry.runApplication
                                                  at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
                                                  at android.os.Handler.handleCallback(Handler.java:739)
                                                  at android.os.Handler.dispatchMessage(Handler.java:95)
                                                  at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
                                                  at android.os.Looper.loop(Looper.java:158)
                                                  at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:208)
                                                  at java.lang.Thread.run(Thread.java:818)
                                               Caused by: com.facebook.jni.CppException: Could not get BatchedBridge, make sure your bundle is packaged correctly
                                                  at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method) 
                                                  at android.os.Handler.handleCallback(Handler.java:739) 
                                                  at android.os.Handler.dispatchMessage(Handler.java:95) 
                                                  at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31) 
                                                  at android.os.Looper.loop(Looper.java:158) 
                                                  at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:208) 
                                                  at java.lang.Thread.run(Thread.java:818) 

It ran just fine yesterday, restarting Android Studio didn't help either.

Answer 1

I recently encountered the same problem when running a second React Native project in Genymotion emulator, I got the red screen with an error saying:

Error calling AppRegistry.runApplication

However, in my case, it is not caused by the absence of those environment variables, as I added them in the very beginning. And the adb reverse tcp:8081 tcp:8081 command doesn't work for me either. I tried almost all the solutions I could find on the Internet, and none worked.

In my case, the solution is set the Debug Server host & port, as shown below:

Press CTRL + M, to open up the overlay of setting

Click 'Dev Settings', to go to the setting menu

Click on 'Debug Server host & port for device', and type in localhost:8081 in the popup

And now you can just reload it, it should start working.

Hope this solution can help some people.

Background:

Actually, after setting up my development environment on Windows 7 Pro, when I ran my first React Native app, I got an error that says:

Unable to load script from assets 'index.android.bundle'. Make sure your bundle is packaged correctly, or you are running a package server.

To fix that problem, I set the Debug Server option to localhost:8081, and I expected that setting would take effect globally on the virtual device. But it seems to be working per application, which means I have to set it over and over again for new React Native projects.

I also setup the environment on a Windows 10 Home (following exactly the same procedure as I did on Windows 7 Pro), needless to set the debug server option, it does not give me such errors, and I can just run any React Native project without setting anything.