Back to skills
extension
Category: Development & EngineeringNo API key required

React Native Navigation

Navigation and deep linking for React Native using React Navigation. Use when setting up navigation stacks or deep linking in React Native with React Navigation.

personAuthor: jakexiaohubgithub

React Native Navigation — Deep Linking

Priority: P1 (HIGH)

Deep-linking companion to react-native-navigation-v6, which owns stack/tab/drawer setup and auth-flow structure. For new Expo projects, prefer Expo Router (file-based, built on React Navigation) — see react-native-architecture for the decision criteria.

Configure Type-Safe Navigation

  • 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.

See routing patterns for type-safe stack setup and deep linking configuration.

Anti-Patterns

  • No Untyped Navigation: navigation.navigate('Unknown') leads to errors. Use typed params.
  • 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).

References

See references/routing-patterns.md for typed param lists and deep linking config.

Canonical response anchors

When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:

  • Configure
  • Handle