--- title: Building balanced mobile layouts: nesting tabs and... description: 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... canonical: https://daily.dev/posts/building-balanced-mobile-layouts-nesting-tabs-and-drawers-with-expo-router-rtwziriwn twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Building balanced mobile layouts: nesting tabs and drawers with Expo Router | daily.dev og:description: 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... og:url: https://daily.dev/posts/building-balanced-mobile-layouts-nesting-tabs-and-drawers-with-expo-router-rtwziriwn og:image: https://api.daily.dev/og/posts/rtWZIRiwn.png og:image:alt: Building balanced mobile layouts: nesting tabs and drawers with Expo Router og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Building balanced mobile layouts: nesting tabs and drawers with Expo Router **[Expo Blog](https://daily.dev/sources/expo-blog)** · 8 min read · 8 upvotes · 1 comments ## Summary 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. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I stop a drawer swipe gesture from conflicting with a horizontal carousel inside a tab screen in Expo Router? Restrict the drawer's swipe-open gesture area rather than disabling gestures entirely. Setting swipeEdgeWidth on the Drawer screenOptions (for example to 40) limits how much of the screen edge triggers the drawer swipe, leaving room for swipeable carousels or swipe-to-delete lists inside the nested tab screens to receive their own gestures. _Anyone wiring drawer-over-tabs navigation in Expo can compare gesture-handling approaches on daily.dev._ ### Should I nest a drawer around bottom tabs or use a stack navigator instead in my Expo Router app? Use nested drawer-over-tabs only for a multi-tab workspace needing omnipresent utilities like org switching or support, since it adds contextual isolation. Use plain bottom tabs for 3 to 5 flat, isolated screens, and switch to native stack navigation with context-driven visibility for transaction-heavy dashboards where users move through deep sub-routes. _Developers deciding between navigation patterns in React Native can weigh these tradeoffs on daily.dev._ ### How do I structure nested drawer and tab layouts in Expo Router using the file system? Place a (drawer)/_layout.tsx as the outermost layout configuring the Drawer component, then nest a (tabs) folder inside it with its own _layout.tsx configuring the Tabs component; child routes under (tabs) automatically inherit the drawer context. A standalone route like settings.tsx sits alongside (tabs) inside (drawer) to appear in the drawer without being part of the tab bar. _Teams building layered navigation in Expo can find file-system routing patterns like this on daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@allinonetools** · 2 upvotes > The swipeEdgeWidth tip is easy to overlook. I've seen drawer gestures fight with screen interactions before, so handling that early saves a lot of debugging. ## Similar posts on daily.dev - [Dressed to Ship](https://daily.dev/posts/dressed-to-ship-92hm4j7cw) · Medium · 0 upvotes · 0 comments --- Tags: [#typescript](https://daily.dev/tags/typescript), [#react-native](https://daily.dev/tags/react-native) [View this post on daily.dev](https://daily.dev/posts/building-balanced-mobile-layouts-nesting-tabs-and-drawers-with-expo-router-rtwziriwn) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Building balanced mobile layouts: nesting tabs and drawers with Expo Router","url":"https://daily.dev/posts/building-balanced-mobile-layouts-nesting-tabs-and-drawers-with-expo-router-rtwziriwn","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/building-balanced-mobile-layouts-nesting-tabs-and-drawers-with-expo-router-rtwziriwn"},"datePublished":"2026-07-11T14:53:17.171Z","dateModified":"2026-09-14T09:08:29.394Z","description":"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...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/f372dc1f16b86cde46075a8393f2e6ab?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/f372dc1f16b86cde46075a8393f2e6ab?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Expo Blog","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Expo Blog","logo":"https://media.daily.dev/image/upload/s--E7LK6L3y--/f_auto,q_auto/v1774179051/logos/expo-blog?_a=BAMAMiWQ0","url":"https://daily.dev/sources/expo-blog"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/building-balanced-mobile-layouts-nesting-tabs-and-drawers-with-expo-router-rtwziriwn","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":8},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"typescript,react-native","timeRequired":"PT8M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Expo Blog","item":"https://daily.dev/sources/expo-blog"},{"@type":"ListItem","position":3,"name":"Building balanced mobile layouts: nesting tabs and drawers with Expo Router"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/building-balanced-mobile-layouts-nesting-tabs-and-drawers-with-expo-router-rtwziriwn","comment":[{"@type":"Comment","text":"The swipeEdgeWidth tip is easy to overlook. I’ve seen drawer gestures fight with screen interactions before, so handling that early saves a lot of debugging.","datePublished":"2026-07-12T04:00:39.722Z","url":"https://daily.dev/posts/rtWZIRiwn#c-A5ipYOSTR","author":{"@type":"Person","name":"AllInOneTools","url":"https://daily.dev/allinonetools","image":"https://media.daily.dev/image/upload/s--4ZT8QlF0--/f_auto/v1769790028/avatars/avatar_igzBsWloJeaegzm9bQltZ?_a=BAMAMiiu0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/building-balanced-mobile-layouts-nesting-tabs-and-drawers-with-expo-router-rtwziriwn#faq","mainEntity":[{"@type":"Question","name":"How do I stop a drawer swipe gesture from conflicting with a horizontal carousel inside a tab screen in Expo Router?","acceptedAnswer":{"@type":"Answer","text":"Restrict the drawer's swipe-open gesture area rather than disabling gestures entirely. Setting swipeEdgeWidth on the Drawer screenOptions (for example to 40) limits how much of the screen edge triggers the drawer swipe, leaving room for swipeable carousels or swipe-to-delete lists inside the nested tab screens to receive their own gestures. Anyone wiring drawer-over-tabs navigation in Expo can compare gesture-handling approaches on daily.dev."}},{"@type":"Question","name":"Should I nest a drawer around bottom tabs or use a stack navigator instead in my Expo Router app?","acceptedAnswer":{"@type":"Answer","text":"Use nested drawer-over-tabs only for a multi-tab workspace needing omnipresent utilities like org switching or support, since it adds contextual isolation. Use plain bottom tabs for 3 to 5 flat, isolated screens, and switch to native stack navigation with context-driven visibility for transaction-heavy dashboards where users move through deep sub-routes. Developers deciding between navigation patterns in React Native can weigh these tradeoffs on daily.dev."}},{"@type":"Question","name":"How do I structure nested drawer and tab layouts in Expo Router using the file system?","acceptedAnswer":{"@type":"Answer","text":"Place a (drawer)/_layout.tsx as the outermost layout configuring the Drawer component, then nest a (tabs) folder inside it with its own _layout.tsx configuring the Tabs component; child routes under (tabs) automatically inherit the drawer context. A standalone route like settings.tsx sits alongside (tabs) inside (drawer) to appear in the drawer without being part of the tab bar. Teams building layered navigation in Expo can find file-system routing patterns like this on daily.dev."}}]} ```