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

How can we help without inspecting your code? So please be more elaborate on asking question. — Samitha Nanayakkara, Nov 20 '18 at 08:21
replace **stacknavigator** by **StackNavigator** or **createStackNavigator**, capitalization matters! — Steve, Nov 20 '18 at 09:43

score 26 · Answer 1 · edited Sep 06 '19 at 02:48

26

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.

edited Sep 06 '19 at 02:48

Mateus Luiz

756
7
20

answered Jan 21 '19 at 10:34

Forhad

1,460
10
12

6

You should explain the steps and your code rather than posting only code as answer. – Suraj Kumar Jan 21 '19 at 10:36
This info is enough for him who got this problem ! That's why I didn't explain ! – Forhad Jan 21 '19 at 11:18
I mean you need to write some word I don't want to say you to write very big explanation. I think now it is correct. – Suraj Kumar Jan 21 '19 at 11:22
Per another comment below, this likely is because of a change between React-navigation 2.x and 3.x. – Ben Butzer Feb 01 '19 at 16:29

score 15 · Answer 2 · answered Nov 20 '18 at 09:56

15

Use createStackNavigator instead of stackNavigator.

answered Nov 20 '18 at 09:56

Stundji

855
7
17

score 6 · Answer 3 · answered Dec 03 '18 at 20:09

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

score 3 · Answer 4 · answered Jun 04 '19 at 09:45

3

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

answered Jun 04 '19 at 09:45

deepanshu katyal

631
1
8
18

2

Please take some time to improve your answer by adding some explanation to the it to better understand why your solution can work. – DaFois Jun 04 '19 at 10:13

score 3 · Answer 5 · answered Mar 16 '21 at 20:18

3

Just run below code

npm install @react-navigation/native

after that it will rock and roll

answered Mar 16 '21 at 20:18

Ram Vilash

31
1

score 1 · Answer 6 · answered Nov 20 '18 at 14:00

1

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 !

answered Nov 20 '18 at 14:00

MoHammaD ReZa DehGhani

559
2
8
25

here I am using StackNavigator,If I changed above getting can't find variable: StackNavigator – rams Nov 20 '18 at 14:07
check your code and see where you use StackNavigator and replace it with createStackNavigator im not sure but should help – MoHammaD ReZa DehGhani Nov 20 '18 at 14:10
ok did you linked your dependency ? like this : react-native link and : react-native link react-navigation – MoHammaD ReZa DehGhani Nov 20 '18 at 14:22
1

check app.json file above – rams Nov 20 '18 at 14:27
not solved, tried this sample https://medium.com/@mehulmistri/drawer-navigation-with-custom-side-menu-react-native-fbd5680060ba but getting same error – rams Nov 21 '18 at 06:46
its may because of your sdk25 i post an answer check it out i hope your problem be solved – MoHammaD ReZa DehGhani Nov 21 '18 at 08:02
@rams the example you used is outdated. You are at version 3.0.0 but this code is for 1.*.* maybe have a look at this one https://snack.expo.io/@react-navigation/auth-flow-v2 – Der_D Nov 22 '18 at 07:53
did you install the sdk 25 ? – MoHammaD ReZa DehGhani Nov 25 '18 at 01:39

score 1 · Answer 7 · answered Dec 21 '18 at 08:04

1

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

answered Dec 21 '18 at 08:04

Dzuhri Andika

11
1
1

1

another solutions, downgrade react-navigation to version 2.17.0 – Dzuhri Andika Dec 26 '18 at 07:59

score 1 · Answer 8 · answered Sep 06 '19 at 12:05

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

score 0 · Answer 9 · answered Nov 21 '18 at 08:01

0

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

Open Android Studio
Open SDK Manager
Click SDK Platforms Tab
Select android 7.1.1 (Nougat) API level is 25
Apply

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

answered Nov 21 '18 at 08:01

MoHammaD ReZa DehGhani

559
2
8
25

score 0 · Answer 10 · answered Nov 22 '18 at 07:50

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

I think the problem is :

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

score 0 · Answer 11 · answered Feb 04 '19 at 04:59

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

score 0 · Answer 12 · answered Jul 14 '19 at 12:48

0

Try with

npm i react-navigation@1.0.0-beta.23

answered Jul 14 '19 at 12:48

Sushil Dhayal

87
1
6

score 0 · Answer 13 · answered Feb 15 '21 at 11:21

0

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';

answered Feb 15 '21 at 11:21

Tanzeel Ahmed

49
7

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

13 Answers13

Linked