Skip to main content

useNavigation

Expo Router exports a custom useNavigation hook that optionally accepts a relative route fragment to access any parent navigation prop.

The format for the normalized path is /folder/file where the string always starts with a / and there is no file extension or trailing slash.

Consider the following structure:

File System
app/
  _layout.js
  tabs/
    _layout.js
    page.js
app/tabs/page.tsx
import { useNavigation, useRootNavigation } from "expo-router";

export default function Page() {
  // This navigation prop controls the direct parent `/tabs/_layout.js`.
  const navigation = useNavigation();
  // This navigation prop controls the direct parent `/_layout.js`.
  const rootNavigation = useRootNavigation();

  // ...
}

You can still access any parent navigation prop by using the navigation.getParent() function. Each layout automatically indexes itself using the normalized path.