Home Navigator with Drawer and Tabs (Binding React Navigation 5 to Eva Design System)

home.navigator.tsx

import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { BottomHomeScreen, DrawerHomeScreen, AboutScreen } from '@app-scenes/home';
import { TodoNavigator } from './todo.navigator';
import { ProfileNavigator } from './profile.navigator';
import { AppRoute } from './app-routes';

const Drawer = createDrawerNavigator();
const BottomTab = createBottomTabNavigator();

const HomeBottomNavigator = (): React.ReactElement => (
  <BottomTab.Navigator tabBarComponent={BottomHomeScreen}>
    <BottomTab.Screen name={AppRoute.TODO} component={TodoNavigator}/>
    <BottomTab.Screen name={AppRoute.PROFILE} component={ProfileNavigator}/>
  </BottomTab.Navigator>
);

export const HomeNavigator = (): React.ReactElement => (
  <Drawer.Navigator contentComponent={DrawerHomeScreen}>
    <Drawer.Screen name={AppRoute.HOME} component={HomeBottomNavigator}/>
    <Drawer.Screen name={AppRoute.ABOUT} component={AboutScreen}/>
  </Drawer.Navigator>
);