CODEWITHSUNDEEP
javascriptreactjsreact-nativeexpo
Dazzle
Dazzle

Reputation: 3083

How can I open Drawer Navigator inside a Tab view which is nested inside a Switch Nav?

I am finding the docs on createDrawerNavigator pretty difficult to follow in terms of nesting navigators.

I have 2 navigators and a Drawer Nav which I am not sure where to put

A = parent SwitchNavigator

const MainNavigator = createSwitchNavigator({
  AuthLoading: AuthLoadingScreen,
  Auth: AuthStack,
  App: AppStack,
}

B = AppStack TabNavigator

On one of the tabs inside TabNavigator, I would like to open a drawer navigator.

How do I do this? Should I create a separate drawer navigator and place it inside the Switch, or should I nest it inside the TabNavigator? I have tried both approaches and I can load the View inside the drawer, but not the drawer itself.

Upvotes: 0

Views: 1176

Answers (2)

John
John

Reputation: 11

Alright, wasted hours on this but I finally fixed the issue and can now open the drawer using the header button with this.props.navigation.openDrawer();, while having the drawer inside the tab navigator like this:

const MainNavigator = createBottomTabNavigator({
  YourScreenName: YourDrawerNavigatorComponent,
}

Just update to the latest react-navigation version 3.0.0, running the following command in your project's root folder: npm i react-navigation@^3.0.0 or yarn add react-navigation@^3.0.0, it released literally yesterday.

If you install react-navigation without specifiing a version, it will install the 2.18.2 version which has this issue!

Be sure to follow this guide after you install (Very important!): https://reactnavigation.org/blog/2018/11/17/react-navigation-3.0

You'll need to change a few things in your code by following the guide.

Troubleshoots: Be sure to clear caches and exit and reopen all your terminals, yes all of them.

Upvotes: 1

eth3rnit3
eth3rnit3

Reputation: 801

You need to create a new drawer navigator component, and then use this one as a screen

like this 

const MainNavigator = createBottomTabNavigator({
  YourScreenName: YourDrawerNavigatorComponent,
}

this article details everything https://medium.com/async-la/react-navigation-stacks-tabs-and-drawers-oh-my-92edd606e4db

Upvotes: 1

Related Questions