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

subs is not a function react-native
undefined is not a function (evaluating 'instance.render()') react native
undefined is not a function react-native stacknavigator
createstacknavigator is not a function
typeerror is not a function react native
switch navigator is not a function
typeerror 0 native createnavigator factory is not a function
createswitchnavigator is not a function

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

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.

TypeError: undefined is not a function (evaluating 'addListener , Also, if I did wrong setup on create store, shouldn't I get an error while adding listener to my navigation prop ? In my case I am not getting any  TypeError: undefined is not a function (evaluating 'store.getState ()') so i'm trying to build a simple pages that ask an input and provides a button. when the button pressed, the pages should alert the value of the input. but not taking the value from the inputbox..

Use createStackNavigator instead of stackNavigator.

TypeError: 'undefined' is not a function (evaluating '$(document , I'm including this script in the header. When the script loads, I get this error: TypeError: 'undefined' is not a function (evaluating '$(document)'). Thanks for contributing an answer to Stack Overflow! Please be sure to answer the question.Provide details and share your research! But avoid …. Asking for help, clarification, or responding to other answers.

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

React Native: undefined is not a function(evaluating '(0 , undefined is not a function(evaluating '(0, _reactNavigation.StackNavigator)'). I was able to track the error to my RootStackNavigator, defined  Not sure if this helps, but I had the same issue: iOS installation looked solid (libCodePush.a added, libz.tbd added, AppDelegate.m updated) but CodePush remained undefined after import and I got the [CodePush] The CodePush module doesn't appear to be properly installed.

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

Top 10 JavaScript errors from 1000+ projects (and how to avoid them), TypeError: 'undefined' is not an object (evaluating You will get this error if the DOM elements have not been created before loading the This is equivalent to the error "TypeError: 'undefined' is not a function" in Chrome. undefined is not a function (evaluating 'Object.getOwnPropertyNames(argument[i]) #23091. Closed radjivF opened this issue Jan 22, 2019 · 5 comments Closed

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

PhantomJS Error rendering chart: TypeError: 'undefined' is not a , Wiki » PhantomJS Error rendering chart: TypeError: 'undefined' is not a function (evaluating 'e. In process you get the following error:. If you try that in CodePen or in Chrome it works but will not in the Treehouse code challenage compiler..getElementsByTagName('li') passes challenge because the question asks to select only the li's, not the whole ul object.

TypeError: 'undefined' is not a function (evaluating, Hi I'm getting an error, but it is not affecting the result of the code. TypeError: '​undefined' is not a function (evaluating '( (jQuery.event.special[  08-15 02:27:24.340 18745 18806 E ReactNativeJS: undefined is not a function (evaluating 'React.createClass') in LightboxOverlay.js I did update PropTypes to be used from prop-types library since it doesn't seem to work with React.PropTypes anymore (this problem did show up in other node_modules, but prop-types lib seems to have fixed it) but

TypeError: 'undefined' is not a function (evaluating '$('textarea[id , mentionsTextcomplete = { attach: function () { var settings = Drupal.settings.​mentions.textcomplete TypeError: 'undefined' is not a function (evaluating '$('​textarea[id^="' + form + libraries[textcomplete][download][type] = get "undefined is not a function (evaluation 'object.getOwnPropertyDescriptors (arguments [i])')" even though the code is not I add a little bit of input and that makes me crazy

T112287 TypeError: undefined is not a function (evaluating , TypeError: undefined is not a function (evaluating "[Error] TypeError: performance.mark is not a function. Getting it myself at odd times. undefined is not a function (evaluating 'transform.forEach') I had node version 6.10.3 and React Native version 2.0.1 and npm version 3.10.10. I am using windows 10 (64 bit).

Comments
  • How can we help without inspecting your code? So please be more elaborate on asking question.
  • replace stacknavigator by StackNavigator or createStackNavigator, capitalization matters!
  • You should explain the steps and your code rather than posting only code as answer.
  • This info is enough for him who got this problem ! That's why I didn't explain !
  • 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.
  • Per another comment below, this likely is because of a change between React-navigation 2.x and 3.x.
  • Please take some time to improve your answer by adding some explanation to the it to better understand why your solution can work.
  • here I am using StackNavigator,If I changed above getting can't find variable: StackNavigator
  • check your code and see where you use StackNavigator and replace it with createStackNavigator im not sure but should help
  • ok did you linked your dependency ? like this : react-native link and : react-native link react-navigation
  • check app.json file above
  • not solved, tried this sample medium.com/@mehulmistri/… but getting same error
  • another solutions, downgrade react-navigation to version 2.17.0