Undefined is not a function near _reactNavigation.StackNavigator

Question

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:

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

Solution

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

Comments

[davidesp]

thank you @ChrisPoe. I prefer to use the latest version of react-navigation. I tried your approach using the functions instead but I'm still getting the error. Here is the snack.expo.io project. Could you maybe fix that? snack.expo.io/rksUWzDZE and provide me the solution back? Thanks!

[Chris Poe]

@davidesp sure all fixed snack.expo.io/@chris-bytelion/react-s. You were getting that error because createTabNavigator is not an import option in the newer versions. Your options are createBottomTabNavigator, createMaterialBottomTabNavigator, and createMaterialTopTabNavigator as stated here: reactnavigation.org/docs/en/tab-based-navigation.html. Also, within your app.js make sure you import AppNavigator instead of Drawer since you wrapped the root navigator with createAppContainer.

[Chris Poe]

Happy to help! @davidesp