Combine Stack, Drawer and Tab navigator in react-native

Question

I've currently built, this navigation system but I feel like i've got it a bit wrong as in the order of things. I'm slowly developing issues such as not being able to hide the drawer navigator on certain screens of the tav navigator and etc..

Would someone be able to help me organise the navigation so that it makes a bit more sense?

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const Tab = createMaterialTopTabNavigator();

 const SwipeTabNavigator = () => {
 return (
     <Tab.Navigator
     sceneContainerStyle={{
       backgroundColor: theme['primaryColor'],
    }}
  tabBarOptions={{
    style: {
      display: 'none',
      backgroundColor: '#08457e',
    },
  }}>
  <Tab.Screen name="Component1" component={Component1} />
  <Tab.Screen name="Component2" component={Component2} />
  <Tab.Screen name="Component3" component={Component3} />
</Tab.Navigator>
);
};

 const MainStackNavigator = () => {
 return (
   <Stack.Navigator
     screenOptions={{
      cardStyle: {backgroundColor: theme['primaryColor']},
      header: () => <MenuComponent />,
     }}>
       <Stack.Screen name="Login" component={LoginScreen} />
       <Stack.Screen name="SwipeTabNavigator" component={SwipeTabNavigator} />
       <Stack.Screen name="List" component={ListScreen} />
       <Stack.Screen name="Detail" component={DetailScreen} />
     </Stack.Navigator>
    );
   };

   const App = () => {
   return (
<Root>
  <NavigationContainer>
    <Drawer.Navigator
      screenOptions={{swipeEnabled: false}}
      drawerContent={(props) => <SidebarComponent {...props} />}
      initialRouteName="Login">
      <Drawer.Screen name="List" component={MainStackNavigator} />
    </Drawer.Navigator>
  </NavigationContainer>
</Root>
  );
};

export default App;

After user logs in the navigation navigates to "SwipeTabNavigator", and I would like the drawer to be available at each screen :/

Any refactor help would be a blessing, thank you!