Using Tabs with Drawer

Hi! o/

I’m started a project with Tab navigation. So I have the navigation/RootNavigation.js and navigation/MainTabNavigator.js file.

Everything are ok with my routes and tab. But when I tried to add a drawer in the same screen of my tabs. I get stranges behaviors.
My code:

RootNavigation.js: RootNavigation.js -
MainTabNavigator.js: MainTabNavigator.js -

Basically, I added “TabNavigator” to “DrawerNavigator”. And the “DrawerNavigator” to “StackNavigator”

Now I have two types of screen:

Type One:
Screen with Tabs and Drawer

Type Two:
Screen without Tabs and Drawer (just a Header with back button and title)

My screen Type One works “fine”. (I just cannot make the drawer show above the header, but it’s another problem)

But the Type Two, when I click in “back button” (on header) I get back to home screen (initialRoute). The expected are get to previews screen (like: navigation.goBack()). The physical button on android device works fine.

The problem depends on where the header is defined.
Your routes are defined as follows:

  • Root
    • Homescreen
    • Main (drawer)
      • Tabs
        • Home
        • Map
        • Settings

If you navigate from Homescreen to Main, then move around different tabs, hitting back is in the context of Root, and Root only navigated to Main, so it will take you back to Homescreen. You need to set your Main header to null, then add a Header to the Tabs Navigator.

After all these days I solved my problem. :slight_smile:

I created a new header and hide the default header component on my tabs screens. And it’s worked. :slight_smile:

Thanks for the help Buishi!

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.