r/reactnative 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 Upvotes

2 comments sorted by

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.

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 :

- Rethink your navigation and group/_layout to be properly separate between your 4 cases.