undefined is not an object (evaluating '(0 _reactnavigation.DrawerNavigator)')

Question

I have created customized sidebar and have 5 to 6 screens. I am using NativeBase and want to open Sidebar with DrawerNavigator option but when I applied following code it was getting issue.

Drawer Navigator code

import React, { Component } from "react";
import WelcomeScreen from './screens/WelcomeScreen';
import ContactScreen from './screens/ContactScreen';
import DepartmentScreen from './screens/DepartmentScreen';
import EmailServiceScreen from './screens/EmailServiceScreen';
import MoreScreen from './screens/MoreScreen';
import SideBar from "./SideBar.js";
import { DrawerNavigator } from "react-navigation";

const SidebarNavigator = DrawerNavigator(
  {
    Home: { screen: WelcomeScreen },
    Contact: { screen: ContactScreen },
    Department: { screen: DepartmentScreen },
    EmailService: { screen: EmailServiceScreen },
    More: { screen: MoreScreen }
  },
  {
    contentComponent: props => <SideBar {...props} />
  }
);
export default SidebarNavigator;

Calling them in APP.Js as propos. See following code from APP.JS


import SidebarNavigator from './src/SidebarNavigator';

class App extends Component {
  render() {
    const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
    return (
      <Provider store={createStore(reducers)}>
          <Root>
            <Router /> // It's a stack navigator which is working fine
            <SidebarNavigator />
          </Root>
      </Provider>
    );
  }
}

console.disableYellowBox = true;
export default App;

score 0 · Answer 1 · answered Sep 04 '19 at 07:08

0

The error here is that you are using DrawerNavigation instead of createDrawerNavigator.

Just do those changes and you should be good

import { createDrawerNavigator } from "react-navigation";

...

const SidebarNavigator = createDrawerNavigator( ... )

Source: https://reactnavigation.org/docs/en/drawer-navigator.html

answered Sep 04 '19 at 07:08

Auticcat

4,359
2
13
28

When I applied that code I faced following issue https://www.dropbox.com/s/6t0gpd8lvn41ig8/Screenshot%202019-09-04%2012.14.23.png?dl=0 – MMuzammilQ Sep 04 '19 at 07:14

score 0 · Answer 2 · answered Sep 04 '19 at 13:38

You can try this code

You can use createDrawerNavigator and createAppContainer

import { createDrawerNavigator, createAppContainer } from "react-navigation";

...

const SidebarNavigator = createDrawerNavigator( ... )

const AppContainer = createAppContainer(SidebarNavigator);

// Now AppContainer is the main component for React to render

export default AppContainer;

undefined is not an object (evaluating '(0 _reactnavigation.DrawerNavigator)')

2 Answers2