How to use the Drawer and Tab navigation together in react-native with ex-navigation

Question

I'm building an app in react-native and implement navigation with ex-navigation. I want to use the TabNav to offer quick access to the most used features and to use the DrawerNav for features that should be available but are not used that often.

I searched and tried myself but I cannot have a drawer and tab navigation together. The ex-navigation example app has both but not together. It starts with the drawer nav and when I click on the Tab nav example the drawer icon is gone.

Does anyone have some tips/hints how to get this done?

Answer 1

Have you tried putting the Navigation Tab Screen inside the Navigation?

Router.js

import React, { Component } from 'react';
import { createRouter } from '@expo/ex-navigation';
import NavigationDrawer from './NavigationDrawer';
import NavigationTab from './NavigationTab';

export const Router = createRouter(() => ({
  navigationDrawer : () => NavigationDrawer,
  navigationTab : () => NavigationTab
}));

NavigationDrawer.js

import React, { Component } from 'react';
import {
  StackNavigation,
  DrawerNavigation,
  DrawerNavigationItem,
} from '@expo/ex-navigation';
import { Router } from './Router';

export default class NavigationDrawer extends Component{
  render(){
    return(
      <DrawerNavigation
        drawerPosition="left"
        drawerWidth={300}
        initialItem="navigationTab" >
        <DrawerNavigationItem
          id="home"
          selectedStyle={{backgroundColor: '#E8E8E8',}}
          renderTitle={isSelected => renderTitle('Home', isSelected)}
          renderIcon={isSelected => renderIcon('home', isSelected)}
        >
          <StackNavigation
            id="navigationTab"
            initialRoute={Router.getRoute('navigationTab')}
            defaultRouteConfig={{
              navigationBar: {
                backgroundColor: '#0084FF',
                tintColor: '#fff',
                title: 'NavigationTab',
              },
            }}
          />
        </DrawerNavigationItem>
      </DrawerNavigation >
    );
  }
} 

NavigationTab.js

import React, { Component } from 'react';
import {
  StackNavigation,
  TabNavigation,
  TabNavigationItem,
} from '@expo/ex-navigation';
import { Router } from './Router';

export default class NavigationTab extends Component {
  render() {
    return (
      <TabNavigation
        initialTab="first"
        initialItem="first"
        <TabNavigationItem
          id="first"
          title="First"
        >
        {/*content*/}
        </TabNavigationItem>
        <TabNavigationItem
          id="second"
          title="Second"
        >
        {/*content*/}
        </TabNavigationItem>
        <TabNavigationItem
          id="third"
          title="Third"
        >
        {/*content*/}
        </TabNavigationItem>
      </TabNavigation>
    )
  }
}

With this approach, Drawer and Tab Navigation can be used together, but when you select an item from the drawer menu (with stack navigation), the screen with tab will be replaced.

If you want it the tab to exists in each screen from the drawer menu, you'll need to add the tab in each of those screen (which I think should be unnecessary).