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

Sirocco

How can we help without inspecting your code? So please be more elaborate on asking question. – Calcariferous

replace stacknavigator by StackNavigator or createStackNavigator, capitalization matters! – Itemized

Answer 1

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.

Firecracker

You should explain the steps and your code rather than posting only code as answer. – Agriculturist

This info is enough for him who got this problem ! That's why I didn't explain ! – Firecracker

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. – Agriculturist

Per another comment below, this likely is because of a change between React-navigation 2.x and 3.x. – Potheen

Answer 2

Use createStackNavigator instead of stackNavigator.

Floodgate

Answer 3

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

Narceine

Answer 4

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

Aeroneurosis

Please take some time to improve your answer by adding some explanation to the it to better understand why your solution can work. – Presidentship

Answer 5

Just run below code

npm install @react-navigation/native 

after that it will rock and roll

Modernistic

Answer 6

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 !

Empathic

here I am using StackNavigator,If I changed above getting can't find variable: StackNavigator – Sirocco

check your code and see where you use StackNavigator and replace it with createStackNavigator im not sure but should help – Empathic

ok did you linked your dependency ? like this : react-native link and : react-native link react-navigation – Empathic

check app.json file above – Sirocco

not solved, tried this sample medium.com/@mehulmistri/… but getting same error – Sirocco

its may because of your sdk25 i post an answer check it out i hope your problem be solved – Empathic

@Sirocco 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 snack.expo.io/@react-navigation/auth-flow-v2 – Ejaculate

did you install the sdk 25 ? – Empathic

Answer 7

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

Spry

another solutions, downgrade react-navigation to version 2.17.0 – Spry

Answer 8

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

Alti

Answer 9

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.

Empathic

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)

Ejaculate

Answer 11

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

Creamy

Answer 12

Try with

npm i [email protected]

Turner

Answer 13

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

Margiemargin