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.

主な機能

Optimized layouts for large-screen (web) vs. small-screen (mobile) UX
Standardized React Navigation patterns for Stack, Tab, and Drawer layouts
39 GitHub stars
Type-safe navigation configurations for enhanced developer productivity
Responsive navigation guards and protected route implementation
Deep linking and web URL synchronization for seamless browser integration

ユースケース

Configuring SEO-friendly URLs and deep links for a React Native Web storefront
Building a cross-platform dashboard with a responsive sidebar on web and tabs on mobile
Implementing authentication-based navigation flows and protected route guards

概要

主な機能

Optimized layouts for large-screen (web) vs. small-screen (mobile) UX
Standardized React Navigation patterns for Stack, Tab, and Drawer layouts
39 GitHub stars
Type-safe navigation configurations for enhanced developer productivity
Responsive navigation guards and protected route implementation
Deep linking and web URL synchronization for seamless browser integration

ユースケース

Configuring SEO-friendly URLs and deep links for a React Native Web storefront
Building a cross-platform dashboard with a responsive sidebar on web and tabs on mobile
Implementing authentication-based navigation flows and protected route guards