navigation/imperative

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

Router navigation methods comparison

Expo Router provides four main imperative navigation methods: router.navigate() either pushes a new page onto the stack or unwinds to an existing route; router.push() explicitly pushes a new page onto the stack; router.back() goes back to the previous page; router.replace() replaces the current page on the stack.

useRouter hook for imperative navigation

The useRouter hook from 'expo-router' provides access to navigation functions. Import it with: import { useRouter } from 'expo-router'. Call it to get the router object which has methods like navigate(), push(), back(), and replace().

Replace resetRoot with router.replace('/')

To navigate to the initial route of the application in React Navigation's resetRoot, use router.replace('/') where router comes from the useRouter hook in Expo Router.

Replace getRootState with useRootNavigationState hook

The NavigationContainer ref's getRootState method is replaced by the useRootNavigationState() hook in Expo Router.

Replace getCurrentRoute with usePathname or useSegments hooks

Unlike React Navigation, Expo Router can reliably represent any route with a string. Use the usePathname() or useSegments() hooks to identify the current route.

Use useNavigationContainerRef hook instead of ref prop

The NavigationContainer ref should not be accessed directly. Use the useNavigationContainerRef() hook instead.

Use qualified href to pass params to nested screens

Instead of using nested screen navigation events like React Navigation's navigation.navigate('Account', { screen: 'Settings', params: { user: 'jane' } }), use a qualified href in Expo Router: router.push({ pathname: '/account/settings', params: { user: 'jane' } }).

Reset navigation state with CommonActions.reset from useNavigation

You can use the reset action from CommonActions (imported from expo-router/react-navigation) to reset the navigation state. It is dispatched using the useNavigation hook from Expo Router. The object specified in the reset action replaces the existing navigation state with the new one. Example: navigation.dispatch(CommonActions.reset({ routes: [{ key: '(tabs)', name: '(tabs)' }] }))

Access navigation.navigate with useNavigation hook

To access the navigation.navigate functionality from React Navigation, import the navigation prop from the useNavigation hook in Expo Router.

Replace navigation prop with useRouter hook

React Navigation passes { navigation, route } props to every screen, but this pattern is not used in Expo Router. Migrate from using the navigation prop to the useRouter hook instead.

useRouter hook with replace method for imperative redirects

The useRouter hook provides imperative redirection via the replace method. Call router.replace('/path') to redirect to a new route without adding to the browser history. Wrap the redirect logic in useFocusEffect to ensure the redirect happens every time the screen is focused.

useRouter replace with useFocusEffect example

The following code shows imperative redirection using useRouter and useFocusEffect: import { Text } from 'react-native'; import { useRouter, useFocusEffect } from 'expo-router'; function MyScreen() { const router = useRouter(); useFocusEffect(() => { router.replace('/profile/settings'); }); return <Text>My Screen</Text>; }

replace method does not add to history

When using router.replace() to redirect, the new route replaces the current route in the history stack instead of adding to it. This prevents the user from going back to the redirected screen.

router.setParams function

URL parameters can be updated using router.setParams from the imperative API. Updating a URL parameter will not push anything new to the history stack.

Example: Updating search parameters with setParams

```tsx src/app/search.tsx import { useLocalSearchParams, router } from 'expo-router'; import { useState } from 'react'; import { TextInput, View } from 'react-native'; export default function Page() { const params = useLocalSearchParams<{ query?: string }>(); const [search, setSearch] = useState(params.query); return ( <TextInput value={search} onChangeText={search => { setSearch(search); router.setParams({ query: search }); }} placeholderTextColor="#A0A0A0" placeholder="Search" style={{ borderRadius: 12, backgroundColor: '#fff', fontSize: 24, color: '#000', margin: 12, padding: 16, }} /> ); } ```

Example: Updating route parameters with setParams

```tsx src/app/[user].tsx import { useLocalSearchParams, router } from 'expo-router'; import { Text } from 'react-native'; export default function User() { const params = useLocalSearchParams<{ user: string }>(); return ( <> <Text>User: {params.user}</Text> <Text onPress={() => router.setParams({ user: 'evan' })}>Go to Evan</Text> </> ); } ```

Give your agent this brain