react-navigation can't navigate between screens even after following react-navigation docs

Question

I am following this doc from react-navigation to learn and I am trying and trying but I can't navigate between screens. Each time I change something a random error is popping up. App.js is running fine if I call just one screen as <HomeScreen/> inside the root of App.js.

I am calling HomeScreen like this:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import HomeScreen from './Comps/HomeScreen';
import { StackNavigator } from 'react-navigation';
import DetailsScreen from './Comps/DetailsScreen';

class App extends React.Component {
  render() {
    return (
      <HomeScreen />
    );
  }
}



const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

Now this is working fine, showing whats inside HomeScreen.js

 import React from 'react';
 import { StyleSheet, Text, View, SafeAreaView, Button } from 'react-native';
 import { createDrawerNavigator } from 'react-navigation-drawer';
 import { createAppContainer, navigation } from 'react-navigation';
 import { createStackNavigator } from 'react-navigation-stack';

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

 export default HomeScreen;

but when I click on the button a random error pops up, sometimes it says undefined is not an object, sometimes it can't find StackNavigator , sometimes it has problems with navigation. I installed all the dependencies but still please tell me if I am missing something here.

From HomeScreen.js I am calling DetailsScreen.js like said in the doc.

 import React from 'react';
 import { StyleSheet, Text, View, SafeAreaView, Button } from 'react-native';
 import { createDrawerNavigator } from 'react-navigation-drawer';
 import { createAppContainer, navigation } from 'react-navigation';
 import { createStackNavigator } from 'react-navigation-stack';
 import { withNavigation } from 'react-navigation';


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

Answer 1

You need to define an AppContainer( What is AppContainers ) using createAppContainer like this

const AppContainer = createAppContainer(RootStack);

and there RootStack will be the list of screens that you want to show. add them like this using createStackNavigator( what is createStackNavigator ) like this:

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

and add both the const AppContainer and const RootStack in App.js and then export the class App like this:

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

If the screens are in different file, say ./Comps/HomeScreen.js or ./Comps/DetailsScreen.js then import them in App.js before creating the screens. like this:

import HomeScreen from './Comps/HomeScreen';
import DetailsScreen from './Comps/DetailsScreen'