# evanbacon/expo-router-layouts-example architecture

> Architecture diagram of the GitHub repository evanbacon/expo-router-layouts-example, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-11). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/evanbacon/expo-router-layouts-example
- Repository: https://github.com/evanbacon/expo-router-layouts-example

## Overview

This Expo Router example demonstrates alternative layouts and navigation patterns. A user opens a demo route and explores its layout; the custom-stack demo also lets them select a transition before navigating. The graph preserves the documented layout showcase and the route families visible in the tree. Some route and layout files were not excerpted, so their internal wiring is omitted rather than inferred.

Main entry points: [`app`](https://github.com/evanbacon/expo-router-layouts-example/tree/main/app) (Demo routes), [`app/custom-stack/_layout.tsx`](https://github.com/evanbacon/expo-router-layouts-example/blob/main/app/custom-stack/_layout.tsx) (Custom stack), [`app/stack/_layout.tsx`](https://github.com/evanbacon/expo-router-layouts-example/blob/main/app/stack/_layout.tsx) (Native stack), [`app/tabs/_layout.tsx`](https://github.com/evanbacon/expo-router-layouts-example/blob/main/app/tabs/_layout.tsx) (Tabs demo)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["Route demos"]
  node_routes["Demo routes"]
  node_app_layout["Root layout<br/>[_layout.tsx]"]
  node_default_route["Home route<br/>[index.js]"]
end

subgraph group_stack["Stack layouts"]
  node_stack_demo["Native stack<br/>[_layout.tsx]"]
  node_stack_wrapper["Stack wrapper<br/>[stack.tsx]"]
  node_custom_demo["Custom stack<br/>[_layout.tsx]"]
  node_custom_wrapper["Custom navigator<br/>[custom-stack.tsx]"]
  node_transition["Slide transition"]
end

subgraph group_tabs["Tab layouts"]
  node_tabs_demo["Tabs demo<br/>[_layout.tsx]"]
  node_tabs_wrapper["Tabs wrapper<br/>[tabs.tsx]"]
  node_material_bottom["Material bottom tabs<br/>[_layout.tsx]"]
  node_material_bottom_wrapper["Bottom tabs wrapper"]
  node_material_top["Material top tabs<br/>[_layout.tsx]"]
  node_material_top_wrapper["Top tabs wrapper"]
  node_collapsing_tabs["Collapsing top tabs<br/>[_layout.tsx]"]
end

subgraph group_presentations["Other layouts"]
  node_drawer_demo["Drawer demo<br/>[_layout.tsx]"]
  node_drawer_wrapper["Drawer wrapper<br/>[drawer.tsx]"]
  node_sheet_demo["Bottom sheet<br/>[_layout.tsx]"]
  node_sheet_wrapper["Sheet navigator<br/>[bottom-sheet.tsx]"]
  node_slot_demo["Slot layout<br/>[_layout.tsx]"]
end

node_user(("User"))

node_user -->|"opens demo"| node_routes
node_routes -.->|"uses root layout"| node_app_layout
node_routes -.->|"includes route"| node_default_route
node_stack_demo -->|"imports"| node_stack_wrapper
node_custom_demo -->|"imports"| node_custom_wrapper
node_custom_demo -->|"configures transition"| node_transition
node_tabs_demo -.->|"imports"| node_tabs_wrapper
node_material_bottom -->|"imports"| node_material_bottom_wrapper
node_material_top -.->|"imports"| node_material_top_wrapper
node_drawer_demo -->|"uses navigator"| node_drawer_wrapper
node_sheet_demo -->|"loads navigator"| node_sheet_wrapper

click node_routes "https://github.com/evanbacon/expo-router-layouts-example/tree/main/app"
click node_app_layout "https://github.com/evanbacon/expo-router-layouts-example/blob/main/app/_layout.tsx"
click node_default_route "https://github.com/evanbacon/expo-router-layouts-example/blob/main/app/index.js"
click node_stack_demo "https://github.com/evanbacon/expo-router-layouts-example/blob/main/app/stack/_layout.tsx"
click node_stack_wrapper "https://github.com/evanbacon/expo-router-layouts-example/blob/main/layouts/stack.tsx"
click node_custom_demo "https://github.com/evanbacon/expo-router-layouts-example/blob/main/app/custom-stack/_layout.tsx"
click node_custom_wrapper "https://github.com/evanbacon/expo-router-layouts-example/blob/main/layouts/custom-stack.tsx"
click node_transition "https://github.com/evanbacon/expo-router-layouts-example/blob/main/transitions/custom-transition.ts"
click node_tabs_demo "https://github.com/evanbacon/expo-router-layouts-example/blob/main/app/tabs/_layout.tsx"
click node_tabs_wrapper "https://github.com/evanbacon/expo-router-layouts-example/blob/main/layouts/tabs.tsx"
click node_material_bottom "https://github.com/evanbacon/expo-router-layouts-example/blob/main/app/material-bottom-tabs/_layout.tsx"
click node_material_bottom_wrapper "https://github.com/evanbacon/expo-router-layouts-example/blob/main/layouts/material-bottom-tabs.tsx"
click node_material_top "https://github.com/evanbacon/expo-router-layouts-example/blob/main/app/material-top-tabs/_layout.tsx"
click node_material_top_wrapper "https://github.com/evanbacon/expo-router-layouts-example/blob/main/layouts/material-top-tabs.tsx"
click node_collapsing_tabs "https://github.com/evanbacon/expo-router-layouts-example/blob/main/app/collapsing-top-tabs/_layout.tsx"
click node_drawer_demo "https://github.com/evanbacon/expo-router-layouts-example/blob/main/app/drawer/_layout.tsx"
click node_drawer_wrapper "https://github.com/evanbacon/expo-router-layouts-example/blob/main/layouts/drawer.tsx"
click node_sheet_demo "https://github.com/evanbacon/expo-router-layouts-example/blob/main/app/bottom-sheet/_layout.tsx"
click node_sheet_wrapper "https://github.com/evanbacon/expo-router-layouts-example/blob/main/layouts/bottom-sheet.tsx"
click node_slot_demo "https://github.com/evanbacon/expo-router-layouts-example/blob/main/app/slot/_layout.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_routes,node_app_layout,node_default_route,node_user toneBlue
class node_stack_demo,node_stack_wrapper,node_custom_demo,node_custom_wrapper,node_transition toneAmber
class node_tabs_demo,node_tabs_wrapper,node_material_bottom,node_material_bottom_wrapper,node_material_top,node_material_top_wrapper,node_collapsing_tabs toneMint
class node_drawer_demo,node_drawer_wrapper,node_sheet_demo,node_sheet_wrapper,node_slot_demo toneRose
```

## Components

### Route demos

- [Demo routes](https://github.com/evanbacon/expo-router-layouts-example/tree/main/app): `app`
- [Root layout](https://github.com/evanbacon/expo-router-layouts-example/blob/main/app/_layout.tsx): `app/_layout.tsx`
- [Home route](https://github.com/evanbacon/expo-router-layouts-example/blob/main/app/index.js): `app/index.js`

### Stack layouts

- [Native stack](https://github.com/evanbacon/expo-router-layouts-example/blob/main/app/stack/_layout.tsx): `app/stack/_layout.tsx`
- [Stack wrapper](https://github.com/evanbacon/expo-router-layouts-example/blob/main/layouts/stack.tsx): `layouts/stack.tsx`
- [Custom stack](https://github.com/evanbacon/expo-router-layouts-example/blob/main/app/custom-stack/_layout.tsx): `app/custom-stack/_layout.tsx`
- [Custom navigator](https://github.com/evanbacon/expo-router-layouts-example/blob/main/layouts/custom-stack.tsx): `layouts/custom-stack.tsx`
- [Slide transition](https://github.com/evanbacon/expo-router-layouts-example/blob/main/transitions/custom-transition.ts): `transitions/custom-transition.ts`

### Tab layouts

- [Tabs demo](https://github.com/evanbacon/expo-router-layouts-example/blob/main/app/tabs/_layout.tsx): `app/tabs/_layout.tsx`
- [Tabs wrapper](https://github.com/evanbacon/expo-router-layouts-example/blob/main/layouts/tabs.tsx): `layouts/tabs.tsx`
- [Material bottom tabs](https://github.com/evanbacon/expo-router-layouts-example/blob/main/app/material-bottom-tabs/_layout.tsx): `app/material-bottom-tabs/_layout.tsx`
- [Bottom tabs wrapper](https://github.com/evanbacon/expo-router-layouts-example/blob/main/layouts/material-bottom-tabs.tsx): `layouts/material-bottom-tabs.tsx`
- [Material top tabs](https://github.com/evanbacon/expo-router-layouts-example/blob/main/app/material-top-tabs/_layout.tsx): `app/material-top-tabs/_layout.tsx`
- [Top tabs wrapper](https://github.com/evanbacon/expo-router-layouts-example/blob/main/layouts/material-top-tabs.tsx): `layouts/material-top-tabs.tsx`
- [Collapsing top tabs](https://github.com/evanbacon/expo-router-layouts-example/blob/main/app/collapsing-top-tabs/_layout.tsx): `app/collapsing-top-tabs/_layout.tsx`

### Other layouts

- [Drawer demo](https://github.com/evanbacon/expo-router-layouts-example/blob/main/app/drawer/_layout.tsx): `app/drawer/_layout.tsx`
- [Drawer wrapper](https://github.com/evanbacon/expo-router-layouts-example/blob/main/layouts/drawer.tsx): `layouts/drawer.tsx`
- [Bottom sheet](https://github.com/evanbacon/expo-router-layouts-example/blob/main/app/bottom-sheet/_layout.tsx): `app/bottom-sheet/_layout.tsx`
- [Sheet navigator](https://github.com/evanbacon/expo-router-layouts-example/blob/main/layouts/bottom-sheet.tsx): `layouts/bottom-sheet.tsx`
- [Slot layout](https://github.com/evanbacon/expo-router-layouts-example/blob/main/app/slot/_layout.tsx): `app/slot/_layout.tsx`

### Other components

- **User**

## Connections

- User → Demo routes: opens demo (evidence: `README.md`)
- Demo routes → Root layout: uses root layout
- Demo routes → Home route: includes route
- Native stack → Stack wrapper: imports (evidence: `app/stack/_layout.tsx`)
- Custom stack → Custom navigator: imports (evidence: `app/custom-stack/_layout.tsx`)
- Custom stack → Slide transition: configures transition (evidence: `app/custom-stack/_layout.tsx`)
- Tabs demo → Tabs wrapper: imports (evidence: `app/tabs/_layout.tsx`)
- Material bottom tabs → Bottom tabs wrapper: imports (evidence: `app/material-bottom-tabs/_layout.tsx`)
- Material top tabs → Top tabs wrapper: imports (evidence: `app/material-top-tabs/_layout.tsx`)
- Drawer demo → Drawer wrapper: uses navigator (evidence: `app/drawer/_layout.tsx`)
- Bottom sheet → Sheet navigator: loads navigator (evidence: `app/bottom-sheet/_layout.tsx`)