react-nativeexporeact-navigationexpo-router

expo router: how to create stack for each tab?

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
Solution

  • 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: