expo router navigation

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

Expo Router APIs in DOM components

DOM components can use Expo Router APIs like <Link /> and useRouter for navigation. However, synchronous APIs like useLocalSearchParams(), useGlobalSearchParams(), usePathname(), useSegments(), useRootNavigation(), and useRootNavigationState() are not automatically supported. Read these values outside DOM components and pass them as props. Also, router.canGoBack() and router.canDismiss() are unsupported and require manual marshalling.

Layout routes cannot be DOM components

Layout routes (_layout) can never be DOM components because DOM components cannot render native children. You can render DOM components from layout routes to create headers and backgrounds, but the layout route itself must always be native.

Avoid standard <a> anchor elements in DOM components

Avoid using standard web <a /> anchor elements for navigation in DOM components, as they change the DOM component origin in a way that users may not be able to navigate back from. Prefer launching WebBrowsers if you want to present external websites.

Example: Expo Router Link in DOM component

```tsx my-component.tsx (web) 'use dom'; import Link from 'expo-router/link'; export default function DOMComponent() { return ( <div> <h1>Hello, world!</h1> <Link href="/about">About</Link> </div> ); } ``` This example shows using Expo Router's Link component inside a DOM component for navigation.

Expo Router is a file-based router for React Native and web

Expo Router is a file-based router for React Native and web applications that allows managing navigation between screens in your app, enabling users to move seamlessly between different parts of your app's UI using the same components on multiple platforms (Android, iOS, and web).

Root layout file role in Expo Router

The root layout file in Expo Router serves as the foundational component that wraps your application. It is the entry point for your file-based routing structure and manages the overall navigation structure of the app.

Creating file-based routes in Expo Router

To create a file-based route in Expo Router, create a file with the desired route name in your app directory. For an 'about' page, you would create a file named about.js or about.tsx in the appropriate directory structure that matches your routing hierarchy.

Expo Router default icon library for tabBarIcon

The glossary does not specify what icon library Expo Router uses for tabBarIcon by default. Refer to Expo Router documentation for current tabBarIcon icon library information.

Notification Tester app uses Expo Router

The Notification Tester app in the expo monorepo is a standard Expo app that uses Expo Router for navigation and uses prebuild.

expo-router standard-navigation integration added

SDK 57.0.0 adds a `standard-navigation` integration to expo-router.

expo-router drawer content components re-exported

SDK 57.0.0 re-exports drawer content components and types from `expo-router/drawer`.

expo-router native-tabs disabled tab press event

In SDK 57.0.0, native-tabs emit a `tabPress` event with `isPrevented: true` when a `disabled` tab is tapped, without selecting it.

expo-router unstable_nativeProps added to native Stack options

SDK 57.0.0 adds `unstable_nativeProps` to native Stack options in expo-router.

expo-router NativeTabs.Trigger testID and accessibilityLabel props

SDK 57.0.0 adds `testID` and `accessibilityLabel` props to `NativeTabs.Trigger` in expo-router.

expo-router Theme type export

SDK 57.0.0 exports the `Theme` type from the root `expo-router` entry point.

Initial release of expo-router

expo-router has had its initial release.

expo-router Stack.Toolbar.Badge support on menu icons in header placements

SDK 57.0.0 adds support for `Stack.Toolbar.Badge` on `Stack.Toolbar.Menu` icons in header left/right placements on Android.

Give your agent this brain