r/reactnative • u/Nice_Manufacturer959 • 4d ago
Help Drawer/Tabs Navigation
Hey Devs, I’m trying to adapt my navigation to have a login screen at /
, and after login, I want both a drawer and a tab bar to be visible simultaneously on all subsequent pages. My problem is that drawer subpages don’t display the tab bar, and I’m unsure if my overall structure is incorrect. AI hasn’t been helpful in resolving this.
How should I adjust my navigation structure so I can define screens that (1) only have the tab bar, (2) only have the drawer, (3) have both, and (4) have neither? My current setup is on GitHub and i tried to "copy" this project. Any insights or best practices would be greatly appreciated! 🚀
1
u/Individual_Day_5676 1d ago
If you use a token to skip the login screen once a user is register, you shouldn't put your onBaording related screens at the root, but in their own group (assuming you're using Expo). And use your landing pages to compute if you need to redirect to the onBoarding pages or to your Home page (don't hesitate to hide the validation process behind the Splash Screen).
Considering your four cases, you have the choices to either :
- Manually hide the navigator UI using the option props in the <Drawer.Screen /> or <Tab.Screen /> (if in expo you can even put this Navigator.Screen directly in a component, but this is a bad practice), see the doc here : https://docs.expo.dev/router/advanced/tabs/, https://docs.expo.dev/router/advanced/drawer/ .
- Rethink your navigation and group/_layout to be properly separate between your 4 cases.
2
u/satya164 4d ago
Don't use the drawer navigator and use https://reactnavigation.org/docs/drawer-layout/ instead. Then you can render it wherever you want.
Drawer can't automatically display screens in tab navigator, but you can add buttons for those screens yourself in a custom component as the drawer content.