Argthtjtr

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

Use createStackNavigator instead of stackNavigator.

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 !

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.

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)

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

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