Skip to main content

Custom navigators

You can create your own custom navigators with the Navigator component.


The Navigator component wraps the useNavigationBuilder hook from React Navigation.

The return value of useNavigationBuilder can be accessed with the Navigator.useContext() hook from inside the <Navigator /> component. Properties can be passed to useNavigationBuilder using the props of the <Navigator /> component, this includes initialRouteName, screenOptions, router.

All of the children of a <Navigator /> component will be rendered as-is.

  • Navigator.useContext: Access the React Navigation state, navigation, descriptors, and router for the custom navigator.
  • Navigator.Slot: A React component used to render the currently selected route. This component can only be rendered inside a <Navigator /> component.


Custom layouts have an internal context that is ignored when using the <Slot /> component without a <Navigator /> component wrapping it.

import { View } from "react-native";
import { TabRouter } from "@react-navigation/native";

import { Navigator, usePathname, Slot, Link } from "expo-router";

export default function App() {
return (
<Navigator router={TabRouter}>
<Header />
<Slot />

function Header() {
const { navigation, state, descriptors, router } = Navigator.useContext();

const pathname = usePathname();

return (
<Link href="/">Home</Link>
// Use `pathname` to determine if the link is active.
style={[pathname === "/profile" && { color: "blue" }]}
<Link href="/settings">Settings</Link>

In expo-router, you currently need all layout routes to be a navigator. This is because we don't have a way to render a route without a parent navigator.