Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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 route 'Home' must be a React component". This error doesn't happen if I move all of the code into one file, so I'm not sure what the difference is.

Here is my App.js:

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

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


const Root = StackNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    Details: {
      screen: JoinScreen,
    }
  }, 
  {
    initialRouteName: 'Home',
    headerMode: 'none',
  }
);

export default class App extends React.Component {
  render() {
    return (
      <Root />
    )
  }
}

And here is my .screens/HomeScreen.js

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

export default class HomeScreen extends React.Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Hello World</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'space-around',
  }
});
like image 474
B Roy Dawson Avatar asked Mar 13 '18 23:03

B Roy Dawson


2 Answers

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 ;)

like image 177
Matt Holland Avatar answered Nov 17 '22 22:11

Matt Holland


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';
like image 5
Haythem Farhat Avatar answered Nov 17 '22 22:11

Haythem Farhat