'Twitter like drawer in react navigator using nested drawer and tab navigator

I want to achieve twitter like tab and drawer navigation, where there is a bottom tab bar in the home page and a drawer on the side. However, in twitter when clicking on the left drawer, it opens a page with the left drawer disabled and instead the page will have a back navigation that leads to the home page. This is the behavior I want, and how can I achieve that? (I don't want bottom tab in any of the page I opened from the side drawer, different from twitter)

Following is my code:

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

function Home() {
  const { signOut } = useAuth();
  return (
    <Tab.Navigator screenOptions={{ headerShown: false }}>
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Chat" component={Chat} />
    </Tab.Navigator>
  );
}

function DrawerHome() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen
        name="Start"
        component={Home}
        options={({ route }) => ({
          headerTitle: getHeaderTitle(route),
        })}
      />
      <Drawer.Screen name="Friends" component={FriendsList} />
    </Drawer.Navigator>
  );
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source