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

Question

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.

Answer 1

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