Does this skill support TypeScript?

Yes, it is designed specifically to handle type-safe navigation, including ParamList definitions and composite screen props for nested navigators.

How does it handle modal screens?

The skill includes patterns for configuring navigation options, allowing you to easily set specific screens to use modal presentation modes within a stack.

Is it compatible with standard React Navigation libraries?

Yes, it follows standard React Navigation best practices and patterns, making it compatible with the most widely used navigation solution for React Native.

Can I use this for both Stack and Tab navigators?

Absolutely. It supports NativeStack, BottomTab, and complex nested combinations where tabs exist inside stacks or vice versa.

How does it help with screen parameters?

It automates the definition of route parameters in a centralized type file, ensuring that every screen receives the correct data with full IDE autocompletion.

React Native Navigation Builder

Name: React Native Navigation Builder
Author: PlaneInABottle

byPlaneInABottle

0•

Mobile Development

Automates the creation of type-safe nested navigation structures for React Native applications using React Navigation.

The React Native Navigation Builder skill streamlines the complex process of managing nested navigators, screen parameters, and type safety in React Native projects. It simplifies the orchestration of stack and tab navigators, ensuring consistent screen prop definitions and navigation options across a mobile application. By automating the boilerplate code for NavigationContainer, NativeStack, and BottomTab navigators, it helps developers maintain a robust, type-safe navigation hierarchy while reducing manual configuration errors and architectural debt.

주요 기능

01Consistent pattern implementation for global modals and tab bars

020 GitHub stars

03Streamlined screen prop and composite navigation type generation

04Automated nested navigator setup for Stack and Tab layouts

05Standardized configuration for headers and presentation modes

06Comprehensive TypeScript type safety for navigation parameters

사용 사례

01Adding new screens to existing navigation stacks with full TypeScript support

02Refactoring complex nested tab and stack structures for better maintainability

03Implementing global modal presentation layers that overlay primary application tabs

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add planeinabottle/fitnessmobileapp react-native-navigation-builder

For use in Claude.ai and ChatGPT

Download Skill