Expo Router

Used to customize the Link component. It will forward all props to the first child of the Link. Note that the child component must accept onPress or onClick props. The href and role are also passed to the child.

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

export default function Route() {
 return (
  <View>
   <Link href="/home" asChild>
     <Pressable>
      <Text>Home</Text>
     </Pressable>
   </Link>
  </View>
 );
}

On native, this can be used with CSS interop tools like Nativewind. On web, this sets the HTML class directly.

When navigating in a Stack, if the target is valid then screens in the history that matches the uniqueness constraint will be removed.

If used with push, the history will be filtered even if no navigation occurs.

While in a stack, this will dismiss screens until the provided href is reached. If the href is not found, it will instead replace the current screen with the provided href.

import { Link } from 'expo-router';
import { View } from 'react-native';

export default function Route() {
 return (
  <View>
    <Link dismissTo href="/feed">Close modal</Link>
  </View>
 );
}

The path of the route to navigate to. 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.

import { Link } from 'expo-router';
import { View } from 'react-native';

export default function Route() {
 return (
  <View>
   <Link href="/about">About</Link>
   <Link
    href={{
      pathname: '/user/[id]',
      params: { id: 'bacon' }
    }}>
      View user
   </Link>
  </View>
 );
}

This function is called on press. Text intrinsically supports press handling with a default highlight state (which can be disabled with suppressHighlighting).

Prefetches the route when the component is rendered on a focused screen.

Always pushes a new route, and never pops or replaces to existing route. You can push the current route multiple times or with new parameters.

import { Link } from 'expo-router';
import { View } from 'react-native';

export default function Route() {
 return (
  <View>
    <Link push href="/feed">Login</Link>
  </View>
 );
}

Relative URL references are either relative to the directory or the document. By default, relative paths are relative to the document.

See: Resolving relative references in Mozilla's documentation.

Removes the current route from the history and replace it with the specified URL. This is useful for redirects.

import { Link } from 'expo-router';
import { View } from 'react-native';

export default function Route() {
 return (
  <View>
    <Link replace href="/feed">Login</Link>
  </View>
 );
}

Replaces the initial screen with the current route.

If true, the menu item will be displayed as destructive.

See: Apple documentation for more information.

The preferred size of the menu elements. elementSize property is ignored when palette is used.

See: Apple documentation for more information.

Optional SF Symbol displayed alongside the menu item.

If true, the menu will be displayed inline. This means that the menu will not be collapsed

See: Apple documentation for more information.

If true, the menu will be displayed as a palette. This means that the menu will be displayed as one row. The elementSize property is ignored when palette is used, all items will be elementSize="small". Use elementSize="medium" instead of palette to display actions with titles horizontally.

Note: Palette menus are only supported in submenus.

See: Apple documentation for more information.

An optional subtitle for the submenu. Does not appear on inline menus.

See: Apple documentation for more information.

The title of the menu item

When true, renders children as a custom header component, replacing the default header entirely. Use this to implement fully custom header layouts.

The blur effect to apply to the header background on iOS. Common values include 'regular', 'prominent', 'systemMaterial', etc.

Child elements to compose the header. Can include Stack.Header.Title, Stack.Header.Left, Stack.Header.Right, Stack.Header.BackButton, and Stack.Header.SearchBar components.

Whether to hide the header completely. When set to true, the header will not be rendered.

Style properties for the large title header (iOS).

• backgroundColor: Background color of the large title header
• shadowColor: Set to 'transparent' to hide the large title shadow/border

Style properties for the standard-sized header.

• color: Tint color for header elements (similar to tintColor in React Navigation)
• backgroundColor: Background color of the header
• shadowColor: Set to 'transparent' to hide the header shadow/border

The text to display as the badge

There are two ways to specify the content of the header item:

import { Stack } from 'expo-router';

...
<Stack.Header.Button icon="star.fill">As text passed as children</Stack.Header.Button>

import { Stack } from 'expo-router';

...
<Stack.Header.Button>
  <Stack.Header.Icon sf="star.fill" />
  <Stack.Header.Label>As components</Stack.Header.Label>
  <Stack.Header.Badge>3</Stack.Header.Badge>
</Stack.Header.Button>

Whether the button should be hidden.

Whether to hide the shared background.

See: Official Apple documentation for more information.

Icon to display in the button.

Can be a string representing an SFSymbol or an image source.

Whether the button is in a selected state

See: Apple documentation for more information.

Whether to separate the background of this item from other header items.

Style for the label of the header item.

The tint color to apply to the button item

See: Apple documentation for more information.

The text to display as the label for the tab.

When true, renders children as a custom component in the header left area, replacing the default header left layout.

Child elements to compose the left area of the header. Can include Stack.Header.Button, Stack.Header.Menu, Stack.Header.Item, and Stack.Header.Spacer components.

There are two ways to specify the content of the menu header item - using props or child components:

import { Stack } from 'expo-router';

...
<Stack.Header.Menu icon="star.fill" title="As props">
 <Stack.Header.MenuAction>Action 1</Stack.Header.MenuAction>
</Stack.Header.Menu>

import { Stack } from 'expo-router';

...
<Stack.Header.Menu>
  <Stack.Header.Icon sf="star.fill" />
  <Stack.Header.Label>As components</Stack.Header.Label>
  <Stack.Header.Badge>3</Stack.Header.Badge>
  <Stack.Header.MenuAction>Action 1</Stack.Header.MenuAction>
</Stack.Header.Menu>

If true, the menu item will be displayed as destructive.

See: Apple documentation for more information.

Whether the menu should be hidden.

Whether to hide the shared background.

See: Official Apple documentation for more information.

Icon for the menu item.

Can be an SF Symbol name or an image source.

If true, the menu will be displayed inline. This means that the menu will not be collapsed

*Note: Inline menus are only supported in submenus.

See: Apple documentation for more information.

If true, the menu will be displayed as a palette. This means that the menu will be displayed as one row

Note: Palette menus are only supported in submenus.

See: Apple documentation for more information.

Whether to separate the background of this item from other header items.

Style for the label of the header item.

The tint color to apply to the button item

See: Apple documentation for more information.

Optional title to show on top of the menu.

Can be an Icon, Label or string title.

If true, the menu item will be displayed as destructive.

See: Apple documentation for more information.

If true, the menu item will be disabled and not selectable.

See: Apple documentation for more information.

An elaborated title that explains the purpose of the action.

If true, the menu item will be displayed as selected.

An optional subtitle for the menu item.

See: Apple documentation for more information.

If true, the menu will be kept presented after the action is selected.

This is marked as unstable, because when action is selected it will recreate the menu, which will close all opened submenus and reset the scroll position.

See: Apple documentation for more information.

When true, renders children as a custom component in the header right area, replacing the default header right layout.

Child elements to compose the right area of the header. Can include Stack.Header.Button, Stack.Header.Menu, Stack.Header.Item, and Stack.Header.Spacer components.

Whether the spacer should be hidden.

The width of the spacing element.

This is typically used to create space between header elements.

When true, renders children as a custom header component, replacing the default header entirely. Use this to implement fully custom header layouts.

The blur effect to apply to the header background on iOS. Common values include 'regular', 'prominent', 'systemMaterial', etc.

Child elements to compose the header. Can include Stack.Header.Title, Stack.Header.Left, Stack.Header.Right, Stack.Header.BackButton, and Stack.Header.SearchBar components.

Whether to hide the header completely. When set to true, the header will not be rendered.

Style properties for the large title header (iOS).

• backgroundColor: Background color of the large title header
• shadowColor: Set to 'transparent' to hide the large title shadow/border

Style properties for the standard-sized header.

• color: Tint color for header elements (similar to tintColor in React Navigation)
• backgroundColor: Background color of the header
• shadowColor: Set to 'transparent' to hide the header shadow/border

Can be any React node.

Whether the view should be hidden.

Whether to hide the shared background.

See: Official Apple documentation for more information.

The error that was thrown.

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

The title of the menu item.

If true, the menu item will be displayed as destructive.

See: Apple documentation for more information.

If true, the menu item will be disabled and not selectable.

See: Apple documentation for more information.

An elaborated title that explains the purpose of the action.

Whether the menu element should be hidden.

See: Apple documentation for more information.

SF Symbol displayed alongside the menu item.

If true, the menu item will be displayed as selected.

An optional subtitle for the menu item.

See: Apple documentation for more information.

The title of the menu item.

If true, the menu will be kept presented after the action is selected.

This is marked as unstable, because when action is selected it will recreate the menu, which will close all opened submenus and reset the scroll position.

See: Apple documentation for more information.

Custom styles for the preview container.

Note that some styles may not work, as they are limited or reset by the native view

A shorthand for enabling the Apple Zoom Transition on this link trigger.

When set to true, the trigger will be wrapped with Link.AppleZoom. If another Link.AppleZoom is already used inside Link.Trigger, an error will be thrown.

The path of the route to navigate to. 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.

import { Redirect } from 'expo-router';

export default function RedirectToAbout() {
 return (
   <Redirect href="/about" />
 );
}

Relative URL references are either relative to the directory or the document. By default, relative paths are relative to the document.

See: Resolving relative references in Mozilla's documentation.

Replaces the initial screen with the current route.

The family of the vector icon.

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

The name of the vector icon.