Does it support TypeScript for route parameters?

Absolutely. The skill includes best practices for defining RootStackParamList and using typed hooks like useNavigation and useRoute.

Can I implement responsive navigation, like a sidebar on web only?

Yes, it includes examples for using the Drawer Navigator with useWindowDimensions to toggle between permanent sidebars on web and modal drawers on mobile.

Can I use this for both mobile and web simultaneously?

Yes, this skill focuses on the unified React Navigation API which allows you to share navigation logic across iOS, Android, and web platforms.

How does this skill handle web-specific URLs?

It provides specific patterns for configuring LinkingOptions, allowing your app to sync navigation state with browser history and support deep links.

React Native Web Navigation

Name: React Native Web Navigation
Author: TheBushidoCollective

byTheBushidoCollective

•

Mobile Development

Implements high-performance, cross-platform navigation for React Native Web using standardized React Navigation patterns.

This skill provides a comprehensive set of patterns and best practices for managing navigation in React Native Web applications. It enables developers to implement type-safe routing, deep linking for web URLs, and platform-specific UI patterns like sidebars for desktop and tabs for mobile. By leveraging the unified React Navigation API, it ensures consistent behavior across native and web environments while providing guidance on avoiding web-only anti-patterns.

Key Features

01Optimized layouts for large-screen (web) vs. small-screen (mobile) UX

02Standardized React Navigation patterns for Stack, Tab, and Drawer layouts

0339 GitHub stars

04Type-safe navigation configurations for enhanced developer productivity

05Responsive navigation guards and protected route implementation

06Deep linking and web URL synchronization for seamless browser integration

Use Cases

01Configuring SEO-friendly URLs and deep links for a React Native Web storefront

02Building a cross-platform dashboard with a responsive sidebar on web and tabs on mobile

03Implementing authentication-based navigation flows and protected route guards

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