react native navigation problem ( nesting stack, drawer and bottom tab) - react-native

Question

I'm using RN navigation v5 for my app and I'm gonna build my navigation like image below:
as you can see this app has an intro then some authentication screens and after sign in user view the home screen. so what I want is stack for intro, drawer and bottom tab navigation for my home screen. you can see my code below:
const IntroStack = createStackNavigator();
const IntroNavigation = () => {
return (
<NavigationContainer>
<IntroStack.Navigator>
<IntroStack.Screen name='intro' component={Intro} options={{ headerShown: false }} />
<IntroStack.Screen name='login' component={Login} options={{ headerShown: false }} />
<IntroStack.Screen name='createAccount' component={CreateAccount} options={{ headerShown: false }} />
<IntroStack.Screen name='forgotPassword' component={ForgotPassword} options={{ headerShown: false }} />
<IntroStack.Screen name='enterCode' component={EnterCode} options={{ headerShown: false }} />
<IntroStack.Screen name='changePassword' component={ChangePassword} options={{ headerShown: false }} />
<IntroStack.Screen name='home' component={Home} options={{ headerShown: false }} />
</IntroStack.Navigator>
</NavigationContainer>
)
}
const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();
const TabNavigation = () => {
return (
<Tab.Navigator>
<Tab.Screen name="home" component={Home} />
<Tab.Screen name="worldTour" component={WorldTour} />
<Tab.Screen name="Outlet" component={Outlet} />
<Tab.Screen name="Profile" component={Profile} />
<Tab.Screen name="OutTherapists" component={OurTherapists} />
</Tab.Navigator>
);
}
const DrawerNavigation = () => {
const dimentions = useWindowDimensions();
return (
<Drawer.Navigator drawerStyle={{ width: dimentions.width }} drawerContent={props => <DrawerContent />}>
<Drawer.Screen name="home" component={IntroNavigation} />
</Drawer.Navigator>
);
}
export default TabNavigation;
but this did not work. I tried to read docs and watch some tutorials but I couldn't find something similar. I know somehow I must nest this stacks to each other but none of my tried ways achieve what I want. any help would be appreciated.

Answer 1

const IntroNavigation = () => {
return (
<NavigationContainer>
<IntroStack.Navigator>
<IntroStack.Screen name='intro' component={Intro} options={{ headerShown: false }} />
<IntroStack.Screen name='login' component={Login} options={{ headerShown: false }} />
<IntroStack.Screen name='createAccount' component={CreateAccount} options={{ headerShown: false }} />
<IntroStack.Screen name='forgotPassword' component={ForgotPassword} options={{ headerShown: false }} />
<IntroStack.Screen name='enterCode' component={EnterCode} options={{ headerShown: false }} />
<IntroStack.Screen name='changePassword' component={ChangePassword} options={{ headerShown: false }} />
<IntroStack.Screen name='home' component={DrawerNavigation} options={{ headerShown: false }} />
</IntroStack.Navigator>
</NavigationContainer>
)
}
const Drawer = createDrawerNavigator();
const DrawerNavigation = () => {
const dimentions = useWindowDimensions();
return (
<Drawer.Navigator drawerStyle={{ width: dimentions.width }} drawerContent={props => <DrawerContent />}>
<Drawer.Screen name="Home" component={TabNavigation} />
</Drawer.Navigator>
);
}
const Tab = createBottomTabNavigator();
const TabNavigation = () => {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="WorldTour" component={WorldTour} />
<Tab.Screen name="Outlet" component={Outlet} />
<Tab.Screen name="Profile" component={Profile} />
</Tab.Navigator>
);
}
export default IntroNavigation;

Answer 2

Your structure should be like that for Tabs:
<Tab.Navigator>
<Tab.Screen name="home" component={DrawerStack} />
<Tab.Screen name="worldTour" component={WorldTour} />
<Tab.Screen name="Outlet" component={Outlet} />
<Tab.Screen name="Profile" component={Profile} />
<Tab.Screen name="OutTherapists" component={OurTherapists} />
</Tab.Navigator>
You should use this tab navigator as screen in main stack navigator like this:
<NavigationContainer>
<IntroStack.Navigator>
<IntroStack.Screen name='intro' component={Intro} options={{ headerShown: false }} />
<IntroStack.Screen name='login' component={Login} options={{ headerShown: false }} />
<IntroStack.Screen name='createAccount' component={CreateAccount} options={{ headerShown: false }} />
<IntroStack.Screen name='forgotPassword' component={ForgotPassword} options={{ headerShown: false }} />
<IntroStack.Screen name='enterCode' component={EnterCode} options={{ headerShown: false }} />
<IntroStack.Screen name='changePassword' component={ChangePassword} options={{ headerShown: false }} />
<IntroStack.Screen name='Tabs' component={Tabs} options={{ headerShown: false }} />
</IntroStack.Navigator>
</NavigationContainer>
In addition, the name of the screen should not be same as you have 'home' screen in each navigator, this will cause conflict when navigating from navigation ref.
For signup flow, you can follow this procedure:
https://reactnavigation.org/docs/upgrading-from-4.x/#switch-navigator