getting undefined is not a function (evaluating '(0,_reactNavigation.stacknavigator)') in drawer navigation

Question

In my application I need drawer navigation, for that I am using sample code from this. I have integrated everything in my application, but getting the following error

undefined is not a function (evaluating '(0,_reactNavigation.stacknavigator)')

And installed this one too.

npm install react-navigation --save

But don't know why this error is coming, So please guide me how to resolve this.

This is my app.js

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 = () => {
    //Props to open/close the drawer
    this.props.navigationProps.toggleDrawer();
  };
  render() {
    return (
      <View style={{ flexDirection: 'row' }}>
        <TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
          {/*Donute Button Image */}
          <Image
            source={require('./image/drawer.png')}
            style={{ width: 25, height: 25, marginLeft: 5 }}
          />
        </TouchableOpacity>
      </View>
    );
  }
}

class Screen1 extends Component {
  //Screen1 Component
  render() {
    return (
      <View style={styles.MainContainer}>
        <Text style={{ fontSize: 23 }}> Screen 1 </Text>
      </View>
    );
  }
}

class Screen2 extends Component {
  //Screen2 Component
  render() {
    return (
      <View style={styles.MainContainer}>
        <Text style={{ fontSize: 23 }}> Screen 2 </Text>
      </View>
    );
  }
}

class Screen3 extends Component {
  //Screen3 Component
  render() {
    return (
      <View style={styles.MainContainer}>
        <Text style={{ fontSize: 23 }}> Screen 3 </Text>
      </View>
    );
  }
}

const FirstActivity_StackNavigator = StackNavigator({
  //All the screen from the Screen1 will be indexed here 
  First: {
    screen: Screen1,
    navigationOptions: ({ navigation }) => ({
      title: 'Screen1',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});

const Screen2_StackNavigator = StackNavigator({
  //All the screen from the Screen2 will be indexed here
  Second: {
    screen: Screen2,
    navigationOptions: ({ navigation }) => ({
      title: 'Screen2',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});

const Screen3_StackNavigator = StackNavigator({
  //All the screen from the Screen3 will be indexed here
  Third: {
    screen: Screen3,
    navigationOptions: ({ navigation }) => ({
      title: 'Screen3',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      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',
  },
});

And this is package.json

{
  "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"
  }
}

If I follow bellow sample also getting same error.

https://medium.com/@mehulmistri/drawer-navigation-with-custom-side-menu-react-native-fbd5680060ba

Anybody can help please

Answer 1

Just run below code

npm install @react-navigation/native 

after that it will rock and roll

Answer 2

I was having the same error. The problem was with my import statement

import createStackNavigator from 'react-navigation-stack';

must be

import { createStackNavigator } from 'react-navigation-stack';

Answer 3

Refer the react-navigation steps then it is easy. Visit https://reactnavigation.org/docs/en/hello-react-navigation.html

import React from 'react';
import { View, Text, Button } from 'react-native';
import { createAppContainer } 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 Profile... again"
          onPress={() => this.props.navigation.push('Profile')}
        />
      </View>
    );
  }
}
class ProfileScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Profile Screen</Text>
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate('Home')}
        />
        <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}
const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Profile: ProfileScreen
  },
  {
    initialRouteName: 'Home',
  }
);
const AppContainer = createAppContainer(AppNavigator);
export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

Answer 4

I hope this one will help you, It helped me!

App.js

import { createStackNavigator, createAppContainer } from 'react-navigation';
import HomeScreen from './yourScreenPath';

const AppNavigator = createStackNavigator({
  Home: { screen: HomeScreen }
});

export default createAppContainer(AppNavigator);

Check out the Link: React Navigation

Edit:

The newer versions doesn't have createStackNavigator, now the function can be found at React Navigation Stack.

Answer 5

Try with

npm i react-navigation@1.0.0-beta.23

Answer 6

# Use of react-navigation (3.x) version ^3.0.0 #

import {
    createDrawerNavigator,
    createStackNavigator,
    createBottomTabNavigator,
    createAppContainer,
} from 'react-navigation';


const AppNavigator = createStackNavigator({
  Home: { screen: HomeScreen }
});

export default createAppContainer(AppNavigator);

Answer 7

You have to use React.Component instead of Component for all classes. I too faced the same issue and its working now with this minor fix

class Screen2 extends React.Component {
  //Screen2 Component
  render() {
    return (
      <View style={styles.MainContainer}>
        <Text style={{ fontSize: 23 }}> Screen 2 </Text>
      </View>
    );
  }
}

Answer 8

in package.json edit react-navigation to '^2.17.0' NEXT restart your pc

Answer 9

I stumbled upon this because I was experiencing the same error message. Besides createStackNavigator as opposed to StackNavigator. The issue was that I upgraded to 3.x and, new in 3 is createAppContainer.

Now, instead of

export default DrawerNavigatorExample;

you need to have

export default createAppContainer(DrawerNavigatorExample)

Hope this saves someone else the hour I spent researching this :/

link to docs

Answer 10

you could have a look at this example code here: https://snack.expo.io/@eriveltonelias/stack-actions

I think the problem is :

1. with stackNavigator, you should use createStackNavigator (https://reactnavigation.org/docs/en/stack-navigator.html) and
2. instead of drawerNavigator use createDrawerNavigator (https://reactnavigation.org/docs/en/drawer-navigator.html)

Answer 11

This issue can be for haven't installed Android SDK platform 25 Do this :

1. Open Android Studio
2. Open SDK Manager
3. Click SDK Platforms Tab
4. Select android 7.1.1 (Nougat) API level is 25
5. Apply

After installing that press OK and try again to build the project.

Answer 12

Replace this Code :

import { createDrawerNavigator, createStackNavigator } from 'react-navigation';

With this import of your project :

import { DrawerNavigator, StackNavigator } from 'react-navigation';

i hope this help you !

Answer 13

Use createStackNavigator instead of stackNavigator.