Fix Error: The component for route 'Home' must be a React component

Question

I\'m trying to used react-navigation but I can not get it to work when I move each screens\' components into multiple files. I always get this error: \"The component for ro

Answer 1

Add this to your js file at the bottom add this Line

export default MainActivity;


import React, { Component } from 'react';
import { createStackNavigator } from 'react-navigation-stack';

class MainActivity extends Component{
  ...
}
export default MainActivity;

Answer 2

I think that if you change this line:

import { HomeScreen } from './screens/HomeScreen';

to:

import HomeScreen from './screens/HomeScreen';

(i.e. removing the braces around HomeScreen) then it will work. Because you used export default in the HomeScreen component's source file, you don't need the destructuring on the import. This is attempting to access a variable called HomeScreen on the component, which is resolving to undefined and causes the error you saw.

Alternatively, you can remove the default from export default and keep the import the same. I personally prefer removing the braces as the code looks cleaner.

There's also a missing closing brace on this line:

import { JoinScreen  from './screens/JoinScreen';

But I assumed that was a typo ;)

Answer 3

Since you've mentioned the default, I think that if you change this line:

import { HomeScreen } from './screens/HomeScreen';

to:

import HomeScreen from './screens/HomeScreen';

This would solve the issue. Cheers mate!

Answer 4

I think that react is having a problem figuring out what to import
Since you're exporting one thing by default You should replace

import { HomeScreen } from './screens/HomeScreen';

with

import  HomeScreen  from './screens/HomeScreen';

Answer 5

It also happens if you do not export your class.

export default class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

Answer 6

Keep the braces intact for your external screen files imports. Just do the following and it should run on both Android and iOS simulators regardless

// HomeScreen.js
... all imports
export class HomeScreen extends React.Component {
...

This fixed the issue for me in both platforms.