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.

The error that was thrown.

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

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.

Defines the rectangle used for the zoom transition's alignment. This rectangle is specified in the zoomed screen's coordinate space.

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.

Custom image loaded using useImage() hook from expo-image. Takes priority over icon (SF Symbol) when both are provided.

import { useImage } from 'expo-image';
import { Link } from 'expo-router';

const customIcon = useImage('https://simpleicons.org/icons/expo.svg', {
  maxWidth: 24,
  maxHeight: 24,
});

<Link.Menu image={customIcon} title="Menu">
  <Link.MenuAction title="Action" onPress={() => {}} />
</Link.Menu>

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

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.

Custom image loaded using useImage() hook from expo-image. Takes priority over icon (SF Symbol) when both are provided.

import { useImage } from 'expo-image';
import { Link } from 'expo-router';

const customIcon = useImage('https://simpleicons.org/icons/expo.svg', {
  maxWidth: 24,
  maxHeight: 24,
});

<Link.Menu title="Menu">
  <Link.MenuAction image={customIcon} title="Action" onPress={() => {}} />
</Link.Menu>

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.

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 for custom header when asChild is true.

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

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

Only applies to placement="left" and placement="right".

Child elements to compose the toolbar. Can include Stack.Toolbar.Button, Stack.Toolbar.Menu, Stack.Toolbar.View, Stack.Toolbar.Spacer, and Stack.Toolbar.SearchBarSlot (bottom only) components.

The placement of the toolbar.

• 'left': Renders items in the left area of the header.
• 'right': Renders items in the right area of the header.
• 'bottom': Renders items in the bottom toolbar (iOS only).

The title to display for the back button.

The display mode for the back button.

Whether to hide the back button.

Custom image source for the back button.

Style for the back button title.

Whether to show a context menu when long pressing the back button.

The text to display as the badge

There are two ways to specify the content of the button:

import { Stack } from 'expo-router';

export default function Page() {
  return (
    <>
      <Stack.Toolbar placement="left">
        <Stack.Toolbar.Button icon="star.fill">As text passed as children</Stack.Toolbar.Button>
      </Stack.Toolbar>
      <ScreenContent />
    </>
  );
}

import { Stack } from 'expo-router';

export default function Page() {
  return (
    <>
      <Stack.Toolbar placement="left">
        <Stack.Toolbar.Button>
          <Stack.Toolbar.Icon sf="star.fill" />
          <Stack.Toolbar.Label>As components</Stack.Toolbar.Label>
          <Stack.Toolbar.Badge>3</Stack.Toolbar.Badge>
        </Stack.Toolbar.Button>
      </Stack.Toolbar>
      <ScreenContent />
    </>
  );
}

Whether the button should be hidden.

Whether to hide the shared background.

Icon to display in the button.

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

Note: When used in placement="bottom", only string SFSymbols are supported. Use the image prop to provide custom images.

Image to display in the button.

Note: This prop is only supported in toolbar with placement="bottom".

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.

Menu content - can include icons, labels, badges and menu actions.

<Stack.Toolbar.Menu>
  <Stack.Toolbar.Icon sfSymbol="ellipsis.circle" />
  <Stack.Toolbar.Label>Options</Stack.Toolbar.Label>
  <Stack.Toolbar.MenuAction onPress={() => {}}>Action 1</Stack.Toolbar.MenuAction>
</Stack.Toolbar.Menu>

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

See: Apple documentation for more information.

The preferred size of the menu elements.

Note: This prop is only supported in Stack.Toolbar.Bottom.

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.

Note: When used in placement="bottom", only string SFSymbols are supported. Use the image prop to provide custom images.

Image to display for the menu item.

Note: This prop is only supported in toolbar with placement="bottom".

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.

Image to display for the menu action.

Note: This prop is only supported in Stack.Toolbar.Bottom.

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.

Whether the search bar slot should be hidden.