Expo Router: Nesting a Drawer Inside Bottom Tabs
Learn how to nest a sliding drawer inside bottom tabs using Expo Router without gesture conflicts or state resets, complete with directory structure.
Stock photo for illustration only, not from the actual event
- Combine side drawers and bottom tabs without gesture conflicts.
- Map app directories directly using Expo Router file-system routing.
- Configure swipeEdgeWidth to prevent horizontal touch interaction clashes.
- Manage state synchronization between drawer routes and nested tabs.
Pairing a persistent bottom tab bar with a global sidebar drawer is a common pattern in cross-platform applications. However, nesting these navigation trees carelessly leads to performance overhead and gesture conflicts that only surface during real device testing.
Expo Router lets you map these navigation flows directly onto your file-system directory. Your code stays modular while native navigation components handle the heavy lifting underneath. Following a demo posted on Twitter, the Expo team requested a write-up detailing this exact process.
Nesting multiple navigation patterns in React Native often introduces gesture conflicts between side-swipe menus and horizontal carousels. Expo Router simplifies the structural complexity through folder semantics, but developers must still handle state scoping and gesture boundaries carefully for a smooth user experience.
Before writing code, evaluate whether your app's UX genuinely requires a dual-navigation hierarchy. A clean file-system layout keeps structural complexity manageable, keeping two key constraints in mind:
- State synchronization: Passing shared state from a standalone drawer route down into nested tabs requires deliberate context scoping or an external store.
- Platform gesture conflicts: Restricting swipeEdgeWidth keeps side-swipe interactions predictable instead of clashing with horizontal tab elements.
Stock photo for illustration only, not from the actual event
To keep navigation state unified, your project directory should mirror your layout tree using folder grouping semantics like (drawer) and (tabs) instead of a centralized routing config file:
- app/_layout.tsx: Root orchestration managing the app lifecycle and splash screen.
- app/(drawer)/_layout.tsx: Outermost navigation wrapper configuring the side drawer.
- app/(drawer)/(tabs)/_layout.tsx: Inner layout configuring persistent bottom tabs.
Build the structural boundary first by getting the drawer rendering before nesting the tab group inside. Add gesture constraints last once the structure holds to avoid debugging gesture conflicts and routing bugs simultaneously.
Source: Dev.to
Found something wrong in this article? Report an issue with this article
Comments
Leave a Comment