Expo Router Experimental Stack

For the complete documentation index, see llms.txt. Use this file to discover all available pages.

ExperimentalStack is an 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 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 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 support. You still need to enable it for your app by setting android.predictiveBackGestureEnabled to true in your app config.

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

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

We are actively developing ExperimentalStack and looking for feedback. You can share your thoughts on Discord, open an issue on GitHub, 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:

API

import { ExperimentalStack } from 'expo-router';

Components

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>
  );
}

import { Stack } from 'expo-router';

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

Props

Types