Expo Router Link

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

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>

Controls how image-based icons are rendered on iOS.

• 'template': iOS applies tint color to the icon
• 'original': Preserves original icon colors

See: Apple documentation for more information.

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.