This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 56).

Expo Router

A file-based routing library for React Native and web applications.

Android

iOS

tvOS

Web

Included in Expo Go

GitHub

npm

Changelog

expo-router is a routing library for React Native and web apps. It enables navigation management using a file-based routing system and provides native navigation components.

Expo Router guides

Learn about Expo Router basics, navigation patterns, core concepts, and more.

In SDK 56 and later, Expo Router no longer supports importing from external @react-navigation/* packages in application code. Repoint those imports to the matching expo-router entry points. Run the codemod or follow the SDK 55 to 56 migration guide to update your project.

Installation

To use Expo Router in your project, you need to install. Follow the instructions from the Expo Router's installation guide:

Install Expo Router

Learn how to install Expo Router in your project.

Configuration in app config

If you are using the default template to create a new project, expo-router's config plugin is already configured in your app config.

Example app.json with config plugin

app.json

{
  "expo": {
    "plugins": ["expo-router"]
  }
}

Configurable properties

Name	Default	Description
`root`	`"app"`	Changes the routes directory from `app` to another value. Avoid using this property unless you have a specific need.
`origin`	`undefined`	Production origin URL where assets in the public folder are hosted. The fetch function is polyfilled to support relative requests from this origin in production. The development origin is inferred using the Expo CLI development server.
`headOrigin`	`undefined`	A more specific origin URL used in the `expo-router/head` module for iOS handoff. Defaults to `origin`.
`asyncRoutes`	`undefined`	Enable async routes (lazy loading). Can be a boolean, a string (`"development"` or `"production"`), or an object with platform-specific values (`{ android, ios, web, default }`). `production` is currently web-only and will be disabled on native.
`platformRoutes`	`true`	Enable or disable platform-specific routes (for example, index.android.tsx and index.ios.tsx).
`sitemap`	`true`	Enable or disable the automatically generated sitemap at /_sitemap.
`partialRouteTypes`	`true`	Enable partial typed routes generation. This allows TypeScript to provide type checking for routes without requiring all routes to be statically known.
`redirects`	`undefined`	An array of static redirect rules. Each rule should have `source`, `destination`, and optionally `permanent` (defaults to `false`) and `methods` (HTTP methods to redirect).
`rewrites`	`undefined`	An array of static rewrite rules. Each rule should have `source`, `destination`, and optionally `methods` (HTTP methods to rewrite).
`headers`	`undefined`	A list of headers that are set on every route response from the server. The value can be a string or an array of strings.
`disableSynchronousScreensUpdates`	`false`	Disable synchronous layout updates for native screens. This can help with performance in some cases.
`unstable_useServerMiddleware`	`false`	Experimental Enable server middleware support with a `+middleware.ts` file. Requires `web.output: "server"` to be set in app config.
`unstable_useServerDataLoaders`	`false`	Experimental Enable data loader support. This is only supported for `web.output: "static"` outputs at the moment.
`unstable_useServerRendering`	`false`	Experimental Enable server-side rendering. When enabled with `web.output: "server"`, HTML is rendered at request time instead of being pre-rendered at build time.

Usage

For information core concepts, notation patterns, navigation layouts, and common navigation patterns, start with Router 101 section:

Router 101

APIs

API	Description
Stack	Stack navigator, toolbar, and screen components
Link	Link and Redirect components
Color	Platform color utilities
Native Tabs	Native tab navigation
Split View	Split view layout
UI	Headless tab components

API

import { useRouter, Tabs, Navigator, Slot } from 'expo-router';

Components

`Badge`

Android

iOS

tvOS

Web

Type: React.Element<BadgeProps>

BadgeProps

Inherited Props

`ErrorBoundary`

Android

iOS

tvOS

Web

Type: React.Element<ErrorBoundaryProps>

Props passed to a page's ErrorBoundary export.

ErrorBoundaryProps

`error`

Android

iOS

tvOS

Web

Type: Error

The error that was thrown.

`retry`

Android

iOS

tvOS

Web

Type: () => Promise<void>

A function that will re-render the route component by clearing the error state.

`ExperimentalStack`

Experimental

•

Android

iOS

tvOS

Web

Type: React.Element<Omit<Omit<ExperimentalStackNavigatorProps, 'children' | 'initialRouteName' | 'layout' | 'screenListeners' | 'screenOptions' | 'screenLayout' | 'UNSTABLE_router' | 'UNSTABLE_routeNamesChangeBehavior' | 'id'> & 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<Pick<Omit<ExperimentalStackNavigatorProps, 'children' | 'initialRouteName' | 'layout' | 'screenListeners' | 'screenOptions' | 'screenLayout' | 'UNSTABLE_router' | 'UNSTABLE_routeNamesChangeBehavior' | 'id'> & 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.

`Icon`

Android

iOS

tvOS

Web

Type: React.Element<IconProps>

IconProps

Inherited Props

`Label`

Android

iOS

tvOS

Web

Type: React.Element<LabelProps>

LabelProps

Inherited Props

`ScrollViewStyleReset`

Android

iOS

tvOS

Web

Type: React.Element<React.FC>

Root style-reset for full-screen React Native web apps with a root <ScrollView /> should use the following styles to ensure native parity. Learn more.

`Sitemap`

Android

iOS

tvOS

Web

Type: React.Element<React.FC>

`Slot`

Android

iOS

tvOS

Web

Type: React.Element<Omit<NavigatorProps<any>, 'children'>>

Renders the currently selected content.

There are actually two different implementations of <Slot/>:

Used inside a _layout as the Navigator
Used inside a Navigator as the content

Since a custom Navigator will set the NavigatorContext.contextKey to the current _layout, you can use this to determine if you are inside a custom navigator or not.

`SuspenseFallback`

Android

iOS

tvOS

Web

Type: React.Element<SuspenseFallbackProps>

Props passed to a route's SuspenseFallback export.

SuspenseFallbackProps

`params`

Android

iOS

tvOS

Web

Type: Record<string, string | string[]>

The route's URL parameters.

Example

{ id: "123" } // For a route `./profile/[id].tsx` navigated to as `/profile/123`

`route`

Android

iOS

tvOS

Web

Type: string

The route module's contextKey.

Example

./index.tsx ./profile/[id].tsx

`Tabs`

Android

iOS

tvOS

Web

Renders a tabs navigator.

`ThemeProvider`

Android

iOS

tvOS

Web

Type: React.Element<Props>

`VectorIcon`

Android

iOS

tvOS

Web

Type: React.Element<VectorIconProps<NameT>>

Helper component for loading vector icons.

Prefer using the md and sf props on Icon rather than using this component directly. Only use this component when you need to load a specific icon from a vector icon family.

Example

import { Icon, VectorIcon } from 'expo-router';
import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';

<Icon src={<VectorIcon family={MaterialCommunityIcons} name="home" />} />

VectorIconProps

`family`

Android

iOS

tvOS

Web

Type:

{
  getImageSource: (name: NameT, size: number, color: ColorValue) => Promise<ImageSourcePropType | null>
}

The family of the vector icon.

Example

import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';

`name`

Android

iOS

tvOS

Web

Type: NameT

The name of the vector icon.

`ExperimentalStack.Screen`

Android

iOS

tvOS

Web

Type: React.Element<StackScreenProps>

`Tabs.Screen`

Android

iOS

tvOS

Web

Type: React.Element<ScreenProps<TabsProps, TabNavigationState<ParamListBase>, BottomTabNavigationEventMap>>

`ExperimentalStack.Screen.BackButton`

Android

iOS

tvOS

Web

Type: React.Element<StackScreenBackButtonProps>

Component to configure the back button.

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

Example

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

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`

Android

iOS

tvOS

Web

Type: React.Element<StackTitleProps>

Constants

`DarkTheme`

Android

iOS

tvOS

Web

Type: Theme

`DefaultTheme`

Android

iOS

tvOS

Web

Type: Theme

`unstable_navigationEvents`

Android

iOS

tvOS

Web

Type: { addListener: (eventType: EventType, callback: (event: Payload<EventType>) => void) => () => void, emit: (type: EventType, event: Payload<EventType>) => void, enable: () => void, isEnabled: () => boolean }

Hooks

`useCurrentRouteInfo()`

Experimental

•

Android

iOS

tvOS

Web

Returns route info for a screen it is called from.

Returns:

UrlObject | undefined

`useFocusEffect(effect, do_not_pass_a_second_prop)`

Android

iOS

tvOS

Web

Parameter	Type	Description
effect	`EffectCallback`	Memoized callback containing the effect, should optionally return a cleanup function.
do_not_pass_a_second_prop(optional)	`undefined`	-

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.

Returns:

void

Example

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

`useGlobalSearchParams()`

Android

iOS

tvOS

Web

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.

Returns:

RouteOutputParams<TRoute> & TParams

Example

app/profile/[user].tsx

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

`useIsFocused()`

Android

iOS

tvOS

Web

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:

boolean

`useLoaderData()`

Android

iOS

tvOS

Web

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

Returns:

LoaderFunctionResult<T>

Example

app/profile/[user].tsx

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

`useLocalSearchParams()`

Android

iOS

tvOS

Web

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.

Returns:

RouteOutputParams<TRoute> & TParams

Example

app/profile/[user].tsx

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

`useNavigation(parent)`

Android

iOS

tvOS

Web

Parameter	Type	Description
parent(optional)	`string \| HrefObject`	Provide an absolute path such as `/(root)` to the parent route or a relative path like `../../` to the parent route.

Returns the navigation object for the current route. Mirrors the React Navigation navigation object. Use it to imperatively access layout-specific functionality like navigation.openDrawer() in a Drawer layout.

Returns:

T

The navigation object for the current route.

See: The full navigation API is available directly from expo-router — no @react-navigation/* install required. For the navigator-dependent functions reference, see navigation dependent functions.

Example

app/index.tsx

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

When using nested layouts, you can access higher-order layouts by passing a secondary argument denoting the layout route. For example, /menu/_layout.tsx is nested inside /app/orders/, you can use useNavigation('/orders/menu/').

Example

app/orders/menu/index.tsx

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

If you attempt to access a layout that doesn't exist, an error such as Could not find parent navigation with route "/non-existent" is thrown.

`useNavigationContainerRef()`

Android

iOS

tvOS

Web

Returns:

NavigationContainerRefWithCurrent<RootParamList>

The root <NavigationContainer /> ref for the app. The ref.current may be null if the <NavigationContainer /> hasn't mounted yet.

`usePathname()`

Android

iOS

tvOS

Web

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.

Returns:

string

Example

app/profile/[user].tsx

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

Deprecated: Use useNavigationContainerRef instead, which returns a React ref.

`useRootNavigation()`

Android

iOS

tvOS

Web

Returns:

NavigationContainerRef<RootParamList> | null

`useRootNavigationState()`

Android

iOS

tvOS

Web

Returns the navigation state of the root navigator — the top-level navigator that contains the current screen.

Returns:

NavigationState

The current NavigationState of the root navigator.

See: React Navigation's navigation state reference for the shape of the returned object.

Example

import { useRootNavigationState } from 'expo-router';

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

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

`useRoute()`

Android

iOS

tvOS

Web

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

Returns:

T

Route prop of the parent screen.

`useRoutePath()`

Android

iOS

tvOS

Web

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

Returns:

string | undefined

Path for the current route.

`useRouter()`

Android

iOS

tvOS

Web

Returns the Router object for imperative navigation.

Returns:

ImperativeRouter

Example

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

`useScrollToTop(ref)`

Android

iOS

tvOS

Web

Parameter	Type
ref	`RefObject<ScrollableWrapper>`

Returns:

void

`useSegments()`

Android

iOS

tvOS

Web

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]"].

Returns:

RouteSegments<TSegments>

Example

app/profile/[user].tsx

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

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

  return <Text>Hello</Text>;
}

useSegments can be typed using an abstract. Consider the following file structure:

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

This can be strictly typed using the following abstract with useSegments hook:

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

`useServerDocumentContext()`

Android

iOS

tvOS

Web

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.

Returns:

ServerDocumentData

Example

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

`useSitemap()`

Android

iOS

tvOS

Web

Returns:

SitemapType | null

`useTheme()`

Android

iOS

tvOS

Web

Returns:

Theme

Methods

`withLayoutContext(Nav, processor, useOnlyUserDefinedScreens)`

Android

iOS

tvOS

Web

Parameter	Type	Description
Nav	`T`	The navigator component to wrap.
processor(optional)	`(options: ScreenProps[]) => ScreenProps[]`	A function that processes the screens before passing them to the navigator.
useOnlyUserDefinedScreens(optional)	`boolean`	If true, all screens not specified as navigator's children will be ignored. Default:`false`

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.

Returns:

Component<PropsWithoutRef<PickPartial<ComponentProps<T>, 'children'>>> & {
  Protected: FunctionComponent<ProtectedProps>, 
  Screen: (props: ScreenProps<TOptions, TState, TEventMap>) => null
}

Example

app/_layout.tsx

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

Interfaces

`ActionDispatchedEvent`

Android

iOS

tvOS

Web

Property	Type	Description
actionType	`string`	The action type from the dispatched NavigationAction (e.g. `NAVIGATE`).
payload	`object \| undefined`	-
state	`ReactNavigationState`	-
type	`'actionDispatched'`	-

`PageBlurredEvent`

Android

iOS

tvOS

Web

Extends: BasePageEvent

Property	Type	Description
type	`'pageBlurred'`	-

`PageFocusedEvent`

Android

iOS

tvOS

Web

Extends: BasePageEvent

Property	Type	Description
type	`'pageFocused'`	-

`PagePreloadedEvent`

Android

iOS

tvOS

Web

Extends: BasePageEvent

The page rendered as part of a preload (e.g. router.prefetch()) and is not currently focused. If the user later navigates to this route, the matching pageFocused will fire then; the preload may also be invalidated or the route unmounted (pageRemoved) without a focus.

Property	Type	Description
type	`'pagePreloaded'`	-

`PageRemoved`

Android

iOS

tvOS

Web

Extends: BasePageEvent

Property	Type	Description
type	`'pageRemoved'`	-

Types

`AnalyticsEvent`

Android

iOS

tvOS

Web

Literal Type: union

Acceptable values are: PagePreloadedEvent | PageFocusedEvent | PageBlurredEvent | PageRemoved | ActionDispatchedEvent

`EffectCallback()`

Android

iOS

tvOS

Web

Memoized callback containing the effect, should optionally return a cleanup function.

Returns:

undefined | void | () => void

`ExperimentalStackNavigationEventMap`

Experimental

•

Android

iOS

tvOS

Web

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 } }`	-

`ExperimentalStackNavigationOptions`

Experimental

•

Android

iOS

tvOS

Web

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`

Android

iOS

tvOS

Web

Literal Type: union

Acceptable values are: NavigationProp<ParamList, RouteName, NavigatorID, StackNavigationState<ParamList>, ExperimentalStackNavigationOptions, ExperimentalStackNavigationEventMap> | StackActionHelpers<ParamList>

`ExternalPathString`

Android

iOS

tvOS

Web

Literal Type: union

Acceptable values are: {string}:{string} | //{string}

`Href<T>`

Android

iOS

tvOS

Web

The main routing type for Expo Router. It includes all available routes with strongly typed parameters. It can either be:

string: A full path like /profile/settings or a relative path like ../settings.
object: An object with a pathname and optional params. The pathname can be a full path like /profile/settings or a relative path like ../settings. The params can be an object of key-value pairs.

An Href can either be a string or an object.

Generic: T

Type: T ? T[href] : string | HrefObject

`HrefObject`

Android

iOS

tvOS

Web

Property	Type	Description
params(optional)	`UnknownInputParams`	Optional parameters for the route.
pathname	`string`	The path of the route.

`ImperativeRouter`

Android

iOS

tvOS

Web

Returns router object for imperative navigation API.

Example

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

export default function Route() {

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

Property	Type	Description
back	`() => void`	Goes back in the navigation history.
canDismiss	`() => boolean`	Checks if it is possible to dismiss the current screen. Returns `true` if the router is within the stack with more than one screen in stack's history.
canGoBack	`() => boolean`	Navigates to a route in the navigator's history if it supports invoking the `back` function.
dismiss	`(count: number) => void`	Navigates to the a stack lower than the current screen using the provided count if possible, otherwise 1. If the current screen is the only route, it will dismiss the entire stack.
dismissAll	`() => void`	Returns to the first screen of the closest stack — equivalent to a stack `popToTop` action. See: React Navigation's `popToTop` stack action for the underlying behavior.
dismissTo	`(href: Href, options: NavigationOptions) => void`	Dismisses screens until the provided href is reached. If the href is not found, it will instead replace the current screen with the provided `href`.
navigate	`(href: Href, options: NavigationOptions) => void`	Navigates to the provided `href`.
prefetch	`(name: Href) => void`	Prefetch a screen in the background before navigating to it
push	`(href: Href, options: NavigationOptions) => void`	Navigates to the provided `href` using a push operation if possible.
replace	`(href: Href, options: NavigationOptions) => void`	Navigates to route without appending to the history. Can be used with `useFocusEffect` to redirect imperatively to a new screen. See: Using `useRouter()` hook to redirect.
setParams	`(params: Partial<RouteInputParams<T>>) => void`	Updates the current route's query params.

`NativeIntent`

Android

iOS

tvOS

Web

Created by using a special file called +native-intent.tsx at the top-level of your project's app directory. It exports redirectSystemPath or legacy_subscribe functions, both methods designed to handle URL/path processing.

Useful for re-writing URLs to correctly target a route when unique/referred URLs are incoming from third-party providers or stale URLs from previous versions.

See: For more information on how to use NativeIntent, see Customizing links.

Property	Type	Description
legacy_subscribe(optional)	`(listener: (url: string) => void) => undefined \| void \| () => void`	Experimentally available in SDK 52. Useful as an alternative API when a third-party provider doesn't support Expo Router but has support for React Navigation via `Linking.subscribe()` for existing projects. Using this API is not recommended for newer projects or integrations since it is incompatible with Server Side Routing and Static Rendering, and can become challenging to manage while offline or in a low network environment.
redirectSystemPath(optional)	`(event: { initial: boolean, path: string }) => Promise<string \| null> \| string \| null`	A special method used to process URLs in native apps. When invoked, it receives an `options` object with the following properties: path: represents the URL or path undergoing processing. initial: a boolean indicating whether the path is the app's initial URL. Its return value should be a `string`, a `Promise<string \| null>`, or `null`. When a falsy value is returned (for example, `null`), no redirection occurs and the app stays on the current path. Note that throwing errors within this method may result in app crashes. It's recommended to wrap your code inside a `try/catch` block and utilize `.catch()` when appropriate. See: For usage information, see Redirecting system paths.

`NativeStackHeaderItem`

Android

iOS

tvOS

Web

Literal Type: union

An item that can be displayed in the header. It can be a button, a menu, spacing, or a custom element.

On iOS 26, when showing items on the right side of the header, if the items don't fit the available space, they will be collapsed into a menu automatically. Items with type: 'custom' will not be included in this automatic collapsing behavior.

Acceptable values are: NativeStackHeaderItemButton | NativeStackHeaderItemMenu | NativeStackHeaderItemSpacing | NativeStackHeaderItemCustom

`NativeStackHeaderItemButton`

Android

iOS

tvOS

Web

A button item in the header.

Type: SharedHeaderItem extended by:

Property	Type	Description
onPress	`() => void`	Function to call when the item is pressed.
selected(optional)	`boolean`	Whether the item is in a selected state. Read more: https://developer.apple.com/documentation/uikit/uibarbuttonitem/isselected
type	`'button'`	Type of the item.

`NativeStackHeaderItemCustom`

Android

iOS

tvOS

Web

A custom item to display any React Element in the header.

Property	Type	Description
element	`React.ReactElement`	A React Element to display as the item.
hidesSharedBackground(optional)	`boolean`	Whether the background this item may share with other items in the bar should be hidden. Only available from iOS 26.0 and later. Read more: https://developer.apple.com/documentation/uikit/uibarbuttonitem/hidessharedbackground
type	`'custom'`	-

`NativeStackHeaderItemMenu`

Android

iOS

tvOS

Web

An item that shows a menu when pressed.

Type: SharedHeaderItem extended by:

Property	Type	Description
changesSelectionAsPrimaryAction(optional)	`boolean`	Whether the menu is a selection menu. Tapping an item in a selection menu will add a checkmark to the selected item. Read more: https://developer.apple.com/documentation/uikit/uibarbuttonitem/changesselectionasprimaryaction
menu	`{ items: (NativeStackHeaderItemMenuAction \| NativeStackHeaderItemMenuSubmenu)[], layout: 'default' \| 'palette', multiselectable: boolean, title: string }`	Menu for the item.
type	`'menu'`	-

`NativeStackHeaderItemMenuAction`

Android

iOS

tvOS

Web

An action item in a menu.

Property	Type	Description
description(optional)	`string`	The secondary text displayed alongside the label of the menu item.
destructive(optional)	`boolean`	Whether to apply destructive style to the item. Read more: https://developer.apple.com/documentation/uikit/uimenuelement/attributes/destructive
disabled(optional)	`boolean`	Whether to apply disabled style to the item. Read more: https://developer.apple.com/documentation/uikit/uimenuelement/attributes/disabled
discoverabilityLabel(optional)	`string`	An elaborated title that explains the purpose of the action. On iOS, the system displays this title in the discoverability heads-up display (HUD). If this is not set, the HUD displays the title property. Read more: https://developer.apple.com/documentation/uikit/uiaction/discoverabilitytitle
hidden(optional)	`boolean`	Whether to apply hidden style to the item. Read more: https://developer.apple.com/documentation/uikit/uimenuelement/attributes/hidden
icon(optional)	`PlatformIconIOS`	Icon for the menu item.
keepsMenuPresented(optional)	`boolean`	Whether to keep the menu presented after firing the element’s action. Read more: https://developer.apple.com/documentation/uikit/uimenuelement/attributes/keepsmenupresented
label	`string`	Label for the menu item.
onPress	`() => void`	Function to call when the menu item is pressed.
state(optional)	`'on' \| 'off' \| 'mixed'`	The state of an action- or command-based menu item. Read more: https://developer.apple.com/documentation/uikit/uimenuelement/state
type	`'action'`	-

`NativeStackHeaderItemMenuSubmenu`

Android

iOS

tvOS

Web

A submenu item that contains other menu items.

Property	Type	Description
destructive(optional)	`boolean`	Whether to apply destructive style to the menu item. Read more: https://developer.apple.com/documentation/uikit/uimenuelement/attributes/destructive
icon(optional)	`PlatformIconIOS`	Icon for the submenu item.
inline(optional)	`boolean`	Whether the menu is displayed inline with the parent menu. By default, submenus are displayed after expanding the parent menu item. Inline menus are displayed as part of the parent menu as a section. Defaults to `false`. Read more: https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/displayinline
items	`[items]`	Array of menu items (actions or submenus).
label	`string`	Label for the submenu item.
layout(optional)	`'default' \| 'palette'`	How the submenu items are displayed. `default`: menu items are displayed normally. `palette`: menu items are displayed in a horizontal row. Defaults to `default`. Read more: https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/displayaspalette
multiselectable(optional)	`boolean`	Whether multiple items in the submenu can be selected, i.e. in "on" state. Defaults to `false`. Read more: https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/singleselection
type	`'submenu'`	-

`NativeStackHeaderItemSpacing`

Android

iOS

tvOS

Web

An item to add spacing between other items in the header.

Property	Type	Description
spacing	`number`	The amount of spacing to add.
type	`'spacing'`	-

`NativeStackNavigationEventMap`

Android

iOS

tvOS

Web

Property	Type	Description
gestureCancel	`{ data: undefined }`	Event which fires when a swipe back is canceled on iOS.
sheetDetentChange	`{ data: { index: number, stable: boolean } }`	Event which fires when screen is in sheet presentation & it's detent changes. In payload it caries two fields: `index` - current detent index in the `sheetAllowedDetents` array, `stable` - on Android `false` value means that the user is dragging the sheet or it is settling; on iOS it is always `true`.
transitionEnd	`{ data: { closing: boolean } }`	Event which fires when a transition animation ends.
transitionStart	`{ data: { closing: boolean } }`	Event which fires when a transition animation starts.

`NativeStackNavigationOptions`

Android

iOS

tvOS

Web

Property	Type	Description
animation(optional)	`ScreenProps[stackAnimation]`	How the screen should animate when pushed or popped. Supported values: "default": use the platform default animation "fade": fade screen in or out "fade_from_bottom" – performs a fade from bottom animation "flip": flip the screen, requires presentation: "modal" (iOS only) "simple_push": use the platform default animation, but without shadow and native header transition (iOS only) "slide_from_bottom": slide in the new screen from bottom "slide_from_right": slide in the new screen from right (Android only, uses default animation on iOS) "slide_from_left": slide in the new screen from left (Android only, uses default animation on iOS) "ios_from_right" - iOS like slide in animation. pushes in the new screen from right to left (Android only, resolves to default transition on iOS) "ios_from_left" - iOS like slide in animation. pushes in the new screen from left to right (Android only, resolves to default transition on iOS) "none": don't animate the screen Only supported on iOS and Android.
animationDuration(optional)	`number`	Only for: iOS Duration (in milliseconds) for the following transition animations on iOS: `slide_from_bottom` `fade_from_bottom` `fade` `simple_push` Defaults to `500`. The duration is not customizable for: Screens with `default` and `flip` animations Screens with `presentation` set to `modal`, `formSheet`, `pageSheet` (regardless of animation)
animationMatchesGesture(optional)	`boolean`	Only for: iOS Whether the gesture to dismiss should use animation provided to `animation` prop. Defaults to `false`. Doesn't affect the behavior of screens presented modally.
animationTypeForReplace(optional)	`ScreenProps[replaceAnimation]`	The type of animation to use when this screen replaces another screen. Defaults to `pop`. Supported values: "push": the new screen will perform push animation. "pop": the new screen will perform pop animation. Only supported on iOS and Android.
autoHideHomeIndicator(optional)	`boolean`	Only for: iOS Whether the home indicator should prefer to stay hidden on this screen. Defaults to `false`.
contentStyle(optional)	`StyleProp<ViewStyle>`	Style object for the scene content.
freezeOnBlur(optional)	`boolean`	Whether inactive screens should be suspended from re-rendering. Defaults to `false`. Defaults to `true` when `enableFreeze()` is run at the top of the application. Requires `react-native-screens` version >=3.16.0. Only supported on iOS and Android.
fullScreenGestureEnabled(optional)	`boolean`	Only for: iOS Whether the gesture to dismiss should work on the whole screen. The behavior depends on iOS version. On iOS 18 and below: `false` by default. If enabled, swipe gesture will use `simple_push` transition animation by default. It can be changed with `animation` & `animationMatchesGesture` props, but default iOS swipe animation is not achievable. On iOS 26 and up: `true` by default to match new native behavior. You can still customize it with `animation` & `animationMatchesGesture` props. Doesn't affect the behavior of screens presented modally.
fullScreenGestureShadowEnabled(optional)	`boolean`	Deprecated: since iOS 26. iOS iOS 18 and below. Controls whether the full screen dismiss gesture has shadow under view during transition. The gesture uses custom transition and thus doesn't have a shadow by default. When enabled, a custom shadow view is added during the transition which tries to mimic the default iOS shadow. Defaults to `true`. This does not affect the behavior of transitions that don't use gestures, enabled by `fullScreenGestureEnabled` prop.
gestureDirection(optional)	`ScreenProps[swipeDirection]`	Only for: iOS Sets the direction in which you should swipe to dismiss the screen. When using `vertical` option, options `fullScreenGestureEnabled: true`, `animationMatchesGesture: true` and `animation: 'slide_from_bottom'` are set by default. Supported values: `vertical` – dismiss screen vertically `horizontal` – dismiss screen horizontally (default)
gestureEnabled(optional)	`boolean`	Only for: iOS Whether you can use gestures to dismiss this screen. Defaults to `true`. Only supported on iOS.
gestureResponseDistance(optional)	`ScreenProps[gestureResponseDistance]`	Only for: iOS Use it to restrict the distance from the edges of screen in which the gesture should be recognized. To be used alongside `fullScreenGestureEnabled`.
header(optional)	`(props: NativeStackHeaderProps) => React.ReactNode`	Function that given `HeaderProps` returns a React Element to display as a header.
headerBackButtonDisplayMode(optional)	`ScreenStackHeaderConfigProps[backButtonDisplayMode]`	Only for: iOS, web How the back button displays icon and title. Supported values: "default" - Displays one of the following depending on the available space: previous screen's title, generic title (e.g. 'Back') or no title (only icon). "generic" – Displays one of the following depending on the available space: generic title (e.g. 'Back') or no title (only icon). "minimal" – Always displays only the icon without a title. The space-aware behavior is disabled when: The iOS version is 13 or lower Custom font family or size is set (e.g. with `headerBackTitleStyle`) Back button menu is disabled (e.g. with `headerBackButtonMenuEnabled`) In such cases, a static title and icon are always displayed. Defaults to "default" on iOS, and "minimal" on other platforms. Only supported on iOS and Web.
headerBackButtonMenuEnabled(optional)	`boolean`	Only for: iOS Boolean indicating whether to show the menu on longPress of iOS >= 14 back button. Defaults to `true`. Requires `react-native-screens` version >=3.3.0. Only supported on iOS.
headerBackground(optional)	`() => React.ReactNode`	Function which returns a React Element to render as the background of the header. This is useful for using backgrounds such as an image, a gradient, blur effect etc. You can use this with `headerTransparent` to render content underneath a translucent header.
headerBackIcon(optional)	`{ source: ImageSourcePropType, type: 'image' }`	Icon to display in the header as the icon in the back button. Defaults to back icon image for the platform A chevron on iOS An arrow on Android Example `headerBackIcon: { type: 'image', source: require('./back-icon.png'), }`
headerBackImageSource(optional)	`ImageSourcePropType`	Deprecated: Use `headerBackIcon` instead. Image to display in the header as the icon in the back button.
headerBackTitle(optional)	`string`	Only for: iOS, web Title string used by the back button on iOS. Defaults to the previous scene's title. On iOS the text might be shortened to "Back" or arrow icon depending on the available space, following native iOS behaviour. See `headerBackButtonDisplayMode` to read about limitations and interactions with other props. Use `headerBackButtonDisplayMode: "minimal"` to hide it. Only supported on iOS and Web.
headerBackTitleStyle(optional)	`StyleProp<{ fontFamily: string, fontSize: number }>`	Only for: iOS, web Style object for header back title. Supported properties: fontFamily fontSize Only supported on iOS and Web.
headerBackVisible(optional)	`boolean`	Whether the back button is visible in the header. You can use it to show a back button alongside `headerLeft` if you have specified it. This will have no effect on the first screen in the stack.
headerBlurEffect(optional)	`ScreenStackHeaderConfigProps[blurEffect]`	Only for: iOS Blur effect for the translucent header. The `headerTransparent` option needs to be set to `true` for this to work. Note: Using both `headerBlurEffect` and `scrollEdgeEffects` (>= iOS 26) simultaneously may cause overlapping effects. Only supported on iOS.
headerLargeStyle(optional)	`StyleProp<{ backgroundColor: ColorValue }>`	Only for: iOS Style of the header when a large title is shown. The large title is shown if `headerLargeTitle` is `true` and the edge of any scrollable content reaches the matching edge of the header. Supported properties: backgroundColor Only supported on iOS.
headerLargeTitle(optional)	`boolean`	Deprecated: Use `headerLargeTitleEnabled` instead. Whether to enable header with large title which collapses to regular header on scroll.
headerLargeTitleEnabled(optional)	`boolean`	Only for: iOS Whether to enable header with large title which collapses to regular header on scroll. For large title to collapse on scroll, the content of the screen should be wrapped in a scrollable view such as `ScrollView` or `FlatList`. If the scrollable area doesn't fill the screen, the large title won't collapse on scroll. You also need to specify `contentInsetAdjustmentBehavior="automatic"` in your `ScrollView`, `FlatList` etc. Only supported on iOS.
headerLargeTitleShadowVisible(optional)	`boolean`	Only for: iOS Whether drop shadow of header is visible when a large title is shown. Only supported on iOS.
headerLargeTitleStyle(optional)	`StyleProp<{ color: ColorValue, fontFamily: string, fontSize: number, fontWeight: string }>`	Only for: iOS Style object for large title in header. Supported properties: fontFamily fontSize fontWeight color Only supported on iOS.
headerLeft(optional)	`(props: NativeStackHeaderBackProps) => React.ReactNode`	Function which returns a React Element to display on the left side of the header. This replaces the back button. See `headerBackVisible` to show the back button along side left element. Will be overriden by `headerLeftItems` on iOS.
headerRight(optional)	`(props: NativeStackHeaderItemProps) => React.ReactNode`	Function which returns a React Element to display on the right side of the header. Will be overriden by `headerRightItems` on iOS.
headerSearchBarOptions(optional)	`SearchBarProps`	Options to render a native search bar. You also need to specify `contentInsetAdjustmentBehavior="automatic"` in your `ScrollView`, `FlatList` etc. If you don't have a `ScrollView`, specify `headerTransparent: false`.
headerShadowVisible(optional)	`boolean`	Whether to hide the elevation shadow (Android) or the bottom border (iOS) on the header.
headerShown(optional)	`boolean`	Whether to show the header. The header is shown by default. Setting this to `false` hides the header.
headerStyle(optional)	`StyleProp<{ backgroundColor: ColorValue }>`	Style object for header. Supported properties: backgroundColor
headerTintColor(optional)	`ColorValue`	Tint color for the header. Changes the color of back button and title.
headerTitle(optional)	`string \| (props: { children: string, tintColor: ColorValue }) => React.ReactNode`	String or a function that returns a React Element to be used by the header. Defaults to screen `title` or route name. When a function is passed, it receives `tintColor` and`children` in the options object as an argument. The title string is passed in `children`. Note that if you render a custom element by passing a function, animations for the title won't work.
headerTitleAlign(optional)	`'left' \| 'center'`	How to align the the header title. Defaults to `left` on platforms other than iOS. Not supported on iOS. It's always `center` on iOS and cannot be changed.
headerTitleStyle(optional)	`StyleProp<Pick<TextStyle, 'fontFamily' \| 'fontSize' \| 'fontWeight'> & { color: ColorValue }>`	Style object for header title. Supported properties: fontFamily fontSize fontWeight color
headerTransparent(optional)	`boolean`	Boolean indicating whether the navigation bar is translucent. Setting this to `true` makes the header absolutely positioned, and changes the background color to `transparent` unless specified in `headerStyle`.
keyboardHandlingEnabled(optional)	`boolean`	Only for: iOS Whether the keyboard should hide when swiping to the previous screen. Defaults to `false`.
navigationBarColor(optional)	`ColorValue`	Deprecated: For all apps targeting Android SDK 35 or above edge-to-edge is enabled by default. This prop is subject to removal in the future. See: https://developer.android.com/about/versions/15/behavior-changes-15#ux. Android Sets the navigation bar color. Defaults to initial navigation bar color.
navigationBarHidden(optional)	`boolean`	Only for: Android Sets the visibility of the navigation bar. Defaults to `false`.
navigationBarTranslucent(optional)	`boolean`	Deprecated: For all apps targeting Android SDK 35 or above edge-to-edge is enabled by default. This prop is subject to removal in the future. See: https://developer.android.com/about/versions/15/behavior-changes-15#ux. Android Boolean indicating whether the content should be visible behind the navigation bar. Defaults to `false`.
orientation(optional)	`ScreenProps[screenOrientation]`	The display orientation to use for the screen. Supported values: "default" - resolves to "all" without "portrait_down" on iOS. On Android, this lets the system decide the best orientation. "all": all orientations are permitted. "portrait": portrait orientations are permitted. "portrait_up": right-side portrait orientation is permitted. "portrait_down": upside-down portrait orientation is permitted. "landscape": landscape orientations are permitted. "landscape_left": landscape-left orientation is permitted. "landscape_right": landscape-right orientation is permitted. Only supported on iOS and Android.
presentation(optional)	`Exclude<ScreenProps[stackPresentation], 'push'> \| 'card'`	How should the screen be presented. Supported values: "card": the new screen will be pushed onto a stack, which means the default animation will be slide from the side on iOS, the animation on Android will vary depending on the OS version and theme. "modal": the new screen will be presented modally. this also allows for a nested stack to be rendered inside the screen. "transparentModal": the new screen will be presented modally, but in addition, the previous screen will stay so that the content below can still be seen if the screen has translucent background. "containedModal": will use "UIModalPresentationCurrentContext" modal style on iOS and will fallback to "modal" on Android. "containedTransparentModal": will use "UIModalPresentationOverCurrentContext" modal style on iOS and will fallback to "transparentModal" on Android. "fullScreenModal": will use "UIModalPresentationFullScreen" modal style on iOS and will fallback to "modal" on Android. "formSheet": will use "UIModalPresentationFormSheet" modal style on iOS and will fallback to "modal" on Android. "pageSheet": will use "UIModalPresentationPageSheet" modal style on iOS and will fallback to "modal" on Android. Only supported on iOS and Android.
scrollEdgeEffects(optional)	`{ bottom: ScrollEdgeEffect, left: ScrollEdgeEffect, right: ScrollEdgeEffect, top: ScrollEdgeEffect }`	Only for: iOS Configures the scroll edge effect for the content ScrollView (the ScrollView that is present in first descendants chain of the Screen). Depending on values set, it will blur the scrolling content below certain UI elements (header items, search bar) for the specified edge of the ScrollView. When set in nested containers, i.e. Native Stack inside Native Bottom Tabs, or the other way around, the ScrollView will use only the innermost one's config. Note: Using both `headerBlurEffect` and `scrollEdgeEffects` (>= iOS 26) simultaneously may cause overlapping effects. Edge effects can be configured for each edge separately. The following values are currently supported: `automatic` - the automatic scroll edge effect style, `hard` - a scroll edge effect with a hard cutoff and dividing line, `soft` - a soft-edged scroll edge effect, `hidden` - no scroll edge effect. Defaults to `automatic` for each edge.
sheetAllowedDetents(optional)	`number[] \| 'fitToContents'`	Describes heights where a sheet can rest. Works only when `presentation` is set to `formSheet`. Heights should be described as fraction (a number from `[0, 1]` interval) of screen height / maximum detent height. You can pass an array of ascending values each defining allowed sheet detent. iOS accepts any number of detents, while Android is limited to three. There is also possibility to specify `fitToContents` literal, which intents to set the sheet height to the height of its contents. Note that the array must be sorted in ascending order. This invariant is verified only in developement mode, where violation results in error. Android is limited to up 3 values in the array -- any surplus values, beside first three are ignored. Defaults to `[1.0]`.
sheetCornerRadius(optional)	`number`	The corner radius that the sheet will try to render with. Works only when `presentation` is set to `formSheet`. If set to non-negative value it will try to render sheet with provided radius, else it will apply system default. If left unset system default is used.
sheetElevation(optional)	`number`	Only for: Android Integer value describing elevation of the sheet, impacting shadow on the top edge of the sheet. Not dynamic - changing it after the component is rendered won't have an effect. Defaults to `24`.
sheetExpandsWhenScrolledToEdge(optional)	`boolean`	Only for: iOS Whether the sheet should expand to larger detent when scrolling. Works only when `presentation` is set to `formSheet`. Defaults to `true`.
sheetGrabberVisible(optional)	`boolean`	Only for: iOS Boolean indicating whether the sheet shows a grabber at the top. Works only when `presentation` is set to `formSheet`. Defaults to `false`.
sheetInitialDetentIndex(optional)	`number \| 'last'`	Index of the detent the sheet should expand to after being opened. Works only when `stackPresentation` is set to `formSheet`. If the specified index is out of bounds of `sheetAllowedDetents` array, in dev environment more error will be thrown, in production the value will be reset to default value. Additionaly there is `last` value available, when set the sheet will expand initially to last (largest) detent. Defaults to `0` - which represents first detent in the detents array.
sheetLargestUndimmedDetentIndex(optional)	`number \| 'none' \| 'last'`	The largest sheet detent for which a view underneath won't be dimmed. Works only when `presentation` is set to `formSheet`. This prop can be set to an number, which indicates index of detent in `sheetAllowedDetents` array for which there won't be a dimming view beneath the sheet. Additionaly there are following options available: `none` - there will be dimming view for all detents levels, `last` - there won't be a dimming view for any detent level.
sheetResizeAnimationEnabled(optional)	`boolean`	Only for: Android Whether the default native animation should be used when the sheet's with `fitToContents` content size changes. When set to `true`, the sheet uses internal logic to synchronize size updates and translation animations during entry, exit, or content updates. This ensures a smooth transition for standard, static content mounting/unmounting. When set to `false`, the internal animation and translation logic is ignored. This allows the sheet to adjust its size dynamically based on the current dimensions of the content provided by the developer, allowing implementing custom resizing animations. Defaults to `true`.
sheetShouldOverflowTopInset(optional)	`boolean`	Only for: Android Whether the sheet content should be rendered behind the Status Bar or display cutouts. When set to `true`, the sheet will extend to the physical edges of the stack, allowing content to be visible behind the status bar or display cutouts. Detent ratios in sheetAllowedDetents will be measured relative to the full stack height. When set to `false`, the sheet's layout will be constrained by the inset from the top and the detent ratios will then be measured relative to the adjusted height (excluding the top inset). This means that sheetAllowedDetents will result in different sheet heights depending on this prop. Defaults to `false`.
statusBarAnimation(optional)	`ScreenProps[statusBarAnimation]`	Only for: android, iOS Sets the status bar animation (similar to the `StatusBar` component). On Android, setting either `fade` or `slide` will set the transition of status bar color. On iOS, this option applies to appereance animation of the status bar. Requires setting `View controller-based status bar appearance -> YES` (or removing the config) in your `Info.plist` file. Defaults to `fade` on iOS and `none` on Android. Only supported on Android and iOS.
statusBarBackgroundColor(optional)	`ColorValue`	Deprecated: For all apps targeting Android SDK 35 or above edge-to-edge is enabled by default. This prop is subject to removal in the future. See: https://developer.android.com/about/versions/15/behavior-changes-15#ux. Android Sets the status bar color (similar to the `StatusBar` component). Defaults to initial status bar color.
statusBarHidden(optional)	`boolean`	Only for: android, iOS Whether the status bar should be hidden on this screen. Requires setting `View controller-based status bar appearance -> YES` in your Info.plist file. Only supported on Android and iOS.
statusBarStyle(optional)	`ScreenProps[statusBarStyle]`	Only for: android, iOS Sets the status bar color (similar to the `StatusBar` component). Requires setting `View controller-based status bar appearance -> YES` (or removing the config) in your `Info.plist` file. `auto` and `inverted` are supported only on iOS. On Android, they will fallback to `light`. Defaults to `auto` on iOS and `light` on Android. Only supported on Android and iOS.
statusBarTranslucent(optional)	`boolean`	Deprecated: For all apps targeting Android SDK 35 or above edge-to-edge is enabled by default. This prop is subject to removal in the future. See: https://developer.android.com/about/versions/15/behavior-changes-15#ux. Android Sets the translucency of the status bar. Defaults to `false`.
title(optional)	`string`	String that can be displayed in the header as a fallback for `headerTitle`.
unstable_headerLeftItems(optional)	`(props: NativeStackHeaderItemProps) => NativeStackHeaderItem[]`	Only for: iOS Function which returns an array of items to display as on the left side of the header. Overrides `headerLeft`. This is an unstable API and might change in the future.
unstable_headerRightItems(optional)	`(props: NativeStackHeaderItemProps) => NativeStackHeaderItem[]`	Only for: iOS Function which returns an array of items to display as on the right side of the header. Overrides `headerRight`. This is an unstable API and might change in the future.
unstable_sheetFooter(optional)	`() => React.ReactNode`	Only for: Android Footer component that can be used alongside formSheet stack presentation style. This option is provided, because due to implementation details it might be problematic to implement such layout with JS-only code. Note that this prop is marked as unstable and might be subject of breaking changes, including removal, in particular when we find solution that will make implementing it with JS straightforward.

`NativeStackNavigationProp`

Android

iOS

tvOS

Web

Literal Type: union

Acceptable values are: NavigationProp<ParamList, RouteName, NavigatorID, StackNavigationState<ParamList>, NativeStackNavigationOptions, NativeStackNavigationEventMap> | StackActionHelpers<ParamList>

`NativeStackOptionsArgs`

Android

iOS

tvOS

Web

Type: NativeStackScreenProps<ParamList, RouteName, NavigatorID> extended by:

Property	Type	Description
theme	`Theme`	-

`PickPartial`

Android

iOS

tvOS

Web

Literal Type: union

The list of input keys will become optional, everything else will remain the same.

Acceptable values are: Omit<T, K> | Partial<Pick<T, K>>

`RedirectConfig`

Android

iOS

tvOS

Web

Property	Type	Description
destination	`string`	-
destinationContextKey	`string`	-
external(optional)	`boolean`	-
methods(optional)	`string[]`	-
permanent(optional)	`boolean`	-
source	`string`	-

`RelativePathString`

Android

iOS

tvOS

Web

Literal Type: union

Acceptable values are: ./{string} | ../{string} | '..'

`ResultState`

Android

iOS

tvOS

Web

Type: PartialState<NavigationState> extended by:

Property	Type	Description
state(optional)	`ResultState`	-

`RoutePath`

Android

iOS

tvOS

Web

Type: Exclude<Extract[pathname], RelativePathString | ExternalPathString>

`ScreenProps`

Android

iOS

tvOS

Web

Property	Type	Description
dangerouslySingular(optional)	`SingularOptions`	-
getId(optional)	`({ params }: { params: Record<string, any> }) => string \| undefined`	-
initialParams(optional)	`Record<string, any>`	-
listeners(optional)	`ScreenListeners<TState, TEventMap> \| (prop: { navigation: any, route: RouteProp<ParamListBase, string> }) => ScreenListeners<TState, TEventMap>`	-
name(optional)	`string`	Name is required when used inside a Layout component.
options(optional)	`TOptions \| (prop: { navigation: any, route: RouteProp<ParamListBase, string> }) => TOptions`	-
redirect(optional)	`boolean`	Redirect to the nearest sibling route. If all children are `redirect={true}`, the layout will render `null` as there are no children to render.

`SearchOrHash`

Android

iOS

tvOS

Web

Literal Type: union

Acceptable values are: ?{string} | #{string}

`SingularOptions`

Android

iOS

tvOS

Web

Type: boolean or object shaped as below:

`(name, params) => string | undefined`

Parameter	Type	Description
name(index signature)	`string`	-
params(index signature)	`UnknownOutputParams`	-

`SitemapType`

Android

iOS

tvOS

Web

Property	Type	Description
children	`SitemapType[]`	-
contextKey	`string`	-
filename	`string`	-
href	`string \| Href`	-
isGenerated	`boolean`	-
isInitial	`boolean`	-
isInternal	`boolean`	-