Expo Router

Returns route info for a screen it is called from.

Hook to run an effect whenever a route is focused. Similar to React.useEffect, but the effect re-runs each time the screen comes into focus, and the optional cleanup function runs when the screen loses focus — not on unmount. This makes it the right primitive for refetching data, restarting subscriptions, or resetting transient screen state every time a user returns to the route.

The passed callback should be wrapped in React.useCallback to avoid running the effect too often.

import { useFocusEffect } from 'expo-router';
import { useCallback } from 'react';

export default function Route() {
  useFocusEffect(
    // Callback should be wrapped in `React.useCallback` to avoid running the effect too often.
    useCallback(() => {
      // Invoked whenever the route is focused.
      console.log("Hello, I'm focused!");

      // Return function is invoked whenever the route gets out of focus.
      return () => {
        console.log('This route is now unfocused.');
      };
    }, []),
   );

 return </>;
}

Returns URL parameters for globally selected route, including dynamic path segments. This function updates even when the route is not focused. Useful for analytics or other background operations that don't draw to the screen.

Route URL example: acme://profile/baconbrix?extra=info.

When querying search params in a stack, opt-towards using useLocalSearchParams because it will only update when the route is focused.

Note: For usage information, see Local versus global search parameters.

import { Text } from 'react-native';
import { useGlobalSearchParams } from 'expo-router';

export default function Route() {
  // user=baconbrix & extra=info
  const { user, extra } = useGlobalSearchParams();

  return <Text>User: {user}</Text>;
}

Hook to get the current focus state of the screen. Returns a true if screen is focused, otherwise false. This can be used if a component needs to render something based on the focus state.

Returns the result of the loader function for the calling route.

import { Text } from 'react-native';
import { useLoaderData } from 'expo-router';

export function loader() {
  return Promise.resolve({ foo: 'bar' }};
}

export default function Route() {
 const data = useLoaderData<typeof loader>(); // { foo: 'bar' }

 return <Text>Data: {JSON.stringify(data)}</Text>;
}

Returns the URL parameters for the contextually focused route. Useful for stacks where you may push a new screen that changes the query parameters. For dynamic routes, both the route parameters and the search parameters are returned.

Route URL example: acme://profile/baconbrix?extra=info.

To observe updates even when the invoking route is not focused, use useGlobalSearchParams.

Note: For usage information, see Local versus global search parameters.

import { Text } from 'react-native';
import { useLocalSearchParams } from 'expo-router';

export default function Route() {
 // user=baconbrix & extra=info
 const { user, extra } = useLocalSearchParams();

 return <Text>User: {user}</Text>;
}

Returns the navigation object for the current route. Use it to access layout-specific functionality, such as navigation.openDrawer() in a Drawer layout.

See: Navigating between pages for Router navigation, and Drawer for layout-specific navigation methods.

import { useNavigation } from 'expo-router';

export default function Route() {
  // Access the current navigation object for the current route.
  const navigation = useNavigation();

  return (
    <View>
      <Text onPress={() => {
        // Open the drawer view.
        navigation.openDrawer();
      }}>
        Open Drawer
      </Text>
    </View>
  );
}

import { useNavigation } from 'expo-router';

export default function MenuRoute() {
  const rootLayout = useNavigation('/');
  const ordersLayout = useNavigation('/orders');

  // Same as the default results of `useNavigation()` when invoked in this route.
  const parentLayout = useNavigation('/orders/menu');
}

Returns the currently selected route location without search parameters. For example, /acme?foo=bar returns /acme. Segments will be normalized. For example, /[id]?id=normal becomes /normal.

import { Text } from 'react-native';
import { usePathname } from 'expo-router';

export default function Route() {
  // pathname = "/profile/baconbrix"
  const pathname = usePathname();

  return <Text>Pathname: {pathname}</Text>;
}

Prevents the screen from being removed while preventRemove is true and calls callback with the blocked navigation action.

To continue the blocked navigation action, set preventRemove to false and call the callback's repeat function. To navigate somewhere else, set preventRemove to false, call the returned disablePrevention function, and then navigate.

On web, this hook also prevents the browser from unloading the page while preventRemove is true.

const [hasUnsavedChanges, setHasUnsavedChanges] = useState(true);
usePreventRemove(hasUnsavedChanges, ({ repeat }) => {
  Alert.alert('Discard changes?', undefined, [
    { text: 'Cancel', style: 'cancel' },
    {
      text: 'Discard',
      style: 'destructive',
      onPress: () => {
        setHasUnsavedChanges(false);
        repeat();
      },
    },
  ]);
});

Returns the navigation state of the root navigator — the top-level navigator that contains the current screen. Its shape follows the NavigationState type of the installed expo-router version.

import { useRootNavigationState } from 'expo-router';

export default function Route() {
 const { routes } = useRootNavigationState();

 return <Text>{routes[0].name}</Text>;
}

Hook to access the route prop of the parent screen anywhere.

Hook to get the path for the current route based on linking options.

Returns the Router object for imperative navigation.

import { useRouter } from 'expo-router';
import { Text } from 'react-native';

export default function Route() {
 const router = useRouter();

 return (
  <Text onPress={() => router.push('/home')}>Go Home</Text>
 );
}

Returns a list of selected file segments for the currently selected route. Segments are not normalized, so they will be the same as the file path. For example, /[id]?id=normal becomes ["[id]"].

import { Text } from 'react-native';
import { useSegments } from 'expo-router';

export default function Route() {
  // segments = ["profile", "[user]"]
  const segments = useSegments();

  return <Text>Hello</Text>;
}

- app
  - [user]
    - index.tsx
    - followers.tsx
  - settings.tsx

const [first, second] = useSegments<['settings'] | ['[user]'] | ['[user]', 'followers']>()

Returns the server document data for server-side rendering, including <html>/<body> attributes and additional nodes to add to <head>/<body> for metadata and assets.

import { useServerDocumentContext } from 'expo-router/html';

export default function Root({ children }) {
  const { htmlAttributes, bodyAttributes, headNodes, bodyNodes } = useServerDocumentContext();
  return (
    <html {...htmlAttributes}>
      <head>{headNodes}</head>
      <body {...bodyAttributes}>
        {children}
        {bodyNodes}
      </body>
    </html>
  );
}

Observes the performance marks that Expo Router records during navigation. On web, it is the global PerformanceObserver. On native, it implements the same API for mark entries. Unlike the React Native PerformanceObserver, it keeps the detail of each mark.

Check the name of an entry and cast it to the matching mark type, for example RouterPageFocusedMark, to read its detail.

import {
  unstable_enablePerformanceIntegration,
  unstable_PerformanceObserver,
  type RouterPageFocusedMark,
} from 'expo-router';

unstable_enablePerformanceIntegration();

new unstable_PerformanceObserver((list) => {
  for (const entry of list.getEntriesByName('expo-router:page-focused')) {
    const { detail } = entry as RouterPageFocusedMark;
    console.log(entry.startTime, detail.pathname);
  }
}).observe({ type: 'mark', buffered: true });

Attaches trusted nested state from a navigation action to a route and removes Expo Router's internal state markers at every nested level. State without the internal __internal__routerActionState marker is ignored and triggers a warning in development.

// Inside a custom router's action handler, preserve nested state from the incoming action.
const route = attachRouteState(
  {
    key: nextKey(action.payload.name),
    name: action.payload.name,
    params: action.payload.params,
  },
  action
);

Creates the shared props for integrating a stack navigator with Expo Router.

import { createBaseStackProps, StackRouter, integrateWithRouter } from 'expo-router';
import { navigator } from './navigator';

export const Stack = integrateWithRouter(navigator, StackRouter, {
  createProps: createBaseStackProps,
});

Creates the shared props for integrating a tab navigator with Expo Router.

import { createBaseTabProps, TabRouter, integrateWithRouter } from 'expo-router';
import { navigator } from './navigator';

export const Tabs = integrateWithRouter(navigator, TabRouter, {
  createProps: createBaseTabProps,
});

Creates the props required to integrate Expo Router's native stack navigator.

import {
  createNativeStackProps,
  StackRouter,
  integrateWithRouter,
} from 'expo-router';
import { navigator } from './navigator';

export const Stack = integrateWithRouter(navigator, StackRouter, {
  createProps: createNativeStackProps,
});

Creates a standard-navigation navigator and wires it into Expo Router in one step. Use integrateWithRouter instead if you already have a navigator from createStandardNavigator. Props declared in both NavigatorProps and CreateProps are intersected, so incompatible types produce never rather than a type error at this call.

import { createStandardRouterNavigator, TabRouter } from 'expo-router';

export const Tabs = createStandardRouterNavigator(MyTabsContent, TabRouter);

Restores the previous header appearance on iOS 26+ for all native stack screens: an opaque header that uses the theme fonts, with content below the header. Earlier iOS versions already keep this appearance. Call it before the root layout renders, for example at the top level of the root _layout file.

Note: Apple's Human Interface Guidelines recommend that apps reduce custom navigation bar backgrounds, because they can interfere with the background effects that the system provides.

import { enableLegacyHeaderAppearance, Stack } from 'expo-router';

enableLegacyHeaderAppearance();

export default function RootLayout() {
  return <Stack />;
}

Creates a router factory that merges the members returned by extension over the router created by base.

Annotate the extension's context or return type to change the state, action, or options types.

const Router = extendRouter(StackRouter, ({ baseRouter }) => ({
  getStateForRouteFocus: (state, key) => { ... },
}));

Creates a router factory whose getStateForAction runs reducer before the base router. Every other router member, including shouldActionChangeFocus, is inherited; use extendRouter to change those.

Annotate the reducer's action or context parameter to add action types or widen the router options.

const Router = extendRouterActions(StackRouter, (state, action: StackAction | ClearAction, { nextKey }) => {
  if (action.type !== 'CLEAR') {
    return RouterActionHandling.Delegate;
  }
  const route = { key: nextKey('index'), name: 'index' };
  return { state: { ...state, index: 0, routes: [route] }, affectedRouteKey: route.key };
});

Wires an existing standard-navigation navigator into Expo Router, returning a navigator component (with a .Screen child) usable as a layout. Use createStandardRouterNavigator to create and integrate in one step.

import { createStandardNavigator } from 'standard-navigation';
import { integrateWithRouter, TabRouter } from 'expo-router';

const navigator = createStandardNavigator(MyTabsContent);
export const Tabs = integrateWithRouter(navigator, TabRouter);

Checks whether a router's getStateForAction handled the action. Use it instead of comparing the result with null, because a router can leave an action unhandled with RouterActionHandling.Unhandled or the deprecated null.

const result = baseRouter.getStateForAction(state, action);
if (!isActionHandled(result)) {
  return result;
}

Wraps the screen contents in a React Activity that hides once the screen is buried deep enough in the stack. Hiding runs effect cleanups and releases resources, but keeps React state, so the screen looks unchanged when the user navigates back to it.

Must be rendered inside a screen component.

StackRouter is considered an internal implementation and its behavior may change without a notice between expo-router's version

TabRouter is considered an internal implementation and its behavior may change without a notice between expo-router's version

Starts recording the performance marks of Expo Router navigation. Call it before the root layout mounts, for example at the top level of the root _layout file.

Returns whether a navigation is queued or its state update is pending.

The current screen can remain visible while this returns true if the destination suspends. navigation.dispatchSync bypasses the queue, and native back gestures never enter it, so this hook does not report navigation triggered by either one. Returns false when called outside an Expo Router root.

Returns a navigator that automatically injects matched routes and renders nothing when there are no children. Return type with children prop optional.

Enables use of other built-in React Navigation navigators and other navigators built with the React Navigation custom navigator API.

import { ParamListBase, TabNavigationState } from "@react-navigation/native";
import {
  createMaterialTopTabNavigator,
  MaterialTopTabNavigationOptions,
  MaterialTopTabNavigationEventMap,
} from "@react-navigation/material-top-tabs";
import { withLayoutContext } from "expo-router";

const MaterialTopTabs = createMaterialTopTabNavigator();

const ExpoRouterMaterialTopTabs = withLayoutContext<
  MaterialTopTabNavigationOptions,
  typeof MaterialTopTabs.Navigator,
  TabNavigationState<ParamListBase>,
  MaterialTopTabNavigationEventMap
>(MaterialTopTabs.Navigator);

export default function TabLayout() {
  return <ExpoRouterMaterialTopTabs />;
}

A performance mark recorded by Expo Router. To read detail, check its name and cast it to the matching mark type, such as RouterPageFocusedMark.

The navigation action that an expo-router:action-enqueued or expo-router:action-dispatched mark describes.

The page that a page mark describes.

A standard-navigation descriptor extended with Expo Router route information.