expo router: how to create stack for each tab?

Question

Where is the equivalent documentation in expo router for this: https://reactnavigation.org/docs/tab-based-navigation#a-stack-navigator-for-each-tab

Basically id like to make nested stacks that use dynamic routes inside of my bottom tabs.

an example: lets say we have a tab that is like a text messaging app. that tab is called Chats. inside the Chats tab you can see all your chats and should be at /chats, and by clicking on a chat it should bring you to that screen with the message history: /chats/

I tried setting this up as the following, but its wrong because im getting 2 bottom tabs rendering, 1 for chats/index, and one for chats/[chat]/index:

app
--(tabs)
  _layout.tsx
   index.tsx
    chats
      -index.tsx
      -_layout.tsx
        [chat]
          -index.tsx
          -_layout.tsx

Answer 1

For anyone new and needs help getting set up with creating a tab with stacks from scratch, I've written this article!

Short answer: In expo router, navigators are implemented in layout routes and they render the current child routes and can be wrapped with other components to create a layout. Every component within that directory will be subject to its layout route.

Answer 2

I've just done exactly that.

Folder structure:

app
  (tabs)
  _layout.tsx -> Let's call this TabsLayout
  chats
    _layout.tsx -> Let's call this ChatsLayout
    index.tsx
    [chatId].tsx

Code:

// app/(tabs)/_layout.tsx

import { Tabs } from "expo-router"

export default function TabLayout() {
    return (
        <Tabs>
            <Tabs.Screen name="chats" />
        </Tabs>
    )
}

// app/(tabs)/chats/_layout.tsx

import { Stack } from "expo-router"

export default function ChatsLayout() {
    return (
        <Stack />
    )
}

Final notes:

• Inside the app/(tabs)/chats/index.tsx is where you place the list of chats, then you navigate to app/(tabs)/chats/<some-id>.