CODEWITHSUNDEEP
react-nativereact-navigationjsxexpo
davidesp
davidesp

Reputation: 3972

Undefined is not a function near _reactNavigation.StackNavigator

I want to setup a React Native app with a side menu and a tab menu at the same time.

I was following this tutorial.

My code.

I get the error:

undefined is not a function (near '...(0 , _reactNavigation.TabNavigator)...')

Which you can see here:

enter image description here

Preview of some of the files:

App.js

import React from 'react';
import { Drawer } from './src/navigators';

export default class App extends React.Component {
  render() {
    return (
      <Drawer />
    );
  }
}

navigators.js

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';

// Navigators
import { DrawerNavigator, StackNavigator, TabNavigator } from 'react-navigation'

// StackNavigator screens
import ItemList from './ItemList'
import Item from './Item'

// TabNavigator screens
import TabA from './TabA'
import TabB from './TabB'
import TabC from './TabC'

// Plain old component
import Plain from './Plain'

export const Stack = StackNavigator({
  ItemList: { screen: ItemList },
  Item: { screen: Item },
}, {
  initialRouteName: 'ItemList',
})

export const Tabs = TabNavigator({
  TabA: { screen: TabA },
  TabB: { screen: TabB },
  TabC: { screen: Stack },
}, {
  order: ['TabA', 'TabB', 'TabC']
})

export const Drawer = DrawerNavigator({
  Stack: { screen: Stack },
  Tabs: { screen: Tabs },
  Plain: { screen: Plain },
})

Upvotes: 4

Views: 13073

Answers (2)

Jos&#233; J&#250;nior
Jos&#233; J&#250;nior

Reputation: 611

In my case, the fix was this one:

"react-navigation": "^1.5.2"

In package.json.

Upvotes: 0

Chris Poe
Chris Poe

Reputation: 808

Your imports from React Navigation are not correct for the version you are using (3.0.9). Those named exports were renamed after v1 which is what the tutorial you are following is using.

You are importing:

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

When you need to import them as such:

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

You also need to wrap your root navigator, in this case your Drawer navigator, in createAppContainer.

Like so:

export const Drawer = createAppContainer(
  createDrawerNavigator({
    Stack: { screen: Stack },
    Tabs: { screen: Tabs },
    Plain: { screen: Plain },
  })
);

If you would like a quick fix then just go into your package.json and replace the version of React Navigation from "react-navigation": "^3.0.9" to "react-navigation": "^1.5.2" and the Snack will run as expected https://snack.expo.io/@chris-bytelion/react-s

Upvotes: 7

Related Questions