This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

Learn how to use React transitions for navigation in Expo Router.

This is an experimental feature available in Expo SDK 58 and later.

Expo Router can process navigation inside a React transition. A transition keeps the current screen visible while the next screen suspends.

Set the transition mode before the root layout renders:

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

router.setTransitionMode('always');

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

Choose a transition mode

Use these modes to configure when Expo Router starts transitions:

Use inTransition to override the mode for an individual operation. The never mode cannot be overridden.

router.push('/details', { inTransition: true });
router.back({ inTransition: false });

When Expo Router batches operations, every operation must allow transitions for the batch to use one.

Show pending navigation

Use unstable_useIsNavigating() to check whether navigation is queued or pending:

import { unstable_useIsNavigating } from 'expo-router';
import { ActivityIndicator } from 'react-native';

export function NavigationProgress() {
  const isNavigating = unstable_useIsNavigating();

  return <ActivityIndicator animating={isNavigating} />;
}

The hook does not report synchronous navigation or native back gestures. See the Expo Router API reference for the complete API.