Singular routes dangerouslySingular warning
Singular routes are currently flagged as dangerouslySingular due to an upstream issue with react-native-screens. Expo is working with Software Mansion to resolve the issue.
Expo & React Native · all subjects
expo router
41 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Singular routes enforce unique screen instances
When a Stack uses singular constraints, any time a new screen is pushed, the history is scanned and any matching screens are removed to ensure only a singular version exists in the stack.
dangerouslySingular Stack.Screen option signature
The dangerouslySingular option on Stack.Screen can be either true to use the default singular function, or a custom function with signature (routeName: string, params: Record<string, string | string[]>) => string | undefined. The default singular function returns the screen's pathname without search params or the hash.
dangerouslySingular on Link component
The dangerouslySingular option can be added to the Link component. It accepts either true for default behavior or a function that returns the singular identifier string or undefined. Example: <Link href="/unique-link" dangerouslySingular /> or <Link href="/unique-link" dangerouslySingular={(name) => name === 'unique-link' ? name : undefined} />
dangerouslySingular with router.navigate and router.push
The imperative router API accepts a dangerouslySingular option in both navigate and push methods. It can be true or a function: router.navigate('/unique-link', { dangerouslySingular: true }), router.navigate('/unique-link', { dangerouslySingular: name => (name === 'unique-link' ? name : undefined) }), router.push('/unique-link', { dangerouslySingular: true }), or router.push('/unique-link', { dangerouslySingular: name => (name === 'unique-link' ? name : undefined) })
navigate vs push difference with singular constraints
The navigate and push events apply the singular constraint differently. With navigate, the constraint only applies if the current route is changed. With push, the constraint always applies. When navigating to a route that is already current, navigate will not apply the singular constraint, but push will.
Tab navigation with Expo Router in tutorial
To add a tab bar with two tabs using Expo Router, specify the color scheme as dark theme with color #25292e for screen backgrounds, headers, and tab bar, white text, and yellow (#ffd33d) for the selected tab indicator. Each tab should have a fitting icon such as a house for Home and an info circle for About.
Photo viewer with expo-image library
Display images on the Home screen using the expo-image library. Show a background image with rounded corners in the center of the screen, with two buttons stacked vertically below it: a prominent 'Choose a photo' button with yellow border and white background, and a plain 'Use this photo' button with white text.
Expo Router Link component for opening URLs
Use the Link component from expo-router to open a URL. It wraps a Text component on native platforms and an <a> element on the web, and uses the expo-linking API to handle URL schemes. Example: <Link href="https://expo.dev">Open a URL</Link>
Link component provides additional web functionality
The Link component from expo-router provides additional link functionality on the web, such as right-click to copy or hover to preview.
Expo Router features developed with Metro collaboration
The Expo team collaborates with Meta to develop Metro for Expo Router, adding features like file-based routing, web support, bundle splitting, tree shaking, CSS, DOM components, server components, and API routes.
Expo Router handles deep linking automatically
If you are using Expo Router, you can ignore the manual URL handling section of the deep linking guide. Expo Router automatically handles deep linking for you.
app directory convention
The app directory is a special directory containing only routes and their layouts. Any files added to this directory become a screen inside the native app and a page on the web.
Root layout file convention
The Root layout is defined in the app/_layout.tsx file. It defines shared UI elements such as headers and tab bars so they are consistent between different routes.
Index file route matching
Index file names, such as index.tsx, match their parent directory and do not add a path segment. For example, the index.tsx file in the app directory matches the / route.
Route file conventions
A route file exports a React component as its default value. It can use either .js, .jsx, .ts, or .tsx extension. Android, iOS, and web share a unified navigation structure.
Stack navigator definition
A stack navigator is the foundation for navigating between different screens in an app. On Android, a stacked route animates on top of the current screen. On iOS, a stacked route animates from the right. Expo Router provides a Stack component to create a navigation stack to add new routes.
Link component for navigation
Expo Router's Link component is a React component that renders a Text component with a given href prop, allowing navigation between routes.
Link component accepts Text styling
The Link component takes the same props as the Text component, allowing styles like fontSize, textDecorationLine, and color to be applied to it.
+not-found route for fallback screen
The +not-found.tsx file is used to handle invalid routes. It displays a fallback screen when navigating to a non-existent route on mobile instead of crashing the app or displaying a 404 error on web.
Stack.Screen options prop
The Stack.Screen component accepts an options prop that can be used to customize the screen, such as updating the title of a route.
Group routes with parentheses directory
A directory with parentheses in its name, such as (tabs), is a special directory used to group routes together without adding a path segment to the URL structure.
Tabs component for bottom tab navigator
Expo Router provides a Tabs component to create a bottom tab navigator. The Tabs.Screen component works similarly to Stack.Screen and accepts the same props.
Nesting tab navigator inside stack navigator
A tab navigator can be nested inside a stack navigator by adding a Stack.Screen with the group name and headerShown: false option to hide the header for the tab navigator, preventing duplicate headers.
tabBarIcon option for custom icons
The tabBarIcon option on Tabs.Screen accepts a function that takes focused and color parameters and returns an icon component. The focused parameter allows changing the icon based on whether the tab is active or inactive.
screenOptions.tabBarActiveTintColor customization
The screenOptions.tabBarActiveTintColor property on the Tabs component changes the color of the tab bar icon and label when a tab is active.
Tab bar appearance customization properties
The Tabs component screenOptions supports headerStyle (with backgroundColor and other properties), headerShadowVisible (boolean to show/hide header shadow), headerTintColor (color for header labels), and tabBarStyle (with backgroundColor and other properties) to customize the tab bar and header appearance.
Ionicons icon set usage
Ionicons can be imported from @expo/vector-icons to access a popular icon set for use in navigation and other UI elements.
Stack.Screen creation for about route example
To add a new route like /about, create a new file (about.tsx) in the app directory, then add a Stack.Screen component with the route name and options prop in the root layout file.
Link component usage example
Import Link from expo-router, then use it as <Link href="/about" style={styles.button}>Go to About screen</Link> to create a navigable link with custom styling.
Root layout with Stack component example
The root layout wraps screens inside the Stack navigator and can include Stack.Screen components with options props to configure each route. When nesting other navigators, set headerShown: false on the parent Stack.Screen to avoid duplicate headers.
Tab layout with Tabs component example
Create a (tabs)/_layout.tsx file with a Tabs component containing Tabs.Screen components for each tab. Use screenOptions to configure tabBarActiveTintColor, headerStyle, and tabBarStyle properties.
tabBarIcon implementation with Ionicons example
Use tabBarIcon: ({ color, focused }) => <Ionicons name={focused ? 'home-sharp' : 'home-outline'} color={color} size={24} /> to display different icons based on whether a tab is focused or not.
Unversioned code testing in Expo Client iOS
To test changes in unversioned code (code not yet included in an Expo SDK), set sdkVersion to UNVERSIONED in app.json. The unversioned code is the Expo SDK code without symbol prefixes, as opposed to versioned code under versioned-react-native which includes prefixed symbols for each SDK version.
E2E test runner projects location
The runnable projects for E2E tests are located in the `__e2e__` directory. Each project must contain an Expo Router routes directory named `app`.
E2E Router tests via CLI
To run E2E tests for Expo Router, navigate to `packages/@expo/cli` and run `pnpm test:e2e <NAME_OF_RUNNABLE_PROJECT>` or `pnpm test:playwright <NAME_OF_RUNNABLE_PROJECT>`.
Maestro E2E tests for native navigation
To run Maestro E2E tests for native navigation, navigate to the `apps/router-e2e` directory and run `pnpm test:e2e`. This command starts the expo server and runs maestro tests located in `__e2e__/native-navigation/__tests__`.
Environment variable configuration for E2E projects
E2E projects are configured using environment variables such as `E2E_ROUTER_SRC=link-preview`, where the value is the sub-directory name in `__e2e__` containing the Expo Router `app` directory.
Native iOS and Android setup for Expo Router e2e
Run `pnpm prebuild` to create ios and android directories using the expo-template-bare-minimum template. Then use `npx expo run:ios` and `npx expo run:android` to build. For production builds, use `npx expo run:ios --configuration Release` and `npx expo run:android --variant release`.
Optional Apple Team ID configuration for e2e builds
Optionally create a `.env.local` file in the project root with `APPLE_TEAM_ID=YOUR_TEAM_ID` to configure the Apple Team ID for native builds.
Web testing for Expo Router e2e
Start any e2e project and open it in a web browser using a start script like `pnpm start:01-rsc`. For production web testing, use an export script like `pnpm export:web-workers` and serve it with `npx expo serve`.