DrawerNavigator to show tab bar all the time with every option tapped

Question

I am trying to have a tab bar and each tab bar has its own stack navigator. Three tabs that i have are Home Profile Settings

I want to show these three options in the drawer also. I have created a drawer but only tapping home shows the tab bar. I want to show tab bar just like if you press of profile tab and tab bar remains there.

Here is my code:

const HomeStackNavigator = createStackNavigator();
export const HomeNavigator = () => {
  return (
    <HomeStackNavigator.Navigator screenOptions={defaultNavOptions}>
      <HomeStackNavigator.Screen
        name="Home"
        component={HomeScreen}
        options={homeScreenOptions}
      />
       <HomeStackNavigator.Screen
        name="Details"
        component={DetailsScreen}
        options={detailsScreenOptions}
      />
    </HomeStackNavigator.Navigator>
  );
};

const ProfileStackNavigator = createStackNavigator();
export const ProfileNavigator = () => {
  return (
    <ProfileStackNavigator.Navigator screenOptions={defaultNavOptions}>
      <ProfileStackNavigator.Screen
        name="Profile"
        component={ProfileScreen}
        options={profileScreenOptions}
      />
       <ProfileStackNavigator.Screen
        name="EditProfile"
        component={EditProfileScreen}
        options={editProfileScreenOptions}
      />
    </ProfileStackNavigator.Navigator>
  );
};

const SettingsStackNavigator = createStackNavigator();
export const SettingsNavigator = () => {
  return (
    <SettingsStackNavigator.Navigator screenOptions={defaultNavOptions}>
      <SettingsStackNavigator.Screen
        name="Settings"
        component={SettingsScreen}
        options={settingsScreenOptions}
      />
       <SettingsStackNavigator.Screen
        name="AccountDetail"
        component={AccountDetailsScreen}
        options={accountDetailsScreenOptions}
      />
    </SettingsStackNavigator.Navigator>
  );
};




const HomeTabNavigator = createBottomTabNavigator();
export const TabNavigator = () => {
  return (
    <HomeTabNavigator.Navigator screenOptions={defaultNavOptions}>
      <HomeTabNavigator.Screen
        name="Home"
        component={HomeNavigator}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />
       <HomeTabNavigator.Screen
        name="Profile"
        component={ProfileNavigator}
        options={{
          tabBarLabel: 'Profile',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="face-profile" color={color} size={size} />
          ),
        }}
      />
      <HomeTabNavigator.Screen
        name="Settings"
        component={SettingsNavigator}
        options={{
          tabBarLabel: 'Settings',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="account-settings" color={color} size={size} />
          ),
        }}
      />
    </HomeTabNavigator.Navigator>
  );
};



const AppDrawer = createDrawerNavigator();
export const Drawer = () => {
  return(
      <AppDrawer.Navigator initialRouteName="Home">
        <AppDrawer.Screen name="Home" component={TabNavigator} />
        <AppDrawer.Screen name="Profile" component={ProfileNavigator} />
        <AppDrawer.Screen name="Settings" component={SettingsNavigator} />
      </AppDrawer.Navigator>
  )
};

My goal is to have tabs all the time. Tabs should hide only if we go to the detail page of any of the tabs.

Answer 1

Maybe something like this:

    var memo = 'BRD-35/21/9: DSI-35/21/641 - 154.0, DSI-35/21/617 - 84.0, TI-23/21223/12 - 78.98';
    console.log([...memo.matchAll(/[,|:]\s([A-Z0-9\/-]*)/g)].map(function(el){return el[1];}));

Answer 2

The following regex should do what you want:

(DSI|TI)-\d+\/\d+\/\d+

Match DSI or TI followed by a -, then 3 digits separated by /.