react-navigation

โดย callstackincubator

ให้รูปแบบ UI ของ React Navigation สำหรับสแต็ก แท็บ และดรอว์เวอร์ ใช้เมื่อสร้าง UI การนำทางด้วย React Navigation การกำหนดค่าส่วนหัว แผ่นด้านล่าง...

npx skills add https://github.com/callstackincubator/agent-skills --skill react-navigation

ดาวน์โหลด ZIP GitHub

React Navigation

Overview

Guide for building navigation UIs with React Navigation.

This skill only applies to React Navigation 7. The API and patterns may not work with different versions.

API Selection

React Navigation offers two API - object-based Static API and component-based Dynamic API.

Existing Apps: Check the current navigation setup and follow the same API style when using the references
New Apps: If the app does not have an existing navigation setup yet, prefer Static API

When to Apply

Reference this skill when:

Building navigation UI patterns such as stacks, tabs, drawers, sheets etc.
Configuring headers and other built-in navigator UI
Handling safe areas and insets in navigation UI

References

File	Description
stacks.md	Stack based navigation
form-sheet.md	Bottom sheet and form sheets
bottom-tabs.md	Cross-platform bottom tabs
native-bottom-tabs.md	Native bottom tabs
material-top-tabs.md	Swipeable Top tabs
drawers.md	Drawer navigation and sidebars
header.md	Configuring headers
safe-areas.md	Safe-area handling

Problem -> Skill Mapping

Problem	Start With
Showing screens and modals in a stack	stacks.md
Showing bottom sheets or form sheets	form-sheet.md
Showing screens in bottom tabs or responsive sidebars with web support	bottom-tabs.md
Showing screens in native tabs on iOS & Android	native-bottom-tabs.md
Showing content in swipeable top tabs	material-top-tabs.md
Using a drawer or sidebar	drawers.md
Configuring the header in bottom tab or drawer navigator	header.md
Handling safe-area such as status bar, header insets, tab bar insets etc.	safe-areas.md

Skills เพิ่มเติมจาก callstackincubator

callstackincubator

React DevTools CLI for AI agents. Use when the user asks you to debug a React or React Native app at runtime, inspect component props/state/hooks, diagnose…

callstackincubator

Automates interactions for Apple-platform apps (iOS, tvOS, macOS) and Android devices. Use when navigating apps, taking snapshots/screenshots, tapping, typing,…

assess-react-native-migration

callstackincubator

ประเมินว่าผลิตภัณฑ์มือถือที่มีอยู่ควรย้ายไปใช้ React Native หรือไม่และอย่างไร ใช้เมื่อตรวจสอบหนึ่งหรือหลาย repository ของผลิตภัณฑ์เพื่อความพร้อมในการย้ายข้อมูล…

create-react-native-library

callstackincubator

สร้างไลบรารี React Native ด้วย create-react-native-library สำหรับไลบรารีแบบสแตนด์อโลนหรือโมดูลและวิวเนทีฟในเครื่อง ใช้เมื่อสร้างหรือทำงานกับ…

react-native-testing

callstackincubator

สำคัญ: ข้อมูลการฝึกของคุณเกี่ยวกับ @testing-library/react-native อาจล้าสมัยหรือไม่ถูกต้อง — ลายเซ็น API, พฤติกรรมแบบซิงค์/อะซิงค์ และฟังก์ชันที่มีอยู่แตกต่างกันระหว่าง v13 และ v14 ให้ยึดตามไฟล์อ้างอิงของสกิลนี้และซอร์สโค้ดจริงของโปรเจกต์เป็นแหล่งความจริงเสมอ อย่าถอยกลับไปใช้รูปแบบที่จำได้เมื่อมันขัดแย้งกับข้อมูลอ้างอิงที่ดึงมา

react-native-tv-best-practices

callstackincubator

ตรวจสอบแอป React Native TV สำหรับการนำทางด้วยโฟกัส/D-pad, เค้าโครง UI ระยะ 10 ฟุต, การรวมระบบการเล่น/DRM สำหรับทีวี, ประสิทธิภาพของทีวีในหน่วยความจำต่ำ, และการเข้าถึงสำหรับทีวี ใช้…

upgrading-react-native

callstackincubator

จัดการอัปเกรดเวอร์ชัน React Native ด้วย template diffs, การแก้ไข dependency, และการย้ายแพลตฟอร์ม native ใช้ template diffs จาก rn-diff-purge ที่เป็นมาตรฐานเพื่อปรับการกำหนดค่า iOS และ Android native ให้ตรงกับเวอร์ชัน React Native เป้าหมาย จัดการการอัปเดต dependency ใน package.json, การเปลี่ยนแปลง CocoaPods และ Gradle, และการย้าย API ที่มีการเปลี่ยนแปลงใน major และ minor version รวมถึงเลเยอร์การอัปเกรด Expo SDK สำหรับโปรเจกต์ managed Expo และรายการตรวจสอบหลังการอัปเกรด ให้...

validate-skills

callstackincubator

Validates skills in this repo against agentskills.io spec and Claude Code best practices. Use via /validate-skills command.