菜单
Upgrade React Navigation from 6.x to 7.x or from 7.x to 8.x.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Writes Jest tests for the phlix-mobile React Native app using preset `react-native`, placing files at `src/<dir>/__tests__/<file>.test.ts` with `@/*` path aliases and reusing global mocks from `jest.setup.js`. Use when user says 'write test', 'add jest test', 'cover this store', 'test this component', or mentions TDD for TS/TSX files under `src/`. Capabilities: Zustand store testing with `getState`/`setState` reset, component snapshot/render testing via `react-test-renderer`, axios manager tests with `jest.mock('./client')`, async/await assertions, coverage filtering. Do NOT use for native iOS Swift/XCTest or Android JUnit/Espresso tests, Metro/build config tests, or non-React-Native projects.
Adds or extends a native module bridge across src/native/types.ts, ios/LocalPods/PhlixPlayer/ (Swift + Obj-C RCT_EXTERN_MODULE), and android/app/src/main/java/com/phlixmobile/ (Kotlin @ReactProp/@ReactMethod). Keeps event names and prop signatures aligned across all three layers, handles cleanup/observer removal. Use when user says 'add native module', 'expose to JS', 'bridge ios/android player feature', or edits PhlixPlayerView.swift/PhlixPlayerView.kt. Do NOT use for pure JS features, JS-only components, or features that don't require native code.
Scaffolds a new screen in `src/screens/` using `React.FC` default export, `<SafeContainer>`, the project's dark palette (`#0f0f1a`/`#1a1a2e`/`#0066cc`), and `LoadingSpinner`/`ErrorView`/`EmptyState` fallbacks. Updates `src/screens/index.ts` and wires the route into `src/navigation/RootNavigator.tsx` + `src/types/navigation.ts`. Use when user says 'add screen', 'new page', 'add a route', 'create screen', or adds files under `src/screens/`. Do NOT use for non-screen UI (use `rn-component` instead), for the native player modal (already wired), or for stateless presentational widgets.
Scaffolds a new Zustand store under src/stores/ using the create<State>((set, get) => ({...})) pattern with typed State interface, initialState + reset(), optional AsyncStorage persistence via the phlix_ key prefix, and wires the hook into src/stores/index.ts. Use when the user says 'add a store', 'new zustand store', 'add state for X', 'persist X across launches', or creates a file under src/stores/. Do NOT use for modifying existing stores' actions, for ephemeral component-local state (use useState), or for non-Zustand state (Redux/Context/Recoil are not used in this codebase).
Shape Android build logic with Gradle, version catalogs, plugins, convention patterns, and toolchain compatibility.
Adds a new API manager class in `src/api/` using the singleton pattern (`apiClient.get<T>(...)`, `export const xManager = new XManager()`). Wires re-exports through `src/api/index.ts`, keeps snake_case DTO fields, and puts shared media/playback types in `src/types/`. Use when user says 'add api manager', 'new endpoint client', 'wrap /api/foo', or adds files under `src/api/`. Do NOT use for raw axios calls outside `src/api/`, modifying `client.ts` interceptors, or anything inside `src/stores/` (managers stay stateless — Zustand stores call into them).
| name | upgrade-react-navigation |
| description | Upgrade React Navigation from 6.x to 7.x or from 7.x to 8.x. |
Upgrade React Navigation to the next major version and handle all required breaking changes while preserving existing navigation behavior.
You are upgrading React Navigation major version (6.x -> 7.x or 7.x -> 8.x).
Treat the patterns in this skill as canonical starting points, not an exhaustive list. The examples are meant to illustrate the core patterns.
When applying this skill to a codebase:
Do not treat the absence of an explicit example in this skill as a blocker. Use the guidance here to derive the appropriate migration for the local code.
Inspect the local code first.
If, after reading the relevant navigator and the upgrade reference, you cannot determine with high confidence whether an API changed or how to update it, pause and ask the user before editing code.
Ask for clarification when:
Check @react-navigation/native in package.json first.
6.x, read references/upgrade-6-to-7.md7.x, read references/upgrade-7-to-8.mdLoad exactly one reference file unless explicitly comparing versions.