Nest Tab Component inside Drawer but each drawer component must have in sync with Tab Component

Question

I have Tab component nested inside a Drawer Component. If I click Home on the Drawer Nav, I go to home page (home tab) having bottom tab. But if I click for other screens on the drawer, I go to those pages but they don't have the bottom tab. Instead of recreating same tab component for each screen, how do I have this bottom tab visible on all screens. And I should be able to navigate between all screens both on drawer and on bottom tab.

I mean, if I click Details Screen on the Drawer Nav, I should see the same screen when I click Details Screen on the bottom nav.

My current code Root Drawer

    <NavigationContainer>

      <Drawer.Navigator
        drawerContent={(props) => <DrawerContent {...props} />}
        screenOptions={{
          title: 'Root Drawer',
          headerShown: false,
        }}
      >
        <Drawer.Screen name="HomeTab" options={{ title: "Tab Navigation" }} component={RootTab} />
        <Drawer.Screen name="SettingStack" component={SettingStack} />
        <Drawer.Screen name="StorageStack" component={AsyncStorageStack} />
        <Drawer.Screen name="ContactStack" component={ContactStack} />
        <Drawer.Screen name="AboutStack" component={AboutStack} />
      </Drawer.Navigator>
    </NavigationContainer>

Root Tab

/* ------------------------------
.            ICONS
------------------------------ */
import MCIcon from 'react-native-vector-icons/MaterialCommunityIcons';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import IconF5 from 'react-native-vector-icons/FontAwesome5';
import IconAntDesign from 'react-native-vector-icons/AntDesign';
import IconEntypo from 'react-native-vector-icons/Entypo';
/* ------------------------------
------------------------------ */



import React from 'react'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native';

// __________store (redux + async)
import { connect } from 'react-redux';

import { IRootState } from '../store/store';
import { IAppSettingState } from '../store/reducers/appSettingsReducer';
import { updateIsDarkTheme, updateIsSoundOn, updateIsVibrationOn, updateThemeColor } from '../store/actions/appSettingsAction';

import rootVariables from '../root/rootVariables';

// __________screens and/or stacks
import HomeStack from './stacks/HomeStack';
import AboutStack from './stacks/AboutStack';
import SettingStack from './stacks/SettingStack';
import ContactStack from './stacks/ContactStack';
import AsyncStorageStack from './stacks/AsyncStorageStack';

interface propsInterface extends IAppSettingState {
  updateThemeColor: typeof updateThemeColor,
  updateIsDarkTheme: typeof updateIsDarkTheme,
  updateIsVibrationOn: typeof updateIsVibrationOn,
  updateIsSoundOn: typeof updateIsSoundOn,
}

const Tab = createBottomTabNavigator();

function RootTab(props: propsInterface) {
  return (
    <Tab.Navigator
      screenOptions={{
        title: "Root tab",
        headerShown: false,
        tabBarShowLabel: false,

        tabBarStyle: {
          position: 'absolute',
          bottom: 15,
          left: 10,
          right: 10,
          backgroundColor: rootVariables.bottomTabBG,
          borderRadius: 15,
          height: 70,
          ...styles.shadow,
        },

      }}
    >
      <Tab.Screen name="HomeStack" component={AsyncStorageStack}
        options={{
          title: "DictionaryStack",
          tabBarIcon: ({ focused }) => (
            <View style={{ alignItems: 'center', justifyContent: 'center' }}>
              <IconF5
                name="biohazard"
                color={focused ? props.themeColor : rootVariables.fontColor}
                size={27}
              />
              <Text style={{ color: focused ? props.themeColor : rootVariables.fontColor, fontSize: 12 }}>
                Dashboard
              </Text>
            </View>
          )
        }}
      />

      <Tab.Screen name="CardGridStack" component={ContactStack}
        options={{
          title: "CardGridStack",
          tabBarIcon: ({ focused }) => (
            <View style={{ alignItems: 'center', justifyContent: 'center' }}>
              <MCIcon
                name="heart-broken"
                color={focused ? props.themeColor : rootVariables.fontColor}
                size={27}
              />
              <Text style={{ color: focused ? props.themeColor : rootVariables.fontColor, fontSize: 12 }}>
                Jobs
              </Text>
            </View>
          )
        }}
      />

      <Tab.Screen name="SettingStack" component={SettingStack}
        options={{
          title: "SettingStack",
          tabBarIcon: ({ focused }) => (
            <View style={{ alignItems: 'center', justifyContent: 'center' }}>
              <MCIcon
                name="database-marker"
                color={focused ? props.themeColor : rootVariables.fontColor}
                size={27}
              />
              <Text style={{ color: focused ? props.themeColor : rootVariables.fontColor, fontSize: 12 }}>
                CRM
              </Text>
            </View>
          )
        }}
      />
      
      <Tab.Screen name="XAboutStack" component={AboutStack}
        options={{
          title: "AboutStack",
          tabBarIcon: ({ focused }) => (
            <View style={{ alignItems: 'center', justifyContent: 'center' }}>
              <IconF5
                name="users"
                color={focused ? props.themeColor : rootVariables.fontColor}
                size={27}
              />
              <Text style={{ color: focused ? props.themeColor : rootVariables.fontColor, fontSize: 12 }}>
                Source
              </Text>
            </View>
          )
        }}
      />

      <Tab.Screen name="XXAboutStack" component={AboutStack}
        options={{
          title: "AboutStack",
          tabBarIcon: ({ focused }) => (
            <View style={{ alignItems: 'center', justifyContent: 'center' }}>
              <MaterialIcon
                name="admin-panel-settings"
                color={focused ? props.themeColor : rootVariables.fontColor}
                size={27}
              />
              <Text style={{ color: focused ? props.themeColor : rootVariables.fontColor, fontSize: 12 }}>
                Admin
              </Text>
            </View>
          )
        }}
      />

      <Tab.Screen name="XXXAboutStack" component={AboutStack}
        options={{
          title: "AboutStack",
          tabBarIcon: ({ focused }) => (
            <View style={{ alignItems: 'center', justifyContent: 'center' }}>
              <MCIcon
                name="google-analytics"
                color={focused ? props.themeColor : rootVariables.fontColor}
                size={27}
              />
              <Text style={{ color: focused ? props.themeColor : rootVariables.fontColor, fontSize: 12 }}>
                Analytics
              </Text>
            </View>
          )
        }}
      />

    </Tab.Navigator>
  )
}

const styles = StyleSheet.create({
  shadow: {
    shadowColor: '#7f5df0',
    shadowOffset: {
      width: 0,
      height: 10,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.5,
    elevation: 5
  }
})


const mapStateToProps = (state: IRootState) => {
  return {
    ...state.app,
  }
}
const mapDispatchToProps = {
  updateThemeColor,
  updateIsDarkTheme,
  updateIsVibrationOn,
  updateIsSoundOn,
}


export default connect(mapStateToProps, mapDispatchToProps)(RootTab)