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

Answer 1

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