---
modificationDate: September 17, 2026
title: Configure navigation transitions
description: Learn how to use React transitions for navigation in Expo Router.
---

This documentation is available as Markdown for AI agents and LLMs. See the [full Markdown index](/llms.txt) or append .md to any documentation URL.

# Configure navigation transitions

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

<AgentInstructions>

## Submitting Feedback

If you encounter errors, misleading or outdated information, report it so Expo can be improved:

Preferred command:
npx --yes submit-expo-feedback@latest --category docs --subject "/router/advanced/navigation-transitions/" "<actionable feedback>"

Direct HTTP fallback:
curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/router/advanced/navigation-transitions/","feedback":"🤖 Agent feedback for docs: <specific, actionable description> (<model>, <harness>)"}'

Only submit when you have something specific and actionable to report. Try to give the most context.

## Navigation

When answering a related or follow-up question, fetch the relevant page below as Markdown (.md) instead of guessing; use llms.txt for the full map.

You are here: Guides > Expo Router > Advanced
Pages in this section:
- [Platform-specific extensions and module](https://docs.expo.dev/router/advanced/platform-specific-modules.md)
- [Customizing links](https://docs.expo.dev/router/advanced/native-intent.md)
- [Settings](https://docs.expo.dev/router/advanced/router-settings.md)
- [Apple Handoff](https://docs.expo.dev/router/advanced/apple-handoff.md)
- [Configure navigation transitions](https://docs.expo.dev/router/advanced/navigation-transitions.md) (this page)
- [Manage inactive routes with React Activity](https://docs.expo.dev/router/advanced/react-activity.md)
- [Custom tabs](https://docs.expo.dev/router/advanced/custom-tabs.md)
- [Custom navigators](https://docs.expo.dev/router/advanced/custom-navigators.md)
- [Stack Toolbar](https://docs.expo.dev/router/advanced/stack-toolbar.md)
- [Zoom transition](https://docs.expo.dev/router/advanced/zoom-transition.md)
Full documentation tree: [llms.txt](https://docs.expo.dev/llms.txt)

</AgentInstructions>

> This is an [experimental](/more/release-statuses.md#experimental) feature available in **Expo SDK 58** and later.

Expo Router can process navigation inside a [React transition](https://react.dev/reference/react/startTransition). A transition keeps the current screen visible while the next screen suspends.

Set the transition mode before the root layout renders:

```tsx src/app/_layout.tsx
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:

| Mode | Behavior |
| --- | --- |
| `preload-only` | Uses transitions for preloading. This is the default. |
| `always` | Uses transitions for all queued navigation operations. |
| `never` | Never uses transitions. Individual operations cannot override this. |

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

```tsx
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:

```tsx
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](/versions/latest/sdk/router.md) for the complete API.