Expo Router showing dynamic route

[youcci]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

Hello,

i have an issue with Expo Router. I want to set a specific set of Bottom Tabs and nothing more but each time i have a route in my Expo Router it is shown unless i explicitly hide it. When i have a dynamic route like news/[id] and visit this route, it is shown as a tab in the bottom tabs. Is there a way to prevent it?

Library version

0.8.7

Environment info

System:
  OS: macOS 15.3.1
  CPU: (8) arm64 Apple M1
  Memory: 134.00 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.20.6
    path: /opt/homebrew/opt/node@18/bin/node
  Yarn:
    version: 1.22.21
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.8.2
    path: /opt/homebrew/opt/node@18/bin/npm
  Watchman:
    version: 2025.02.17.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.18034.62.2412.12266719
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.2
    path: /usr/bin/javac
  Ruby:
    version: 3.4.2
    path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.1.3
    wanted: ^15.1.3
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.2
    wanted: 0.76.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: true
  newArchEnabled: true

Steps to reproduce

1. Start a new Expo Project using Expo Router
2. add a dynamic Route
3. Route to a route of it

Reproducible sample code

import { createNativeBottomTabNavigator } from "@bottom-tabs/react-navigation";
import { withLayoutContext } from "expo-router";

const Tabs = withLayoutContext(createNativeBottomTabNavigator().Navigator);

export default function TabsLayout() {
  return (
    <Tabs>
      <Tabs.Screen
        name="index"
        options={{
          title: "Home",
          tabBarIcon: () => ({ sfSymbol: "house" }),
        }}
      />
      <Tabs.Screen
        name="explore"
        options={{
          title: "Explore",
          tabBarIcon: () => ({ sfSymbol: "person" }),
        }}
      />
      <Tabs.Screen
        name="favourites"
        options={{
          title: "Favourites",
          tabBarIcon: () => ({ sfSymbol: "heart" }),
        }}
      />

      <Tabs.Screen
        name="news"
        options={{
          title: "News",
          tabBarIcon: () => ({ sfSymbol: "newspaper" }),
          headerShown: false,
        }}
      />
      <Tabs.Screen
        name="+not-found"
        options={{
          tabBarItemHidden: true,
        }}
      />
      <Tabs.Screen
        name="components/tabs-layout"
        options={{
          tabBarItemHidden: true,
        }}
      />
      <Tabs.Screen
        name="_sitemap"
        options={{
          tabBarItemHidden: true,
        }}
      />
      <Tabs.Screen
        name="navigation/index"
        options={{
          tabBarItemHidden: true,
        }}
      />
      <Tabs.Screen
        name="screens/NewsDetailScreen"
        options={{
          tabBarItemHidden: true,
        }}
      />
      <Tabs.Screen
        name="news/[id]"
        options={{
          tabBarItemHidden: true,
        }}
      />
    </Tabs>
  );
}

[okwasniewski]

Hey,

This is a limitation of the native bottom tab bar on iOS, explicitly stated in the docs.

I suggest using a stack navigator for this dynamic screen.