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.

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.

Key Features

01Unified navigation API for iOS, Android, and Web platforms

0272 GitHub stars

03Type-safe navigation parameter definitions with TypeScript

04Pre-configured patterns for Stack, Tab, and Drawer navigators

05Automated web URL mapping and deep linking configuration

06Protected route patterns and navigation guards for authentication

Use Cases

01Implementing responsive sidebars and drawers that adapt based on browser window dimensions

02Configuring deep links to allow users to navigate directly to specific web pages in a mobile-first app

03Building a universal application that requires shared routing logic across native and web

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thebushidocollective/han react-native-web-navigation

For use in Claude.ai and ChatGPT

Download Skill