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.