---
modificationDate: June 29, 2026
title: Router Experimental Stack
description: An opt-in sibling to Stack built on the react-native-screens experimental gamma stack. Available for testing only.
sourceCodeUrl: 'https://github.com/expo/expo/tree/sdk-57/packages/expo-router/src/layouts/experimental-stack'
packageName: 'expo-router'
platforms: ['ios', 'android']
isAlpha: true
---

<AgentInstructions>

## Submitting Feedback

If this page contains errors, outdated information, or gaps that blocked you from completing a task, report it so the docs can be improved:

curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/versions/v57.0.0/sdk/router/experimental-stack/","feedback":"🤖 Agent feedback for docs: <specific, actionable description> (<model>, <harness>)"}'

Only submit when you have something specific and actionable to report. Replace <model> with the model you are running as and <harness> with the tool you are running in (for example, Claude Code, Cursor, Codex CLI).

## 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: Reference (v57.0.0) > Expo Router
Pages in this section:
- [Overview](https://docs.expo.dev/versions/v57.0.0/sdk/router.md)
- [Color](https://docs.expo.dev/versions/v57.0.0/sdk/router/color.md)
- [Experimental Stack](https://docs.expo.dev/versions/v57.0.0/sdk/router/experimental-stack.md) (this page)
- [Link](https://docs.expo.dev/versions/v57.0.0/sdk/router/link.md)
- [Native tabs](https://docs.expo.dev/versions/v57.0.0/sdk/router/native-tabs.md)
- [Split View](https://docs.expo.dev/versions/v57.0.0/sdk/router/split-view.md)
- [Stack](https://docs.expo.dev/versions/v57.0.0/sdk/router/stack.md)
- [UI](https://docs.expo.dev/versions/v57.0.0/sdk/router/ui.md)
Full documentation tree: [llms.txt](https://docs.expo.dev/llms.txt)

</AgentInstructions>

# Expo Router Experimental Stack

An opt-in sibling to Stack built on the react-native-screens experimental gamma stack. Available for testing only.
Android, iOS

> `ExperimentalStack` is an [alpha](/more/release-statuses.md#alpha) API available in **Expo SDK 56** and later. It is for testing only — the API and feature set may change before it is ready for production use.

`ExperimentalStack` is a sibling to [`Stack`](/versions/v57.0.0/sdk/router/stack.md) powered by the new `react-native-screens/experimental` stack. It is opt-in per navigator: replace `<Stack />` with `<ExperimentalStack />` in the specific layout you want to migrate, and keep `<Stack />` everywhere else.

We are sharing it early so you can try it in your app and tell us what is missing. The supported option surface is intentionally narrow and will grow over time.

> See the [Expo Router](/versions/v57.0.0/sdk/router/index.md) reference for more information about the file-based routing library for native and Web apps.

## Supported features

Supported screen options:

-   `title`
-   `headerShown`
-   `headerTransparent`
-   `headerBackVisible`

On Android, `ExperimentalStack` ships with [predictive back gesture](https://developer.android.com/guide/navigation/custom-back/predictive-back-gesture) support. You still need to enable it for your app by setting [`android.predictiveBackGestureEnabled`](/versions/latest/config/app.md#predictivebackgestureenabled) to `true` in your [app config](/workflow/configuration.md).

## Platform support

`ExperimentalStack` is native-only. On Web, it falls back to the standard `Stack`, so the same layout works across platforms without conditional code.

## Basic usage

```tsx
import { ExperimentalStack as Stack } from 'expo-router';

export default function Layout() {
  return (
    <Stack screenOptions={{ headerShown: true }}>
      <Stack.Screen name="index" options={{ title: 'Home' }} />
      <Stack.Screen name="details" options={{ title: 'Details' }} />
    </Stack>
  );
}
```

You can compose `ExperimentalStack.Screen` and `ExperimentalStack.Protected` the same way you would with `Stack`.

## Known limitations

#### Limited screen options

`ExperimentalStack` supports only `title`, `headerShown`, `headerTransparent`, and `headerBackVisible`. Passing any other option (for example, `headerLeft`, `headerRight`, `headerTitle`, `headerStyle`, `headerTintColor`, animation overrides, status bar options) logs a development warning and has no effect. Keep using `<Stack />` for screens that need those options.

#### No presentation modes yet

`ExperimentalStack` does not yet support `presentation: 'modal'` or `transparentModal`. Screens always push onto the stack.

#### No sheets yet

`ExperimentalStack` does not yet support `formSheet` or the related sheet sizing/detent options.

#### No custom headers yet

`ExperimentalStack` does not yet support custom header components or header tinting/styling. Only the four header options listed above take effect.

#### No animation or status bar customization yet

`ExperimentalStack` does not yet honor per-screen animation overrides (`animation`, `animationDuration`) or status bar options.

#### Cannot be mixed with Stack on Android

On Android, `ExperimentalStack` and the standard `Stack` cannot coexist in the same app — pick one navigator type for your native stacks. We hope to lift this restriction in a future release so you can migrate one navigator at a time.

#### Web falls back to standard Stack

On Web, `<ExperimentalStack />` renders the standard `Stack` from `expo-router`. Native-only options have no effect on Web.

> We are actively developing `ExperimentalStack` and looking for feedback. You can share your thoughts on [Discord](https://chat.expo.dev), [open an issue on GitHub](https://github.com/expo/expo/issues), or use the **Feedback** button at the bottom of this page.

## Installation

`ExperimentalStack` ships as part of `expo-router`. Follow the Expo Router installation guide if you do not already have it in your project:

[Install Expo Router](/router/installation.md) — Learn how to install Expo Router in your project.

## API

```js
import { ExperimentalStack } from 'expo-router';
```

## Components

### `ExperimentalStack`

Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component)<[Omit](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)<[Omit](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)<[ExperimentalStackNavigatorProps](#experimentalstacknavigatorprops), 'children' | 'initialRouteName' | 'layout' | 'screenListeners' | 'screenOptions' | 'screenLayout' | 'UNSTABLE_router' | 'UNSTABLE_routeNamesChangeBehavior' | 'id'\> & [DefaultRouterOptions](#defaultrouteroptions)<string\> & { children: ReactNode; layout?: ((props: { state: StackNavigationState<ParamListBase>; navigation: NavigationHelpers<ParamListBase, {}>; descriptors: Record<...>; children: ReactNode; }) => ReactElement<...>) | undefined; ... 4 more ...; UNSTABLE_routeNamesChangeBehavior?: "firstMatch" | ... 1 more ... | undefined; ..., 'children'\> & [Partial](https://www.typescriptlang.org/docs/handbook/utility-types.html#partialtype)<[Pick](https://www.typescriptlang.org/docs/handbook/utility-types.html#picktype-keys)<[Omit](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)<[ExperimentalStackNavigatorProps](#experimentalstacknavigatorprops), 'children' | 'initialRouteName' | 'layout' | 'screenListeners' | 'screenOptions' | 'screenLayout' | 'UNSTABLE_router' | 'UNSTABLE_routeNamesChangeBehavior' | 'id'\> & [DefaultRouterOptions](#defaultrouteroptions)<string\> & { children: ReactNode; layout?: ((props: { state: StackNavigationState<ParamListBase>; navigation: NavigationHelpers<ParamListBase, {}>; descriptors: Record<...>; children: ReactNode; }) => ReactElement<...>) | undefined; ... 4 more ...; UNSTABLE_routeNamesChangeBehavior?: "firstMatch" | ... 1 more ... | undefined; ..., 'children'\>\>\>

Renders the new `react-native-screens/experimental` native stack.

Sibling to `Stack`. Native-only — on web it falls back to the standard `Stack`. Opt-in per navigator: replace `<Stack />` with `<ExperimentalStack />` in the specific layout you want to migrate.

### `ExperimentalStack.Screen`

Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component)<[StackScreenProps](#stackscreenprops)\>

### `ExperimentalStack.Screen.BackButton`

Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component)<[StackScreenBackButtonProps](#stackscreenbackbuttonprops)\>

Component to configure the back button.

Can be used inside Stack.Screen in a layout or directly inside a screen component.

Example

```tsx
import { Stack } from 'expo-router';

export default function Layout() {
  return (
    <Stack>
      <Stack.Screen name="detail">
        <Stack.Screen.BackButton displayMode="minimal">Back</Stack.Screen.BackButton>
      </Stack.Screen>
    </Stack>
  );
}
```

Example

```tsx
import { Stack } from 'expo-router';

export default function Page() {
  return (
    <>
      <Stack.Screen.BackButton hidden />
      <ScreenContent />
    </>
  );
}
```

> **Note:** If multiple instances of this component are rendered for the same screen, the last one rendered in the component tree takes precedence.

> **Deprecated:** Use `Stack.Title` instead.

### `ExperimentalStack.Screen.Title`

Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component)<[StackTitleProps](#stacktitleprops)\>

## Props

### `navigation`

Type: [ExperimentalStackNavigationProp](#experimentalstacknavigationprop)<ParamList, RouteName, [NavigatorID](https://reactnavigation.org/docs/custom-navigators/#type-checking-navigators)\>

### `route`

Type: [RouteProp](https://reactnavigation.org/docs/glossary-of-terms/#route-object)<ParamList, RouteName\>

## Types

### `ExperimentalStackNavigationEventMap`

Navigator-level events emitted by `ExperimentalStack`. Mirrors the subset of `NativeStackNavigationEventMap` that the gamma `Stack.Screen` lifecycle callbacks can drive.

| Property | Type | Description |
| --- | --- | --- |
| gestureCancel | `{ data: undefined }` | - |
| transitionEnd | `{ data: { closing: boolean } }` | - |
| transitionStart | `{ data: { closing: boolean } }` | - |

### `ExperimentalStackNavigationHelpers`

Type: [NavigationHelpers](#navigationhelpers)<ParamListBase, [ExperimentalStackNavigationEventMap](#experimentalstacknavigationeventmap)\>

### `ExperimentalStackNavigationOptions`

Options accepted by `ExperimentalStack` screens. Mirrors the narrow option surface of the gamma `<Stack.HeaderConfig>` component from `react-native-screens/experimental`. Anything outside this shape is dropped with a `__DEV__` warning at runtime.

| Property | Type | Description |
| --- | --- | --- |
| headerBackVisible(optional) | `boolean` | - |
| headerShown(optional) | `boolean` | - |
| headerTransparent(optional) | `boolean` | - |
| title(optional) | `string` | - |

### `ExperimentalStackNavigationProp`

Literal Type: `union`

Acceptable values are: NavigationProp<ParamList, RouteName, [NavigatorID](https://reactnavigation.org/docs/custom-navigators/#type-checking-navigators), [StackNavigationState](#stacknavigationstate)<ParamList\>, [ExperimentalStackNavigationOptions](#experimentalstacknavigationoptions), [ExperimentalStackNavigationEventMap](#experimentalstacknavigationeventmap)\> | [StackActionHelpers](#stackactionhelpers)<ParamList\>