How to set up nested navigation in React Navigation?

Use navigators like Stack or Drawer inside other navigators, configuring screens hierarchically. Refer to the official docs for examples on nesting patterns and passing params between nested screens.

React Navigation vs React Router for React Native apps?

React Navigation is built specifically for React Native with native-feel components, while React Router is web-focused and less optimized for mobile. Choose React Navigation for better platform integration and performance in mobile apps.

How to handle authentication flows with React Navigation?

Use conditional rendering based on auth state, often with a root navigator switching between auth and main stacks. Implement guards or hooks to manage screen access, as covered in the documentation for state-dependent navigation.

Why is my React Navigation screen transition slow?

Slow transitions can stem from heavy screen components or incorrect navigator configuration. Optimize with React.memo, use native stack for better performance, and check for unnecessary re-renders using devtools.

Best way to pass parameters between screens in React Navigation?

Use the navigation.navigate method with a params object, then access them via route.params in the target screen. For complex data, consider context or state management libraries to avoid prop drilling.

How to customize the drawer in React Navigation?

Leverage the drawer navigator's options for styling and content, or use custom components via drawerContent. The @react-navigation/drawer package provides APIs for overriding default UI elements.

Can I use React Navigation with Expo?

Yes, React Navigation works seamlessly with Expo and is often recommended for Expo projects. Install the necessary packages via npm or yarn, and follow Expo-specific setup guides in the documentation.

Open-Awesome

react-navigation

TypeScript@react-navigation/native-stack@7.14.11

A comprehensive routing and navigation library for React Native and web applications.

Visit Website GitHub

24.4k stars5.1k forks0 contributors

What is react-navigation?

React Navigation is a routing and navigation library for React Native and web applications. It provides a declarative API to build complex navigation patterns, enabling developers to manage screen transitions and state across platforms efficiently.

Target Audience

React Native developers building mobile applications with complex navigation needs, and web developers using React for multi-platform projects requiring consistent navigation patterns.

Value Proposition

Developers choose React Navigation for its seamless integration with React's ecosystem, offering a component-based approach, platform-specific navigation components, and built-in developer tools for debugging.

Overview

Routing and navigation for React Native and Web apps

Use Cases

Best For

Building React Native apps with native-like navigation patterns such as bottom tabs, drawers, and stacks.
Developing cross-platform applications that require consistent navigation logic between mobile and web.
Implementing complex navigation flows with declarative configuration using React components and hooks.
Debugging and managing navigation state with built-in developer tools.
Creating custom navigation UI components while leveraging a core, extensible architecture.
Ensuring type safety in navigation code with full TypeScript support.

Not Ideal For

Projects requiring server-side rendering with minimal JavaScript overhead
Teams preferring imperative navigation APIs over declarative React components
Apps needing ultra-lightweight navigation without React Native's ecosystem
Developers building with non-React frameworks (e.g., Vue or Angular)

Pros & Cons

Pros

Declarative Navigation API

Uses React components and hooks to define navigation structure, making it intuitive for React developers and aligning with the component-based philosophy highlighted in the README.

Platform-Specific Components

Includes native stack, drawer, and bottom tabs for authentic iOS and Android experiences, as evidenced by packages like @react-navigation/native-stack in the version table.

Extensible Core Architecture

Separates navigation logic from UI components, allowing for custom implementations, which is emphasized in the key features for flexibility.

Built-in Developer Tools

Provides devtools for debugging navigation state and actions, improving development efficiency as mentioned in the key features.

Full TypeScript Support

Ensures type safety across navigation code, reducing runtime errors and enhancing developer experience, as noted in the key features.

Cons

Version Fragmentation Complexity

With multiple major versions (1.x to 7.x) and separate branches, upgrading can be error-prone and require careful migration, as shown in the README's branch listing.

Monorepo Installation Hassles

Installing from forks requires additional tools like gitpkg and complex steps, making custom modifications cumbersome for developers, as detailed in the contributing section.

React Native Focus Limitation

Primarily optimized for React Native, so for pure web projects, other libraries might offer better performance or simpler setups, despite web support being mentioned.

Steep Customization Learning Curve

Extending or overriding core navigation logic requires deep understanding of the architecture, which can be time-consuming for teams without prior experience.

Frequently Asked Questions

Related Projects

react-native-navigation

A complete native navigation solution for React Native

Stars13,180

Forks2,644

Last commit4 days ago

react-native-router-flux

The first declarative React Native router

Stars8,937

Forks2,082

Last commit2 years ago

kittenTricks

React Native starter kit with over 40 screens and modern Light and Dark theme for creating stunning cross-platform mobile applications.

Stars7,265

Forks993