React Native Navigation Component Route Issue

Question

New react native user here. I\'m running into an issue and I am not sure how to proceed. I was able to get react-navigation running properly and then began receiving an error: \

Answer 1

For anyone else coming here, you could be receiving the "The component for route must be a a React Component" error because you don't have a default export, which was the case for me.

export HomeScreen extends React.Component {
 ...

vs

export default HomeScreen extends React.Component {
 ...

Hope this helps someone!

Answer 2

In my case putting this code block inside home.js solved the issue

 static navigationOptions = {
    navigationOptions: {
      title: "scren title",
    }
  };

Answer 3

I think the problem is with home.js since you aren't exporting it. Try this :

export default class Home extends Component { ... } 
^^^^^^^^^^^^^^

Add those or just add

 export default Home; 

at the end of the home.js file

Answer 4

const MyNavigator = createStackNavigator({
  RouteNameOne: {
    screen: () => <HomeScreen/>
  },
  RouteNameTwo: {
    screen: () => <NewScreen/>
  }
}, {
  initialRouteName: 'RouteNameOne'
});

It will work.