DOCSEARCHbyAlgolia
Submit Docs

React Navigation

website·Indexed 40 days ago

https://reactnavigation.org/

A routing and navigation library for React Native and Web. It provides the logic and UI common to mobile apps and PWAs, including stack, tab, and drawer navigators. The documentation covers installation, deep linking, state persistence, TypeScript integration, and migration guides for upgrading from version 6.x to 7.x.

Tokens
115.1K
Snippets
540
Records
682
Agent score
73%

What's inside React Navigation

  1. Overview of the standard-navigation package

    The standard-navigation package provides a standardized API for writing navigators that can work across multiple navigation libraries, such as React Navigation and Expo Router. This is intended for library authors; developers building a navigator for a specific project should use Custom Navigators instead.

  2. Overview of React Navigation Static vs Dynamic API

    React Navigation offers two configuration methods:

    • Static API: An object-based configuration that provides automatic TypeScript types and deep linking. The primary limitation is that the navigation structure must be static; you cannot create the list of screens dynamically at runtime.
    • Dynamic API: A component-based configuration where navigators are React components rendered inside a NavigationContainer.

  3. Overview of Native Stack Navigator

    The Native Stack Navigator allows apps to transition between screens by placing each new screen on top of a stack. Unlike the JavaScript-based Stack Navigator, it uses native APIs (UINavigationController on iOS and Fragment on Android), resulting in smoother transitions, better performance, and access to native features like large titles on iOS and form sheets.

  4. Organize screens using Groups in React Navigation

    Groups allow you to organize multiple screens within a navigator. They are primarily used to apply shared screenOptions (like header styles) or a common screenLayout to a set of screens without repeating the configuration for each individual screen. Groups can be nested inside other groups.

  5. Access and use the Route object in screen components

    Every screen component in a React Navigation app automatically receives a route prop. This object contains metadata about the current route, including its unique identifier, the name defined in the navigator, deep link paths, and any parameters passed during navigation.
    function ProfileScreen({ route }) {
  return (
    <View>
      <Text>Screen Name: {route.name}</Text>
      <Text>Path: {route.path ?? 'No path'}</Text>
      <Text>User Param: {route.params?.user ?? 'No params'}</Text>
    </View>
  );
}

  6. Customize Shared Element Transition styles

    You can customize the animation behavior by passing a SharedTransition configuration to the sharedTransitionStyle prop on the matching elements. The implementation differs based on the architecture version.
    import { SharedTransition, withSpring } from 'react-native-reanimated';

// --- Old Architecture (Reanimated 3) ---
// Use SharedTransition.custom() to define worklet-based animations
const customTransitionOld = SharedTransition.custom((values) => {
  'worklet';
  return {
    height: withSpring(values.targetHeight),
    width: withSpring(values.targetWidth),
    originX: withSpring(values.targetOriginX),
    originY: withSpring(values.targetOriginY),
  };
});

// --- New Architecture (Reanimated 4) ---
// Use the SharedTransition builder for duration and spring settings
const customTransitionNew = SharedTransition.duration(550).springify();

function MyScreen() {
  return (
    <Animated.Image
      sharedTransitionTag="tag"
      sharedTransitionStyle={customTransitionNew} // or customTransitionOld
    />
  );
}

  7. Use Navio for improved React Navigation DX and TypeScript autocompletion

    Navio is an alternative API for React Navigation focused on improving the developer experience (DX). It allows developers to define the app layout in a single location and leverages TypeScript to provide automatic completion for route names.

  8. Understand Navigation Actions in React Navigation

    A navigation action is an object used to manipulate the navigation state. It is handled by routers via the getStateForAction method. Dispatching an action that is unhandled does not throw an error; it simply results in no state change.

    Action objects consist of:

    • type (required): A string representing the action name.
    • payload (optional): Additional information (e.g., name and params for navigation).
    • source (optional): The key of the route considered the source of the action.
    • target (optional): The key of the navigation state the action should be applied to.

  9. Access route information via the Route object

    The route prop is passed to all screen components. It contains metadata about the current route, including the key, name, and any arbitrary params passed during navigation.
    {
  key: 'B',
  name: 'Profile',
  params: { id: '123' }
}

  10. Understand the Router and Header concepts

    A Router is a collection of functions that handle actions and state changes (similar to Redux reducers). Developers typically only interact with routers when building custom navigators. The Header (or navigation bar/app bar) is the UI element at the top of the screen containing the title and back button.

  11. Use Solito for cross-platform navigation with Next.js

    Solito is a wrapper around React Navigation and Next.js designed to allow developers to share navigation code across platforms. It provides specific patterns and examples for building applications using React Native and Next.js simultaneously.

  12. Guiding principles for testing React Navigation

    To ensure tests are reliable and maintainable, follow these principles:

    1. Test the result, not the action: Assert that the expected components are rendered/visible after navigation, rather than checking if a specific navigation function was called.
    2. Avoid mocking React Navigation: Use a real navigator instead of mocking navigation components to ensure tests match actual application logic.