Skip to main content

Nesting navigators

Ports the guide React Navigation: Nesting navigators to Expo Router.

File System
app/
  _layout.js
  index.js
  home/
    _layout.js
    feed.js # Matches /home/feed
    messages.js # Matches /home/messages
app/_layout.js
import { Stack } from "expo-router";

export default Stack;

This is nested in the _layout.js layout, so it will be rendered as a stack.

app/home/_layout.js
import { Tabs } from "expo-router";

export default Tabs;
app/index.js
import { Link } from "expo-router";

export default function Root() {
  return <Link href="/home/messages">Navigate to nested route</Link>;
}

This is nested in the home/_layout.js layout, so it will be rendered as a tab.

app/home/feed.js
import { View, Text } from "react-native";

export default function Feed() {
  return (
    <View>
      <Text>Feed screen</Text>
    </View>
   );
}
app/home/messages.js
import { View, Text } from "react-native";

export default function Messages() {
  return (
    <View>
      <Text>Messages screen</Text>
    </View>
   );
}

Notes​

  • Navigation UI elements (Link, Tabs, Stack) may move out of the router package.