Combine TabNavigator and Drawernavigator

user_6823921 0
Viewed 908

I use react-navigation and want to use the TabNavigator and the DrawerNavigator together. I know that you can nest the navigators, but then just one link of the Drawer has my Tabs for instance.

I would like to have the tab navigation always visible and the drawer should be available.

Drawer slides over tabs

So the three tabs at the top should be always visible. And the drawer can slide out to link different scenes.

const CustomTabRouter = TabRouter({
  Tab1: {
    screen: Tab1,
    path: '1',
  },
  Tab2: {
    screen: Tab2,
    path: '2',
  },
  Tab3: {
    screen: Tab3,
    path: '3',
  },
}, {
  initialRouteName: 'Tab2',
})

const TabNavigation = createNavigationContainer(
  createNavigator(CustomTabRouter)(CustomTabView)
)

const AppNavigation = DrawerNavigator({
  Home: {
    screen: TabNavigation
  },
  ScreenOne: {
    screen: ScreenOne
  },
  ScreenTwo: {
    screen: ScreenTwo
  },
}, {
  headerMode: 'none',
  initialRouteName: 'Home',
  drawerPosition: 'right',
  contentComponent: props => Slider(props),
  contentOptions: {
    inactiveTintColor: Colors.primary,
    activeTintColor: Colors.orange,
    activeBackgroundColor: Colors.white
  },
})

But the problem with my code is that the tabs are only for one scene. Also tried StackNavigators but the has to be another solution to use both Navigators together.

tabnavigator navigation-drawer react-navigation react-native navigation
1 Answers

If you need to have the tabs visible always, you need to use the TabNavigation as your top level router and within that nest the other navigation options.

user_94988040
Related