Does this skill work for both mobile and web versions of an app?

Yes, it specifically focuses on using React Navigation to create a unified routing system that works identically on iOS, Android, and the web.

Should I use React Router alongside this skill?

No, it is an anti-pattern to use React Router for web and React Navigation for mobile in the same project. This skill helps you use React Navigation for everything.

Can I configure SEO-friendly URLs for my web app?

Absolutely. The skill includes patterns for deep linking configurations that map React Navigation routes to standard web URL paths.

Is type safety included in the navigation patterns?

Yes, it provides implementation guides for defining RootStackParamList and using NativeStackScreenProps to ensure end-to-end type safety.

React Native Web Navigation

Name: React Native Web Navigation
Author: TheBushidoCollective

byTheBushidoCollective

•

Mobile Development

Implements cross-platform routing and navigation patterns for React Native Web applications using React Navigation.

Acerca de

This skill provides a comprehensive framework for managing navigation in React Native Web projects, ensuring a consistent user experience across mobile and desktop browsers. It offers standardized patterns for implementing React Navigation, configuring deep linking for SEO-friendly web URLs, and establishing type-safe routing with TypeScript. By following these implementation guides, developers can leverage a unified API for Stack, Tab, and Drawer navigators while avoiding platform-specific pitfalls like direct React Router dependency.

Características Principales

Unified navigation API for iOS, Android, and Web platforms
72 GitHub stars
Type-safe navigation parameter definitions with TypeScript
Pre-configured patterns for Stack, Tab, and Drawer navigators
Automated web URL mapping and deep linking configuration
Protected route patterns and navigation guards for authentication

Casos de Uso

Implementing responsive sidebars and drawers that adapt based on browser window dimensions
Configuring deep links to allow users to navigate directly to specific web pages in a mobile-first app
Building a universal application that requires shared routing logic across native and web

Acerca de

Características Principales

Unified navigation API for iOS, Android, and Web platforms
72 GitHub stars
Type-safe navigation parameter definitions with TypeScript
Pre-configured patterns for Stack, Tab, and Drawer navigators
Automated web URL mapping and deep linking configuration
Protected route patterns and navigation guards for authentication

Casos de Uso

Implementing responsive sidebars and drawers that adapt based on browser window dimensions
Configuring deep links to allow users to navigate directly to specific web pages in a mobile-first app
Building a universal application that requires shared routing logic across native and web