A practical guide to nesting a side drawer around a bottom tab navigator in Expo Router using file-system routing. Covers the full directory structure, root layout orchestration, drawer and tab configuration, animated tab icons with React Native Reanimated, design token theming to avoid flash of unstyled content, and gesture conflict mitigation via swipeEdgeWidth. Includes architectural guidance on when this dual-navigation pattern is appropriate versus flat tabs or stack navigation.
Table of contents
Architectural fit: when to nest drawers and tabsArchitectural tradeoffs and limitationsThe core architecture1. Root orchestration (app/_layout.tsx)2. Global side drawer implementation (app/(drawer)/_layout.tsx)3. Nested bottom tab layout (app/(drawer)/(tabs)/_layout.tsx)4. UI layer micro-interactions (src/components/AnimatedTabIcon.tsx)5. Scalable theme architecture: eliminating flash of unstyled contentSummary and key framework documentationWhere to go next57.3K Impressions1 Comment