navigation & routing

15 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 protected routes prevent unauthenticated access

Expo Router v5 introduced protected routes, which prevent users from accessing certain screens unless they are authenticated. This feature works well for client-side navigation and simplifies setup. If using an older version of Expo Router, redirects can be used instead, providing the same result but requiring more manual configuration. Redirects are still supported in Expo Router v5 for backward compatibility.

Expo Router library provides navigation functionalities

Expo Router is a library that provides different navigation functionalities, a comprehensive Hooks API, and covers advanced aspects including Authentication, Redirects, and Testing.

Expo Router file-based routing overview

Expo Router is a file-based routing framework for React Native and web apps. The app directory contains only routes and layouts. Files added to it are treated as screens in native apps and pages in web. Index files with names like index.tsx match their parent directory and do not add a path segment. Root files must export a React component as the default export and can use .js, .jsx, .ts, or .tsx extensions. Android, iOS, and web share a unified navigation structure.

Root layout in Expo Router

The root layout is the app/_layout.tsx file. It defines shared UI elements that should be consistent across multiple routes, such as headers or tab bars.

Stack navigator in Expo Router

The Stack component provides a navigation stack to move between different screens in an app. On Android, stacked routes animate on top of the current screen. On iOS, stacked routes animate in from the right. Stack.Screen is used to add screens to the stack with options property for configuration like title.

Link component for navigation in Expo Router

The Link component from expo-router is used to navigate between screens. It renders as Text and takes an href property specifying the target route. It accepts the same style properties as Text component.

+not-found route in Expo Router

The +not-found.tsx file provides a fallback screen when a route does not exist. This prevents app crashes on mobile when navigating to invalid routes and displays a custom screen instead of a 404 error on web.

Group directory for organizing routes in Expo Router

A directory wrapped in parentheses, like (tabs), groups routes for organization without adding to the URL path. This is used to group routes for display in a bottom tab navigator or other navigation patterns.

Tabs component for bottom tab navigation

The Tabs component from expo-router creates a bottom tab navigator. Tabs.Screen works similarly to Stack.Screen and accepts the same properties. It automatically displays tabs at the bottom of the screen across all platforms.

Nesting tab navigator inside stack navigator

To nest a tab navigator inside a stack navigator, add it as a Stack.Screen with the group directory name. Use the headerShown: false option to hide the stack header to prevent duplicate headers on each tab screen.

Tabs screenOptions for customization

The Tabs component accepts a screenOptions prop for customization. Key options include: tabBarActiveTintColor (color of active tab icon and label), headerStyle (background color of header), headerShadowVisible (boolean to show/hide header shadow), headerTintColor (color of header labels), and tabBarStyle (styling object for tab bar including backgroundColor).

tabBarIcon option in Tabs.Screen

Each Tabs.Screen can define a tabBarIcon option that is a function receiving focused and color parameters. It should return an icon component. The focused parameter indicates if the tab is currently active, allowing different icons for active and inactive states.

Ionicons from @expo/vector-icons for tab icons

The Ionicons icon set can be imported from @expo/vector-icons to provide custom icons for tab navigation. Icons like 'home-sharp', 'home-outline', 'information-circle', and 'information-circle-outline' are available for use in tabBarIcon.

Stack.Screen options property

The Stack.Screen component accepts an options property to configure individual screens. The title option sets the screen title displayed in the header. The headerShown option (boolean) controls whether the header is visible for that screen.

Creating new screens in Expo Router app directory

New screens are created by adding files to the app directory or subdirectories. A file like about.tsx in the app directory creates a route at /about. The file must export a React component as default and can use .js, .jsx, .ts, or .tsx extension.

Give your agent this brain