CODEWITHSUNDEEP
javascriptandroidreactjsreact-nativereact-navigation
Mirza
Mirza

Reputation: 1551

React Native navigation package Error React.createElement: type is invalid -- expected a string

Showing error while opening app. 

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in.

This is a basic code I have created. See the steps to reproduce:

  1. Created native project using command create-react-native-app AwesomeProject
  2. Installed npm install --save react-navigation

  3. Pasted the below code to App.js from react navigation documentation

    import React from 'react';
import {
AppRegistry,
Text,
} from 'react-native';
import { StackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Welcome',
    };
    render() {
        return <Text>Hello, Navigation!</Text>;
    }
}

const SimpleApp = StackNavigator({
    Home: { screen: HomeScreen },
});

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

  4. Run the app using npm start and opened in expo app android

Please note that none of the other files are edited.

Upvotes: 0

Views: 254

Answers (1)

jevakallio
jevakallio

Reputation: 35890

Expo and the standard React Native project templates have a slightly different way of declaring the app root component.

Whereas in standard React Native project, you use AppRegistry in index.android.js:

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

In Expo, the framework registers the component for you, and all you need to do is export the component from your Main.js:

export default SimpleApp;

Here is an example of your code modified and pasted to Expo Snack: https://snack.expo.io/S1CZnFadZ

Upvotes: 2

Related Questions