Nesting navigators

Learn how to nest navigators in Expo Router.

This guide is an extension from React Navigation: Nesting navigators to Expo Router.

Navigation UI elements (Link, Tabs, Stack) may move out of the Expo Router library in the future.

Consider the following file structure which is used as an example in this guide:

In the above example, app/home/feed.js matches /home/feed, and app/home/messages.js matches /home/messages.

import { Stack } from 'expo-router';
export default Stack;

Both app/home/_layout.js and app/index.js below are nested in the app/_layout.js layout so that it will be rendered as a stack.

import { Tabs } from 'expo-router';
export default Tabs;

import { Link } from 'expo-router';
export default function Root() {
  return <Link href="/home/messages">Navigate to nested route</Link>;
}

Both app/home/feed.js and app/home/messages.js below are nested in the home/_layout.js layout, so it will be rendered as a tab.

import { View, Text } from 'react-native';
export default function Feed() {
  return (
    <View>
      <Text>Feed screen</Text>
    </View>
  );
}

import { View, Text } from 'react-native';
export default function Messages() {
  return (
    <View>
      <Text>Messages screen</Text>
    </View>
  );
}

Next steps