title: React Native - how to navigate between pages - Error: undefined is not a function(near, '...(0, _reactNAvigation.StackNavigator)...'))
body: <p>I am learning React Native and I am trying to implement page navigation, when I click the <strong>Explore</strong> button , I want to go to the About page. I followed a few guides but nothing so far.
  The error I get is <strong>undefined is not a function (near '...(0, reactNavigation.StackNavigator)...')*</strong>.</p>
  
  <p>Here is the code:</p>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>/** @format */
  
  import {AppRegistry} from 'react-native';
  import App from './App';
  import {name as appName} from './app.json';
  
  AppRegistry.registerComponent(appName, () =&gt; App);
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>/**
   * Sample React Native App
   * https://github.com/facebook/react-native
   *
   * @format
   * @flow
   */
  
  import React, {Component} from 'react';
  import {Platform, StyleSheet, Text, View, Button, TouchableHighlight} from 'react-native';
  import { createStackNavigator, StackNavigator } from "react-navigation";
  import HomeScreen from './pages/home_screen.js';
  import AboutPage from './pages/about_me.js';
  
  
  
  // const instructions = Platform.select({
  //   ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  //   android:
  //     'Double tap R on your keyboard to reload,\n' +
  //     'Shake or press menu button for dev menu',
  // });
  
  
  
  const RootStack = createStackNavigator(
    {
      Home: {
        screen: HomeScreen,
      },
      About: {
        screen: AboutPage,
      },
    },
    {
      initialRouteName: 'Home',
    }
  );
  
  const AppContainer = createAppContainer(RootStack);
  
  export default class App extends React.Component {
    render() {
      return &lt;AppContainer /&gt;;
    }
  }
  </code></pre>
  
  <p><strong>home_screen.js</strong></p>
  
  <pre><code>/**
   * Sample React Native App
   * https://github.com/facebook/react-native
   *
   * @format
   * @flow
   */
  
  import React, {Component} from 'react';
  import {Platform, StyleSheet, Text, View, Button, TouchableHighlight} from 'react-native';
  import LinearGradient  from 'react-native-linear-gradient';
  import LocationIcon from 'react-native-vector-icons/Entypo';
  import SocMediaIcons from 'react-native-vector-icons/AntDesign';
  import { createStackNavigator, createAppContainer } from "react-navigation";
  
  
  
  
  const locationIcon = (&lt;LocationIcon name="location" size={30} color="#6600cc" /&gt;);
  const linkedInIcon = (&lt;SocMediaIcons name="linkedin-square" size={30} color="#6600cc" /&gt;);
  const instagramIcon = (&lt;SocMediaIcons name="instagram" size={30} color="#6600cc" /&gt;);
  const facebookIcon = (&lt;SocMediaIcons name="facebook-square" size={30} color="#6600cc" /&gt;);
  
  
  
  // const instructions = Platform.select({
  //   ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  //   android:
  //     'Double tap R on your keyboard to reload,\n' +
  //     'Shake or press menu button for dev menu',
  // });
  
  class HomeScreen extends Component{
    render() {
      return (
        &lt;LinearGradient
            colors={[ '#276b7a', '#0072a9', '#0071d9', '#3860f5', '#bc12eb']}
            style={styles.container}
          &gt;
         &lt;View style={styles.iconGrid}&gt;
          &lt;View style={{width: 195}}&gt;
           &lt;Text&gt;{locationIcon} Mordor&lt;/Text&gt;
  
          &lt;/View&gt;
          &lt;View style={{width: 70}} /&gt;
          &lt;View style={{width: 30}} &gt;
            {facebookIcon}
          &lt;/View&gt;
          &lt;View style={{width: 30 }} &gt;
            {instagramIcon}
          &lt;/View&gt;
          &lt;View style={{width: 30}} &gt;
            {linkedInIcon}
          &lt;/View&gt;
        &lt;/View&gt;
  
          &lt;TouchableHighlight 
                  style ={{
                      height: 50,
                      shadowColor: 'red',
                      width:260,
                      borderRadius:30,
                      backgroundColor : "rgba(255, 255, 255, 0.3)",
                      marginLeft :50,
                      marginRight:50,
                      marginTop : 250
                  }}&gt;
              &lt;Button onPress={()=&gt; this.props.navigation.navigate('About')}            
              title="Explore"
              accessibilityLabel="Explore Beautox"
              /&gt; 
          &lt;/TouchableHighlight&gt; 
  
  
        &lt;/LinearGradient&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
  
    },
    button : {
       borderColor: 'red',
       backgroundColor: 'rgba(255, 255, 255, 1.0)'
    },
    iconGrid: {
      flexDirection: 'row',
      marginTop: 350,
      width: 350,
      marginRight: 10
    }
  });
  
  export default HomeScreen;
  </code></pre>
  
  <p><strong>about_me.js</strong></p>
  
  <pre><code>import React, {Component} from 'react';
  import LinearGradient  from 'react-native-linear-gradient';
  
      class AboutMe extends Component {
          render() {
           return(
             &lt;View&gt;
                &lt;Text&gt;Hello&lt;/Text&gt;
                &lt;Button
                 title="Go back"
                 onPress={() =&gt; this.props.navigation.goBack()}
                  /&gt;
                &lt;/View&gt;
              );
          }
      };
  
      export default AboutMe;
  </code></pre>
  
  <p>Any help would be appreciated.</p>