Error when creating React Native app: Element type is invalid: expected a string or a class/function but got: object

Question

This seems to be a question that has been asked before, but every solution I've come across so far is either something I already have in my code or solves the issue for a codebase much more complex than my own. All I'm trying to do is create a central entry point for my application from the starter code generated from the React Native CLI. Here's what I have so far:

index.ios.js:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';
import MyApp from './index';

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

index.android.js:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';
import MyApp from './index';

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

index.js:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

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

export default class MyApp extends Component {
    render() {
        return (
            <View style={styles.container}>
              <Text style={styles.welcome}>
                Welcome to React Native!
              </Text>
              <Text style={styles.instructions}>
                To get started, edit index.ios.js
              </Text>
              <Text style={styles.instructions}>
                Press Cmd+R to reload,{'\n'}
                Cmd+D or shake for dev menu
              </Text>
            </View>
        );
    }
}

Yet attempting to run the app yields the following: Previous answers seem to suggest the use of export default class should fix the problem, but that was already in use when I created the app. Any suggestions as to what might be causing this? Thanks in advance.

itinance itinance · Accepted Answer · 2017-02-06T17:59:43

Try to move out the index.js of the root folder.

Create a folder "src", move the index.js into this folder and import it in index.ios.js and index.android.js this way:

import MyApp from './src/index';

The issue is, that index.js and index.ios.js at the same root-path isn't a good idea. I've just tried it out with a test application.

Error when creating React Native app: Element type is invalid: expected a string or a class/function but got: object

1 Answers