playbooks

home / skills / hoangnguyen0403 / agent-skills-standard / react-native-navigation

react-native-navigation skill

/skills/react-native/react-native-navigation

This skill helps implement and validate React Native navigation with React Navigation, ensuring strong types, deep links, and safe routing.

npx playbooks add skill hoangnguyen0403/agent-skills-standard --skill react-native-navigation

Review the files below or copy the command above to add this skill to your agents.

Files (2)
SKILL.md
1.2 KB
---
name: React Native Navigation
description: Navigation and deep linking for React Native using React Navigation.
metadata:
  labels: [react-native, navigation, routing, deep-linking, react-navigation]
  triggers:
    files: ['**/App.tsx', '**/*Navigator.tsx', '**/*Screen.tsx']
    keywords:
      [
        NavigationContainer,
        createStackNavigator,
        createBottomTabNavigator,
        linking,
        deep link,
      ]
---

# React Native Navigation

## **Priority: P1 (OPERATIONAL)**

Navigation and deep linking using React Navigation.

## Guidelines

- **Library**: Use `@react-navigation/native-stack` for native performance.
- **Type Safety**: Define `RootStackParamList` for all navigators.
- **Deep Links**: Configure `linking` prop in `NavigationContainer`.
- **Validation**: Validate route parameters (`route.params`) before fetching data.

[Routing Patterns](references/routing-patterns.md)

## Anti-Patterns

- **No Untyped Navigation**: `navigation.navigate('Unknown')` → Error. Use types.
- **No Manual URL Parsing**: Use `linking.config`, not manual string parsing.
- **No Unvalidated Deep Links**: Handle invalid IDs gracefully (e.g., redirect to Home/404).

## Related Topics

react-native-dls | react-native-notifications | mobile-ux-core

Overview

This skill covers navigation and deep linking for React Native using React Navigation, with emphasis on native-stack performance and type safety. It provides practical rules and patterns to implement reliable routes, validate parameters, and handle invalid links gracefully. The guidance is operational priority to ensure runtime stability and predictable UX.

How this skill works

It recommends using @react-navigation/native-stack for native performance and defining a RootStackParamList to enforce navigation types across screens. Deep linking is configured via the linking prop on NavigationContainer, using a linking.config to map URL patterns to route names. Route parameters must be validated before use to avoid crashes and to handle malformed or missing IDs by redirecting or showing fallback screens.

When to use it

  • Building navigation flows in React Native apps where performance and native behavior matter
  • Implementing deep links or universal links that open specific screens from URLs or notifications
  • Enforcing type-safe navigation across TypeScript codebases to catch route errors at compile time
  • Protecting data fetching flows by validating route.params before network requests
  • Replacing brittle manual URL parsing or untyped navigation calls during refactors

Best practices

  • Use @react-navigation/native-stack for performance-sensitive stacks
  • Define RootStackParamList (and per-navigator param lists) to enable compile-time checking
  • Configure deep links via NavigationContainer linking.prop and linking.config instead of manual parsing
  • Always validate route.params and handle invalid or missing values with redirects or fallback screens
  • Avoid navigation.navigate calls with untyped string literals; prefer typed route names
  • Gracefully handle unmatched deep links by routing to Home or a 404-style screen

Example use cases

  • A mobile app that opens product pages from marketing emails using deep links mapped in linking.config
  • A TypeScript React Native project that prevents runtime navigation errors by centralizing RootStackParamList
  • An app that validates incoming deep-link IDs before fetching details, showing a friendly error if the ID is invalid
  • Migrating legacy manual URL parsing to NavigationContainer linking for consistent routing behavior
  • Using native-stack to reduce navigation animation jank on Android and iOS

FAQ

Do I need types for every navigator?

Yes. Define a param list for each navigator so TypeScript can verify route names and parameter shapes.

How should I handle bad deep links?

Validate params on entry and redirect to a safe screen (Home or a 404) rather than attempting to fetch with invalid IDs.