CODEWITHSUNDEEP
react-nativereact-navigation
RiahtaMei
RiahtaMei

Reputation: 5

(0,_reactNavigation.DrawerNavigator) is not a function

I am newbie in React Native. I wanna create simple drawer navigation, but I get error here.

I have done installed the react navigation. Here is the code:

import React, { Component } from 'react';

import {
StyleSheet,
Text,
View,
StatusBar ,
TouchableOpacity
} from 'react-native';

import { DrawerNavigator } from 'react-navigation';

import Screen1 from './Screen1';
import Screen2 from './Screen2'; 

const Drawer= DrawerNavigator({
    Home:{
        screen: Screen1
    },
    Home2:{
        screen: Screen2
    }
})

export default Drawer

I expect the screen consist drawer navigator.

but I get error:

(0,_reactNavigation.DrawerNavigator) is not a function

Upvotes: 0

Views: 6596

Answers (2)

Auticcat
Auticcat

Reputation: 4489

It's not DrawerNavigation but createDrawerNavigation.

If you are using react-navigation > V.4, these function has been moved to another repo. In you case, createDrawerNavigator is located in react-navigation-drawer so you need to install it (by using npm or yarn).

After that when you import it you just need to do:

import { createDrawerNavigator } from 'react-navigation-drawer';

and then just use it as you are already doing.

If you are using react-navigation version 2 or 3 it's 

import { createDrawerNavigator } from 'react-navigation';

without having to install any other library.

DrawerNavigator is used in react-navigation version 1.

Upvotes: 6

Rahul Mishra
Rahul Mishra

Reputation: 4573

Here are some steps you need to follow for setup the react navigation:

1) Import drawer navigator in your root file:

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

2) Then create the drawer navigation:

const AppDrawerNavigator = createDrawerNavigator({
    Home: {
        screen: Home
    },
    MyOrders: {
        screen: MyOrders
    },
});

3) Call your drawer navigator in stack navigator or switch navigator mine is Switch navigator:

const AppSwitchNavigator = createSwitchNavigator({
    InitialScreen: {
        screen: InitialScreen
    },
    Login: {
        screen: Login
    },
    Forgot: {
        screen: Forgot
    },
    SuccessMessage: {
        screen: SuccessMessage
    },
    Drawer: AppDrawerNavigator,
}, {
  initialRouteName: 'InitialScreen',
  headerMode: 'none',
  navigationOptions: {
    gesturesEnabled: false,
    header:null
  }
});

4) Import anywhere:

import { DrawerActions } from "react-navigation";

and call it with menu icon like

onPress={() => this.props.navigation.dispatch(DrawerActions.openDrawer())}

This will open your drawer navigator let me know if anything you need to help.

Upvotes: 1

Related Questions