navigation/link

22 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Link asChild prop for custom layout control

Use the asChild prop on Link to pass the navigation onPress event to a child component like Pressable instead of wrapping children in Text. This gives full control over layout when using non-text children in a Link.

Link prefetch prop for screen preloading

Setting the prefetch prop on a Link component enables prefetching of the target screen when the component is rendered, allowing faster navigation by preparing the screen in advance. Usage: <Link href='/about' prefetch />

Prefetch limitations in stack navigators

When a screen is preloaded in a stack navigator via prefetch, it has these limitations: cannot use the imperative router API, cannot update options with useNavigation().setOptions(), and cannot listen to events from the navigator (focus, tabPress, etc.). The navigation object is updated once you navigate to the screen.

Link component for navigation

The Link component from 'expo-router' is the typical way to link to pages. The href prop specifies the route using the same URL pattern as router.navigate(). By default, Link renders its children inside a Text element.

Link component uses href instead of to

Expo Router's Link component uses the href prop instead of React Navigation's to prop. Example: Expo Router uses <Link href="/settings" /> instead of React Navigation's <Link to="Settings" />.

Use asChild prop instead of custom Link with useLinkProps

React Navigation users often create a custom Link component using useLinkProps to control the child component. This is not necessary in Expo Router. Instead, use the asChild prop on the Link component.

Link.MenuAction destructive prop

The Link.MenuAction component accepts a destructive boolean prop to style destructive actions (like delete or block) differently. Example: <Link.MenuAction title="Block" icon="nosign" destructive onPress={handleBlockPress} />

Link.Menu nesting

You can nest menus by placing a Link.Menu inside another Link.Menu. A nested menu requires a title and icon prop. Example: <Link.Menu title="More" icon="ellipsis"><Link.MenuAction title="Copy" icon="doc.on.doc" onPress={() => {}} /></Link.Menu>

useIsPreview hook

The useIsPreview() hook returns true if a component or screen is being rendered inside a preview, allowing you to adjust behavior accordingly. This can be used to customize how a component displays when in preview mode.

Link preview doesn't support replace mode

Using link previews with the replace navigation mode is not supported. Previews can only be used with the default push navigation mode.

Link preview clunky animation with JavaScript tabs and Slot

When navigating within JavaScript tabs or Slot, preview transition animations may appear clunky because React's delayed rendering conflicts with the native preview animation starting immediately. Use native tabs and stack navigators to prevent this issue.

Link.Trigger required with preview or menu

If you render a Link with a preview or context menu, a Link.Trigger component is required. An exception will be thrown if it is missing. Additionally, no non-Link.* components can be placed directly inside Link when using preview mode.

Link preview doesn't support dynamic path changes

Changing the href prop's path dynamically while the preview is open is not supported. You may only modify the query parameters dynamically.

SF Symbols for Link.MenuAction icons

Icons for Link.MenuAction are specified using SF Symbols, which is Apple's symbol library. Icons like 'square.and.arrow.up', 'nosign', 'person.crop.circle.badge.plus', and 'doc.on.doc' are examples of valid SF Symbol names.

Link asChild with one Link.Trigger child only

When using Link with the asChild prop, you may only specify one child for Link.Trigger. The onPress event will be forwarded to that child only.

Link preview iOS-only feature SDK 54+

Link preview (also known as 'Peek and Pop') is an iOS-only feature available in SDK 54 and later. It shows users a preview popup of the screen for a link.

Link preview basic structure

To add a link preview, replace the link's content with a Link.Trigger component and add a Link.Preview component inside the Link. Example: <Link href="/about"><Link.Trigger>About</Link.Trigger><Link.Preview /></Link>

Link.Preview custom size with width and height

The Link.Preview component accepts width and height style properties to suggest a preferred preview size. The system will consider these preferences but may override them based on available space or platform behavior. Example: <Link.Preview style={{ width: 300, height: 200 }} />

Link.Preview custom content via children

You can pass custom content to the Link.Preview component via children to replace the default preview of the link target. The custom content will be rendered instead of the default page snapshot.

Link.Menu and Link.MenuAction for context menu

To render a context menu next to the preview, add a Link.Menu component with Link.MenuAction children. Each Link.MenuAction has a title, icon (SF Symbols), and onPress handler. Example: <Link.Menu><Link.MenuAction title="Share" icon="square.and.arrow.up" onPress={handleSharePress} /></Link.Menu>

Missing back button in modal or screen

If a modal or screen is expected to have a back button but doesn't, add unstable_settings with initialRouteName property to the route's layout. Initial routes are somewhat unique to mobile apps and fit awkwardly in the system.

Example: unstable_settings for initial route in layout

export const unstable_settings = { initialRouteName: 'index', };

Give your agent this brain