title: getting undefined is not a function (evaluating '(0,_reactNavigation.stacknavigator)') in drawer navigation
body: <p>In my application I need drawer navigation, for that I am using sample code from <a href="https://aboutreact.com/react-native-navigation-drawer/" rel="noreferrer">this</a>. I have integrated everything in my application, but getting the following error</p>
  
  <blockquote>
    <p>undefined is not a function (evaluating
    '(0,_reactNavigation.stacknavigator)')</p>
  </blockquote>
  
  <p>And installed this one too.</p>
  
  <p><strong>npm install react-navigation --save</strong></p>
  
  <p>But don't know why this error is coming, So please guide me how to resolve this.</p>
  
  <p>This is my app.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import { StyleSheet , Platform , View , Text , Image , 
           TouchableOpacity , YellowBox } from 'react-native';
  import { DrawerNavigator, StackNavigator } from 'react-navigation';
  
  class NavigationDrawerStructure extends Component {
    //Structure for the navigatin Drawer
    toggleDrawer = () =&gt; {
      //Props to open/close the drawer
      this.props.navigationProps.toggleDrawer();
    };
    render() {
      return (
        &lt;View style={{ flexDirection: 'row' }}&gt;
          &lt;TouchableOpacity onPress={this.toggleDrawer.bind(this)}&gt;
            {/*Donute Button Image */}
            &lt;Image
              source={require('./image/drawer.png')}
              style={{ width: 25, height: 25, marginLeft: 5 }}
            /&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
      );
    }
  }
  
  class Screen1 extends Component {
    //Screen1 Component
    render() {
      return (
        &lt;View style={styles.MainContainer}&gt;
          &lt;Text style={{ fontSize: 23 }}&gt; Screen 1 &lt;/Text&gt;
        &lt;/View&gt;
      );
    }
  }
  
  class Screen2 extends Component {
    //Screen2 Component
    render() {
      return (
        &lt;View style={styles.MainContainer}&gt;
          &lt;Text style={{ fontSize: 23 }}&gt; Screen 2 &lt;/Text&gt;
        &lt;/View&gt;
      );
    }
  }
  
  class Screen3 extends Component {
    //Screen3 Component
    render() {
      return (
        &lt;View style={styles.MainContainer}&gt;
          &lt;Text style={{ fontSize: 23 }}&gt; Screen 3 &lt;/Text&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const FirstActivity_StackNavigator = StackNavigator({
    //All the screen from the Screen1 will be indexed here 
    First: {
      screen: Screen1,
      navigationOptions: ({ navigation }) =&gt; ({
        title: 'Screen1',
        headerLeft: &lt;NavigationDrawerStructure navigationProps={navigation} /&gt;,
        headerStyle: {
          backgroundColor: '#FF9800',
        },
        headerTintColor: '#fff',
      }),
    },
  });
  
  const Screen2_StackNavigator = StackNavigator({
    //All the screen from the Screen2 will be indexed here
    Second: {
      screen: Screen2,
      navigationOptions: ({ navigation }) =&gt; ({
        title: 'Screen2',
        headerLeft: &lt;NavigationDrawerStructure navigationProps={navigation} /&gt;,
        headerStyle: {
          backgroundColor: '#FF9800',
        },
        headerTintColor: '#fff',
      }),
    },
  });
  
  const Screen3_StackNavigator = StackNavigator({
    //All the screen from the Screen3 will be indexed here
    Third: {
      screen: Screen3,
      navigationOptions: ({ navigation }) =&gt; ({
        title: 'Screen3',
        headerLeft: &lt;NavigationDrawerStructure navigationProps={navigation} /&gt;,
        headerStyle: {
          backgroundColor: '#FF9800',
        },
        headerTintColor: '#fff',
      }),
    },
  });
  
  const DrawerNavigatorExample = DrawerNavigator({
    //Drawer Optons and indexing
    Screen1: { //Title
      screen: FirstActivity_StackNavigator,
    },
  
    Screen2: {//Title
      screen: Screen2_StackNavigator,
    },
  
    Screen3: {//Title
      screen: Screen3_StackNavigator,
    },
  });
  export default DrawerNavigatorExample;
  
  const styles = StyleSheet.create({
    MainContainer: {
      flex: 1,
      paddingTop: 20,
      alignItems: 'center',
      marginTop: 50,
      justifyContent: 'center',
    },
  });
  </code></pre>
  
  <p>And this is package.json</p>
  
  <pre><code>{
    "name": "DrawerNavigation",
    "version": "0.0.1",
    "private": true,
    "scripts": {
      "start": "node node_modules/react-native/local-cli/cli.js start",
      "test": "jest"
    },
    "dependencies": {
      "react": "16.6.1",
      "react-native": "0.57.5",
      "react-native-vector-icons": "^6.1.0",
      "react-navigation": "^3.0.0"
    },
    "devDependencies": {
      "babel-jest": "23.6.0",
      "jest": "23.6.0",
      "metro-react-native-babel-preset": "0.49.2",
      "react-test-renderer": "16.6.1"
    },
    "jest": {
      "preset": "react-native"
    }
  }
  </code></pre>
  
  <p>If I follow bellow sample also getting same error.</p>
  
  <p><a href="https://medium.com/@mehulmistri/drawer-navigation-with-custom-side-menu-react-native-fbd5680060ba" rel="noreferrer">https://medium.com/@mehulmistri/drawer-navigation-with-custom-side-menu-react-native-fbd5680060ba</a></p>
  
  <p><a href="https://i.stack.imgur.com/KuAXd.png" rel="noreferrer"><img src="https://i.stack.imgur.com/KuAXd.png" alt="enter image description here"></a></p>
  
  <p>Anybody can help please </p>