[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71EKPTY0ZDNBKJRE6XC10H2":3,"skill-same:01M71EKPTY0ZDNBKJRE6XC10H2":75},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":44,"linkOnly":45,"markdownContent":46,"markdownBody":47,"frontMatter":48,"refName":52,"commitSha":53,"skillDirectory":54,"forksCount":55,"repositoryHtmlUrl":56,"repositoryHomepageUrl":6,"ownerHtmlUrl":57,"ownerBlogUrl":58,"ownerDescription":59,"updatedAt":60,"install":61,"resources":74},"01M71EKPTY0ZDNBKJRE6XC10H2","react-native-best-practices",null,"Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, or debugging jank and frame drops.","iDorgham\u002FWorkspace-Factory","iDorgham","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F136521493?v=4","01M6CNGBDAHE4ARW3YJEF4X2FD","Dorgham","01M71E8H3CXZ7DJX59MTM9JEB2",1,"MIT","https:\u002F\u002Fgithub.com\u002FiDorgham\u002FWorkspace-Factory\u002Fblob\u002Fmaster\u002F.ai\u002Fskills\u002Fofficial_callstackincubator_react_native_best_practices\u002Fskill.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"react native","native","best practices","react native best practices","react","guidelines","Optimization","for","animations","expo","react-native","bundle size","overhead","tasks","debugging","re","performance","memory","bridge","modules","2026-11-10 10:12:30",false,"---\nname: react-native-best-practices\ndescription: Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, or debugging jank and frame drops.\nlicense: MIT\nmetadata:\n  author: Callstack\n  tags: react-native, expo, performance, optimization, profiling\n---\n\n# React Native Best Practices\n\n## Overview\n\nPerformance optimization guide for React Native applications, covering JavaScript\u002FReact, Native (iOS\u002FAndroid), and bundling optimizations. Based on Callstack's \"Ultimate Guide to React Native Optimization\".\n\n## Skill Format\n\nEach reference file follows a hybrid format for fast lookup and deep understanding:\n\n- **Quick Pattern**: Incorrect\u002FCorrect code snippets for immediate pattern matching\n- **Quick Command**: Shell commands for process\u002Fmeasurement skills\n- **Quick Config**: Configuration snippets for setup-focused skills\n- **Quick Reference**: Summary tables for conceptual skills\n- **Deep Dive**: Full context with When to Use, Prerequisites, Step-by-Step, Common Pitfalls\n\n**Impact ratings**: CRITICAL (fix immediately), HIGH (significant improvement), MEDIUM (worthwhile optimization)\n\n## When to Apply\n\nReference these guidelines when:\n- Debugging slow\u002Fjanky UI or animations\n- Investigating memory leaks (JS or native)\n- Optimizing app startup time (TTI)\n- Reducing bundle or app size\n- Writing native modules (Turbo Modules)\n- Profiling React Native performance\n- Reviewing React Native code for performance\n\n## Security Notes\n\n- Treat shell commands in these references as local developer operations. Review them before running, prefer version-pinned tooling, and avoid piping remote scripts directly to a shell.\n- Treat third-party libraries and plugins as dependencies that still require normal supply-chain controls: pin versions, verify provenance, and update through your standard review process.\n- Treat Re.Pack code splitting as first-party artifact delivery only. Remote chunks must come from trusted HTTPS origins you control and be pinned to the current app release.\n\n## Priority-Ordered Guidelines\n\n| Priority | Category | Impact | Prefix |\n|----------|----------|--------|--------|\n| 1 | FPS & Re-renders | CRITICAL | `js-*` |\n| 2 | Bundle Size | CRITICAL | `bundle-*` |\n| 3 | TTI Optimization | HIGH | `native-*`, `bundle-*` |\n| 4 | Native Performance | HIGH | `native-*` |\n| 5 | Memory Management | MEDIUM-HIGH | `js-*`, `native-*` |\n| 6 | Animations | MEDIUM | `js-*` |\n\n## Quick Reference\n\n### Optimization Workflow\n\nFollow this cycle for any performance issue: **Measure → Optimize → Re-measure → Validate**\n\n1. **Measure**: Capture baseline metrics before changes. For runtime issues, prefer commit timeline, re-render counts, slow components, heaviest-commit breakdown, and startup\u002FTTI when available. Component tree depth or count are optional context, not substitutes.\n2. **Optimize**: Apply the targeted fix from the relevant reference\n3. **Re-measure**: Run the same measurement to get updated metrics\n4. **Validate**: Confirm improvement (e.g., FPS 45→60, TTI 3.2s→1.8s, bundle 2.1MB→1.6MB)\n\nIf metrics did not improve, revert and try the next suggested fix.\n\n### Review Guardrails\n\n- Check library versions before suggesting API-specific fixes. Example: FlashList v2 deprecates `estimatedItemSize`, so do not flag it as missing there.\n- Do not suggest `useMemo` or `useCallback` dependency changes unless behavior is demonstrably incorrect or profiling shows wasted work tied to that value.\n- Do not report stale closures speculatively. Show the stale read path, a repro, or profiler evidence before calling it out.\n- When profiling a flow, measure the target interaction itself. Do not treat component tree depth or component count as the main performance evidence.\n\n### Critical: FPS & Re-renders\n\n**Profile first:**\n```bash\n# Open React Native DevTools\n# Press 'j' in Metro, or shake device → \"Open DevTools\"\n```\n\n**Common fixes:**\n- Replace ScrollView with FlatList\u002FFlashList for lists\n- Use React Compiler for automatic memoization\n- Use atomic state (Jotai\u002FZustand) to reduce re-renders\n- Use `useDeferredValue` for expensive computations\n\n### Critical: Bundle Size\n\n**Analyze bundle:**\n```bash\nnpx react-native bundle \\\n  --entry-file index.js \\\n  --bundle-output output.js \\\n  --platform ios \\\n  --sourcemap-output output.js.map \\\n  --dev false --minify true\n\nnpx source-map-explorer output.js --no-border-checks\n```\n\n**Verify improvement after optimization:**\n```bash\n# Record baseline size before changes\nls -lh output.js  # e.g., Before: 2.1 MB\n\n# After applying fixes, re-bundle and compare\nnpx react-native bundle --entry-file index.js --bundle-output output.js \\\n  --platform ios --dev false --minify true\nls -lh output.js  # e.g., After: 1.6 MB  (24% reduction)\n```\n\n**Common fixes:**\n- Avoid barrel imports (import directly from source)\n- Remove unnecessary Intl polyfills only after checking Hermes API and method coverage\n- Enable tree shaking (Expo SDK 52+ or Re.Pack)\n- Enable R8 for Android native code shrinking\n\n### High: TTI Optimization\n\n**Measure TTI:**\n- Use `react-native-performance` for markers\n- Only measure cold starts (exclude warm\u002Fhot\u002Fprewarm)\n\n**Common fixes:**\n- Disable JS bundle compression on Android (enables Hermes mmap)\n- Use native navigation (react-native-screens)\n- Preload commonly-used expensive screens before navigating to them\n\n### High: Native Performance\n\n**Profile native:**\n- iOS: Xcode Instruments → Time Profiler\n- Android: Android Studio → CPU Profiler\n\n**Common fixes:**\n- Use background threads for heavy native work\n- Prefer async over sync Turbo Module methods\n- Use C++ for cross-platform performance-critical code\n\n## References\n\nFull documentation with code examples in [references\u002F][references]:\n\n### JavaScript\u002FReact (`js-*`)\n\n| File | Impact | Description |\n|------|--------|-------------|\n| [js_lists_flatlist_flashlist.md][js-lists-flatlist-flashlist] | CRITICAL | Replace ScrollView with virtualized lists |\n| [js_profile_react.md][js-profile-react] | MEDIUM | React DevTools profiling |\n| [js_measure_fps.md][js-measure-fps] | HIGH | FPS monitoring and measurement |\n| [js_memory_leaks.md][js-memory-leaks] | MEDIUM | JS memory leak hunting |\n| [js_atomic_state.md][js-atomic-state] | HIGH | Jotai\u002FZustand patterns |\n| [js_concurrent_react.md][js-concurrent-react] | HIGH | useDeferredValue, useTransition |\n| [js_react_compiler.md][js-react-compiler] | HIGH | Automatic memoization |\n| [js_animations_reanimated.md][js-animations-reanimated] | MEDIUM | Reanimated worklets |\n| [js_bottomsheet.md][js-bottomsheet] | HIGH | Bottom sheet optimization |\n| [js_uncontrolled_components.md][js-uncontrolled-components] | HIGH | TextInput optimization |\n\n### Native (`native-*`)\n\n| File | Impact | Description |\n|------|--------|-------------|\n| [native_turbo_modules.md][native-turbo-modules] | HIGH | Building fast native modules |\n| [native_sdks_over_polyfills.md][native-sdks-over-polyfills] | HIGH | Native vs JS libraries |\n| [native_measure_tti.md][native-measure-tti] | HIGH | TTI measurement setup |\n| [native_threading_model.md][native-threading-model] | HIGH | Turbo Module threads |\n| [native_profiling.md][native-profiling] | MEDIUM | Xcode\u002FAndroid Studio profiling |\n| [native_platform_setup.md][native-platform-setup] | MEDIUM | iOS\u002FAndroid tooling guide |\n| [native_view_flattening.md][native-view-flattening] | MEDIUM | View hierarchy debugging |\n| [native_memory_patterns.md][native-memory-patterns] | MEDIUM | C++\u002FSwift\u002FKotlin memory |\n| [native_memory_leaks.md][native-memory-leaks] | MEDIUM | Native memory leak hunting |\n| [native_android_16kb_alignment.md][native-android-16kb-alignment] | CRITICAL | Third-party library alignment for Google Play |\n\n### Bundling (`bundle-*`)\n\n| File | Impact | Description |\n|------|--------|-------------|\n| [bundle_barrel_exports.md][bundle-barrel-exports] | CRITICAL | Avoid barrel imports |\n| [bundle_analyze_js.md][bundle-analyze-js] | CRITICAL | JS bundle visualization |\n| [bundle_tree_shaking.md][bundle-tree-shaking] | HIGH | Dead code elimination |\n| [bundle_analyze_app.md][bundle-analyze-app] | HIGH | App size analysis |\n| [bundle_r8_android.md][bundle-r8-android] | HIGH | Android code shrinking |\n| [bundle_hermes_mmap.md][bundle-hermes-mmap] | HIGH | Disable bundle compression |\n| [bundle_native_assets.md][bundle-native-assets] | HIGH | Asset catalog setup |\n| [bundle_library_size.md][bundle-library-size] | MEDIUM | Evaluate dependencies |\n| [bundle_code_splitting.md][bundle-code-splitting] | MEDIUM | Re.Pack code splitting |\n\n\n## Searching References\n\n```bash\n# Find patterns by keyword\ngrep -l \"reanimated\" references\u002F\ngrep -l \"flatlist\" references\u002F\ngrep -l \"memory\" references\u002F\ngrep -l \"profil\" references\u002F\ngrep -l \"tti\" references\u002F\ngrep -l \"bundle\" references\u002F\n```\n\n## Problem → Skill Mapping\n\n| Problem | Start With |\n|---------|------------|\n| App feels slow\u002Fjanky | [js_measure_fps.md][js-measure-fps] → [js_profile_react.md][js-profile-react] |\n| Too many re-renders | [js_profile_react.md][js-profile-react] → [js_react_compiler.md][js-react-compiler] |\n| Slow startup (TTI) | [native_measure_tti.md][native-measure-tti] → [bundle_analyze_js.md][bundle-analyze-js] |\n| Large app size | [bundle_analyze_app.md][bundle-analyze-app] → [bundle_r8_android.md][bundle-r8-android] |\n| Memory growing | [js_memory_leaks.md][js-memory-leaks] or [native_memory_leaks.md][native-memory-leaks] |\n| Animation drops frames | [js_animations_reanimated.md][js-animations-reanimated] |\n| Bottom sheet jank\u002Fre-renders | [js_bottomsheet.md][js-bottomsheet] → [js_animations_reanimated.md][js-animations-reanimated] |\n| List scroll jank | [js_lists_flatlist_flashlist.md][js-lists-flatlist-flashlist] |\n| TextInput lag | [js_uncontrolled_components.md][js-uncontrolled-components] |\n| Native module slow | [native_turbo_modules.md][native-turbo-modules] → [native_threading_model.md][native-threading-model] |\n| Native library alignment issue | [native_android_16kb_alignment.md][native-android-16kb-alignment] |\n\n[references]: references\u002F\n[js-lists-flatlist-flashlist]: references\u002Fjs_lists_flatlist_flashlist.md\n[js-profile-react]: references\u002Fjs_profile_react.md\n[js-measure-fps]: references\u002Fjs_measure_fps.md\n[js-memory-leaks]: references\u002Fjs_memory_leaks.md\n[js-atomic-state]: references\u002Fjs_atomic_state.md\n[js-concurrent-react]: references\u002Fjs_concurrent_react.md\n[js-react-compiler]: references\u002Fjs_react_compiler.md\n[js-animations-reanimated]: references\u002Fjs_animations_reanimated.md\n[js-bottomsheet]: references\u002Fjs_bottomsheet.md\n[js-uncontrolled-components]: references\u002Fjs_uncontrolled_components.md\n[native-turbo-modules]: references\u002Fnative_turbo_modules.md\n[native-sdks-over-polyfills]: references\u002Fnative_sdks_over_polyfills.md\n[native-measure-tti]: references\u002Fnative_measure_tti.md\n[native-threading-model]: references\u002Fnative_threading_model.md\n[native-profiling]: references\u002Fnative_profiling.md\n[native-platform-setup]: references\u002Fnative_platform_setup.md\n[native-view-flattening]: references\u002Fnative_view_flattening.md\n[native-memory-patterns]: references\u002Fnative_memory_patterns.md\n[native-memory-leaks]: references\u002Fnative_memory_leaks.md\n[native-android-16kb-alignment]: references\u002Fnative_android_16kb_alignment.md\n[bundle-barrel-exports]: references\u002Fbundle_barrel_exports.md\n[bundle-analyze-js]: references\u002Fbundle_analyze_js.md\n[bundle-tree-shaking]: references\u002Fbundle_tree_shaking.md\n[bundle-analyze-app]: references\u002Fbundle_analyze_app.md\n[bundle-r8-android]: references\u002Fbundle_r8_android.md\n[bundle-hermes-mmap]: references\u002Fbundle_hermes_mmap.md\n[bundle-native-assets]: references\u002Fbundle_native_assets.md\n[bundle-library-size]: references\u002Fbundle_library_size.md\n[bundle-code-splitting]: references\u002Fbundle_code_splitting.md\n\n## Attribution\n\nBased on \"The Ultimate Guide to React Native Optimization\" by Callstack.\n","# React Native Best Practices\n\n## Overview\n\nPerformance optimization guide for React Native applications, covering JavaScript\u002FReact, Native (iOS\u002FAndroid), and bundling optimizations. Based on Callstack's \"Ultimate Guide to React Native Optimization\".\n\n## Skill Format\n\nEach reference file follows a hybrid format for fast lookup and deep understanding:\n\n- **Quick Pattern**: Incorrect\u002FCorrect code snippets for immediate pattern matching\n- **Quick Command**: Shell commands for process\u002Fmeasurement skills\n- **Quick Config**: Configuration snippets for setup-focused skills\n- **Quick Reference**: Summary tables for conceptual skills\n- **Deep Dive**: Full context with When to Use, Prerequisites, Step-by-Step, Common Pitfalls\n\n**Impact ratings**: CRITICAL (fix immediately), HIGH (significant improvement), MEDIUM (worthwhile optimization)\n\n## When to Apply\n\nReference these guidelines when:\n- Debugging slow\u002Fjanky UI or animations\n- Investigating memory leaks (JS or native)\n- Optimizing app startup time (TTI)\n- Reducing bundle or app size\n- Writing native modules (Turbo Modules)\n- Profiling React Native performance\n- Reviewing React Native code for performance\n\n## Security Notes\n\n- Treat shell commands in these references as local developer operations. Review them before running, prefer version-pinned tooling, and avoid piping remote scripts directly to a shell.\n- Treat third-party libraries and plugins as dependencies that still require normal supply-chain controls: pin versions, verify provenance, and update through your standard review process.\n- Treat Re.Pack code splitting as first-party artifact delivery only. Remote chunks must come from trusted HTTPS origins you control and be pinned to the current app release.\n\n## Priority-Ordered Guidelines\n\n| Priority | Category | Impact | Prefix |\n|----------|----------|--------|--------|\n| 1 | FPS & Re-renders | CRITICAL | `js-*` |\n| 2 | Bundle Size | CRITICAL | `bundle-*` |\n| 3 | TTI Optimization | HIGH | `native-*`, `bundle-*` |\n| 4 | Native Performance | HIGH | `native-*` |\n| 5 | Memory Management | MEDIUM-HIGH | `js-*`, `native-*` |\n| 6 | Animations | MEDIUM | `js-*` |\n\n## Quick Reference\n\n### Optimization Workflow\n\nFollow this cycle for any performance issue: **Measure → Optimize → Re-measure → Validate**\n\n1. **Measure**: Capture baseline metrics before changes. For runtime issues, prefer commit timeline, re-render counts, slow components, heaviest-commit breakdown, and startup\u002FTTI when available. Component tree depth or count are optional context, not substitutes.\n2. **Optimize**: Apply the targeted fix from the relevant reference\n3. **Re-measure**: Run the same measurement to get updated metrics\n4. **Validate**: Confirm improvement (e.g., FPS 45→60, TTI 3.2s→1.8s, bundle 2.1MB→1.6MB)\n\nIf metrics did not improve, revert and try the next suggested fix.\n\n### Review Guardrails\n\n- Check library versions before suggesting API-specific fixes. Example: FlashList v2 deprecates `estimatedItemSize`, so do not flag it as missing there.\n- Do not suggest `useMemo` or `useCallback` dependency changes unless behavior is demonstrably incorrect or profiling shows wasted work tied to that value.\n- Do not report stale closures speculatively. Show the stale read path, a repro, or profiler evidence before calling it out.\n- When profiling a flow, measure the target interaction itself. Do not treat component tree depth or component count as the main performance evidence.\n\n### Critical: FPS & Re-renders\n\n**Profile first:**\n```bash\n# Open React Native DevTools\n# Press 'j' in Metro, or shake device → \"Open DevTools\"\n```\n\n**Common fixes:**\n- Replace ScrollView with FlatList\u002FFlashList for lists\n- Use React Compiler for automatic memoization\n- Use atomic state (Jotai\u002FZustand) to reduce re-renders\n- Use `useDeferredValue` for expensive computations\n\n### Critical: Bundle Size\n\n**Analyze bundle:**\n```bash\nnpx react-native bundle \\\n  --entry-file index.js \\\n  --bundle-output output.js \\\n  --platform ios \\\n  --sourcemap-output output.js.map \\\n  --dev false --minify true\n\nnpx source-map-explorer output.js --no-border-checks\n```\n\n**Verify improvement after optimization:**\n```bash\n# Record baseline size before changes\nls -lh output.js  # e.g., Before: 2.1 MB\n\n# After applying fixes, re-bundle and compare\nnpx react-native bundle --entry-file index.js --bundle-output output.js \\\n  --platform ios --dev false --minify true\nls -lh output.js  # e.g., After: 1.6 MB  (24% reduction)\n```\n\n**Common fixes:**\n- Avoid barrel imports (import directly from source)\n- Remove unnecessary Intl polyfills only after checking Hermes API and method coverage\n- Enable tree shaking (Expo SDK 52+ or Re.Pack)\n- Enable R8 for Android native code shrinking\n\n### High: TTI Optimization\n\n**Measure TTI:**\n- Use `react-native-performance` for markers\n- Only measure cold starts (exclude warm\u002Fhot\u002Fprewarm)\n\n**Common fixes:**\n- Disable JS bundle compression on Android (enables Hermes mmap)\n- Use native navigation (react-native-screens)\n- Preload commonly-used expensive screens before navigating to them\n\n### High: Native Performance\n\n**Profile native:**\n- iOS: Xcode Instruments → Time Profiler\n- Android: Android Studio → CPU Profiler\n\n**Common fixes:**\n- Use background threads for heavy native work\n- Prefer async over sync Turbo Module methods\n- Use C++ for cross-platform performance-critical code\n\n## References\n\nFull documentation with code examples in [references\u002F][references]:\n\n### JavaScript\u002FReact (`js-*`)\n\n| File | Impact | Description |\n|------|--------|-------------|\n| [js_lists_flatlist_flashlist.md][js-lists-flatlist-flashlist] | CRITICAL | Replace ScrollView with virtualized lists |\n| [js_profile_react.md][js-profile-react] | MEDIUM | React DevTools profiling |\n| [js_measure_fps.md][js-measure-fps] | HIGH | FPS monitoring and measurement |\n| [js_memory_leaks.md][js-memory-leaks] | MEDIUM | JS memory leak hunting |\n| [js_atomic_state.md][js-atomic-state] | HIGH | Jotai\u002FZustand patterns |\n| [js_concurrent_react.md][js-concurrent-react] | HIGH | useDeferredValue, useTransition |\n| [js_react_compiler.md][js-react-compiler] | HIGH | Automatic memoization |\n| [js_animations_reanimated.md][js-animations-reanimated] | MEDIUM | Reanimated worklets |\n| [js_bottomsheet.md][js-bottomsheet] | HIGH | Bottom sheet optimization |\n| [js_uncontrolled_components.md][js-uncontrolled-components] | HIGH | TextInput optimization |\n\n### Native (`native-*`)\n\n| File | Impact | Description |\n|------|--------|-------------|\n| [native_turbo_modules.md][native-turbo-modules] | HIGH | Building fast native modules |\n| [native_sdks_over_polyfills.md][native-sdks-over-polyfills] | HIGH | Native vs JS libraries |\n| [native_measure_tti.md][native-measure-tti] | HIGH | TTI measurement setup |\n| [native_threading_model.md][native-threading-model] | HIGH | Turbo Module threads |\n| [native_profiling.md][native-profiling] | MEDIUM | Xcode\u002FAndroid Studio profiling |\n| [native_platform_setup.md][native-platform-setup] | MEDIUM | iOS\u002FAndroid tooling guide |\n| [native_view_flattening.md][native-view-flattening] | MEDIUM | View hierarchy debugging |\n| [native_memory_patterns.md][native-memory-patterns] | MEDIUM | C++\u002FSwift\u002FKotlin memory |\n| [native_memory_leaks.md][native-memory-leaks] | MEDIUM | Native memory leak hunting |\n| [native_android_16kb_alignment.md][native-android-16kb-alignment] | CRITICAL | Third-party library alignment for Google Play |\n\n### Bundling (`bundle-*`)\n\n| File | Impact | Description |\n|------|--------|-------------|\n| [bundle_barrel_exports.md][bundle-barrel-exports] | CRITICAL | Avoid barrel imports |\n| [bundle_analyze_js.md][bundle-analyze-js] | CRITICAL | JS bundle visualization |\n| [bundle_tree_shaking.md][bundle-tree-shaking] | HIGH | Dead code elimination |\n| [bundle_analyze_app.md][bundle-analyze-app] | HIGH | App size analysis |\n| [bundle_r8_android.md][bundle-r8-android] | HIGH | Android code shrinking |\n| [bundle_hermes_mmap.md][bundle-hermes-mmap] | HIGH | Disable bundle compression |\n| [bundle_native_assets.md][bundle-native-assets] | HIGH | Asset catalog setup |\n| [bundle_library_size.md][bundle-library-size] | MEDIUM | Evaluate dependencies |\n| [bundle_code_splitting.md][bundle-code-splitting] | MEDIUM | Re.Pack code splitting |\n\n\n## Searching References\n\n```bash\n# Find patterns by keyword\ngrep -l \"reanimated\" references\u002F\ngrep -l \"flatlist\" references\u002F\ngrep -l \"memory\" references\u002F\ngrep -l \"profil\" references\u002F\ngrep -l \"tti\" references\u002F\ngrep -l \"bundle\" references\u002F\n```\n\n## Problem → Skill Mapping\n\n| Problem | Start With |\n|---------|------------|\n| App feels slow\u002Fjanky | [js_measure_fps.md][js-measure-fps] → [js_profile_react.md][js-profile-react] |\n| Too many re-renders | [js_profile_react.md][js-profile-react] → [js_react_compiler.md][js-react-compiler] |\n| Slow startup (TTI) | [native_measure_tti.md][native-measure-tti] → [bundle_analyze_js.md][bundle-analyze-js] |\n| Large app size | [bundle_analyze_app.md][bundle-analyze-app] → [bundle_r8_android.md][bundle-r8-android] |\n| Memory growing | [js_memory_leaks.md][js-memory-leaks] or [native_memory_leaks.md][native-memory-leaks] |\n| Animation drops frames | [js_animations_reanimated.md][js-animations-reanimated] |\n| Bottom sheet jank\u002Fre-renders | [js_bottomsheet.md][js-bottomsheet] → [js_animations_reanimated.md][js-animations-reanimated] |\n| List scroll jank | [js_lists_flatlist_flashlist.md][js-lists-flatlist-flashlist] |\n| TextInput lag | [js_uncontrolled_components.md][js-uncontrolled-components] |\n| Native module slow | [native_turbo_modules.md][native-turbo-modules] → [native_threading_model.md][native-threading-model] |\n| Native library alignment issue | [native_android_16kb_alignment.md][native-android-16kb-alignment] |\n\n[references]: references\u002F\n[js-lists-flatlist-flashlist]: references\u002Fjs_lists_flatlist_flashlist.md\n[js-profile-react]: references\u002Fjs_profile_react.md\n[js-measure-fps]: references\u002Fjs_measure_fps.md\n[js-memory-leaks]: references\u002Fjs_memory_leaks.md\n[js-atomic-state]: references\u002Fjs_atomic_state.md\n[js-concurrent-react]: references\u002Fjs_concurrent_react.md\n[js-react-compiler]: references\u002Fjs_react_compiler.md\n[js-animations-reanimated]: references\u002Fjs_animations_reanimated.md\n[js-bottomsheet]: references\u002Fjs_bottomsheet.md\n[js-uncontrolled-components]: references\u002Fjs_uncontrolled_components.md\n[native-turbo-modules]: references\u002Fnative_turbo_modules.md\n[native-sdks-over-polyfills]: references\u002Fnative_sdks_over_polyfills.md\n[native-measure-tti]: references\u002Fnative_measure_tti.md\n[native-threading-model]: references\u002Fnative_threading_model.md\n[native-profiling]: references\u002Fnative_profiling.md\n[native-platform-setup]: references\u002Fnative_platform_setup.md\n[native-view-flattening]: references\u002Fnative_view_flattening.md\n[native-memory-patterns]: references\u002Fnative_memory_patterns.md\n[native-memory-leaks]: references\u002Fnative_memory_leaks.md\n[native-android-16kb-alignment]: references\u002Fnative_android_16kb_alignment.md\n[bundle-barrel-exports]: references\u002Fbundle_barrel_exports.md\n[bundle-analyze-js]: references\u002Fbundle_analyze_js.md\n[bundle-tree-shaking]: references\u002Fbundle_tree_shaking.md\n[bundle-analyze-app]: references\u002Fbundle_analyze_app.md\n[bundle-r8-android]: references\u002Fbundle_r8_android.md\n[bundle-hermes-mmap]: references\u002Fbundle_hermes_mmap.md\n[bundle-native-assets]: references\u002Fbundle_native_assets.md\n[bundle-library-size]: references\u002Fbundle_library_size.md\n[bundle-code-splitting]: references\u002Fbundle_code_splitting.md\n\n## Attribution\n\nBased on \"The Ultimate Guide to React Native Optimization\" by Callstack.\n",{"name":5,"license":15,"metadata":49,"description":7},{"tags":50,"author":51},"react-native, expo, performance, optimization, profiling","Callstack","master","c2e410e11df4d80d885e0ecf0583ef3c926df736",".ai\u002Fskills\u002Fofficial_callstackincubator_react_native_best_practices",0,"https:\u002F\u002Fgithub.com\u002FiDorgham\u002FWorkspace-Factory","https:\u002F\u002Fgithub.com\u002FiDorgham","Dorgham.me","hey I'm Dorgham \r\nI code, I create, and AI codes back. \r\nMaybe we can give AI the chance!! now we begin. 🚀🤖\r\n... . . . git commit -m \"Hello, Future\" ","2026-05-04 18:39:09",{"source":8,"skillName":5,"commands":62,"prompt":72,"zipAvailable":73},[63,66,69],{"tool":64,"command":65},"npx","npx skills add iDorgham\u002FWorkspace-Factory --skill react-native-best-practices",{"tool":67,"command":68},"bunx","bunx skills add iDorgham\u002FWorkspace-Factory --skill react-native-best-practices",{"tool":70,"command":71},"pnpm","pnpm dlx skills add iDorgham\u002FWorkspace-Factory --skill react-native-best-practices","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FiDorgham\u002FWorkspace-Factory\u002Fblob\u002Fmaster\u002F.ai\u002Fskills\u002Fofficial_callstackincubator_react_native_best_practices\u002Fskill.md",true,[],[76,104,119,138,158,181],{"skillNo":77,"name":78,"nameZh":6,"description":79,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":80,"categories":81,"keywords":83,"publishedAt":103},"01M71P8WVBMB2X3D24R0YT0B0E","vercel-react-view-transitions","Guide for implementing smooth, native-feeling animations using React's View Transition API (`\u003CViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter\u002Fexit of components, animate list reorder, implement directional (forward\u002Fback) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.","https:\u002F\u002Fgithub.com\u002FiDorgham\u002FWorkspace-Factory\u002Fblob\u002Fmaster\u002Ffactory\u002Flibrary\u002Fskills\u002Fofficial_vercel_labs_react_view_transitions\u002Fskill.md",[82],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[28,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102],"vercel react view transitions","view","react view transitions","vercel","transitions","shared","back","Animation","css","types","states","element","implementing","when","components","api","route","create","libraries","2026-11-10 13:02:02",{"skillNo":105,"name":106,"nameZh":6,"description":107,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":108,"categories":109,"keywords":111,"publishedAt":103},"01M71P8TDGHZ289TSAC5VTG2EW","vercel-react-native-skills","React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.","https:\u002F\u002Fgithub.com\u002FiDorgham\u002FWorkspace-Factory\u002Fblob\u002Fmaster\u002Ffactory\u002Flibrary\u002Fskills\u002Fofficial_vercel_labs_react_native_skills\u002Fskill.md",[110],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[28,24,25,87,112,113,43,40,96,114,97,37,98,115,33,116,117,118,32,31],"vercel react native skills","react native skills","apps","mobile","list","mobile performance","platform",{"skillNo":120,"name":121,"nameZh":6,"description":122,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":123,"categories":124,"keywords":126,"publishedAt":103},"01M71P8QK4JF5BYRGYDDGPZQG9","vercel-react-best-practices","React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React\u002FNext.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.","https:\u002F\u002Fgithub.com\u002FiDorgham\u002FWorkspace-Factory\u002Fblob\u002Fmaster\u002Ffactory\u002Flibrary\u002Fskills\u002Fofficial_vercel_labs_react_best_practices\u002Fskill.md",[125],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[28,127,128,87,26,40,129,97,130,37,98,131,132,133,134,135,136,30,29,137],"react best practices","vercel react best practices","writing","code","data fetching","react components","next","refactoring","data","patterns","triggers",{"skillNo":139,"name":140,"nameZh":6,"description":141,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":142,"categories":143,"keywords":145,"publishedAt":103},"01M71P8HVEA70K5N6ZVJCG2ED3","vercel-composition-patterns","React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.","https:\u002F\u002Fgithub.com\u002FiDorgham\u002FWorkspace-Factory\u002Fblob\u002Fmaster\u002Ffactory\u002Flibrary\u002Fskills\u002Fofficial_vercel_labs_composition_patterns\u002Fskill.md",[144],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[146,87,147,136,148,149,150,151,137,152,153,154,97,155,37,98,156,157,99,28],"Composition","composition patterns","vercel composition patterns","react composition patterns","react 19","render","boolean","component architecture","use","reusable","architecture","react composition",{"skillNo":159,"name":160,"nameZh":6,"description":161,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":162,"categories":163,"keywords":167,"publishedAt":103},"01M71P60XXKKP222ZFJRG7R373","supabase-postgres-best-practices","Postgres performance optimization and best practices from Supabase. Use this skill when writing, reviewing, or optimizing Postgres queries, schema designs, or database configurations.","https:\u002F\u002Fgithub.com\u002FiDorgham\u002FWorkspace-Factory\u002Fblob\u002Fmaster\u002Ffactory\u002Flibrary\u002Fskills\u002Fofficial_supabase_supabase_postgres_best_practices\u002Fskill.md",[164],{"categoryNo":165,"categoryName":166,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",[168,169,170,171,26,172,173,174,31,30,40,175,176,129,177,154,178,179,180,97],"postgres best practices","supabase","postgres","supabase postgres best practices","categories","postgres performance","advanced","correct","schema","impact","Rules","critical","database",{"skillNo":182,"name":183,"nameZh":6,"description":184,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":185,"categories":186,"keywords":188,"publishedAt":204},"01M71P2ZCEJD0PKC458YTP1FJW","portable-text-serialization","Render and serialize Portable Text to React, Svelte, Vue, Astro, HTML, Markdown, and plain text. Use when implementing Portable Text rendering in any frontend framework, building custom serializers for non-standard block types, converting Portable Text to HTML strings server-side, converting Portable Text to Markdown, extracting plain text from Portable Text, or troubleshooting rendering issues with marks, blocks, lists, or custom types.","https:\u002F\u002Fgithub.com\u002FiDorgham\u002FWorkspace-Factory\u002Fblob\u002Fmaster\u002Ffactory\u002Flibrary\u002Fskills\u002Fofficial_sanity_io_portable_text_serialization\u002Fskill.md",[187],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[189,190,191,192,193,93,194,151,195,96,196,197,97,28,198,199,200,201,202,203],"text","portable text serialization","portable","serialization","extracting","strings","issues","frontend","svelte","sanity","astro","server","markdown","rendering","vue","2026-11-10 10:56:23"]