react-navigation

Provide React Navigation UI patterns for stack, tab, drawer, and form sheet navigation.

Updated Jul 5, 2026

Search Tags:#ui #navigation #header #react-navigation #native-stack

Ready to run

npx skills add https://github.com/Arupbiswas09/claude_skills --skill react-navigation

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-navigation
Source: https://github.com/Arupbiswas09/claude_skills/tree/main/skills/react-navigation
Command: npx skills add https://github.com/Arupbiswas09/claude_skills --skill react-navigation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @react-navigation/native, @react-navigation/stack, @react-navigation/bottom-tabs, @react-navigation/drawer, @react-navigation/material-top-tabs, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides React Navigation UI patterns for stacks, tabs, drawers, etc., making it easier to build navigation UIs with React Navigation.

Core Features & Use Cases

Stack Navigation: Build navigation UIs with React Navigation, including stacks, tabs, drawers, etc.
Headers and Bottom Sheets: Configure headers, bottom sheets, or handle safe areas and insets.
Use Case: For a project using React Navigation, you can use this skill to set up a stack navigation with multiple screens and configure the header for each screen.

Quick Start

Use the react-navigation skill to set up stack navigation for your React app.

Frequently Asked Questions about react-navigation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I set up stack navigation with headers in React Native?▼

Set up stack navigation by using React Navigation patterns to configure multiple screens and customize the header for each screen in your React Native project.

Can I configure bottom sheets and handle safe areas with React Navigation?▼

Yes, React Navigation allows you to configure bottom sheets and handle safe areas and insets to build responsive navigation UIs across different device layouts.

What navigation patterns does React Navigation support for building responsive UIs?▼

React Navigation supports stack, tab, drawer, and material top tab patterns, providing comprehensive UI structures for navigating between screens in React Native apps.

Do I need to install React Navigation before implementing these UI patterns?▼

Yes, React Navigation must be installed and configured in your React Native project beforehand to apply these stack, tab, and drawer UI patterns successfully.

What's the best way to build a multi-screen navigation flow in React Native?▼

Build a multi-screen flow by applying React Navigation stack patterns to manage screen transitions and configure individual headers for a responsive navigation experience.