[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6R9VGZ15WM4GG1RHBDENQSA":3,"skill-same:01M6R9VGZ15WM4GG1RHBDENQSA":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},"01M6R9VGZ15WM4GG1RHBDENQSA","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.","Nairon-AI\u002Fagentic-starter-pack","Nairon-AI","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F260662138?v=4","01M6R8PZ1Y8CSQGFN61VACZGTH","Nairon AI","01M6R8PZ6184VR3BA88YZFBC3N",4,"MIT","https:\u002F\u002Fgithub.com\u002FNairon-AI\u002Fagentic-starter-pack\u002Fblob\u002Fmain\u002Ffrontend\u002Fframeworks\u002Freact-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","best practices","native","react native best practices","react native","animations","memory","overhead","for","re","expo","react-native","modules","bridge","bundle size","Optimization","tasks","debugging","guidelines","performance","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","main","c9d0c408715983e993b2f9ebffdbfa7f10153bcb","frontend\u002Fframeworks\u002Freact-native-best-practices",0,"https:\u002F\u002Fgithub.com\u002FNairon-AI\u002Fagentic-starter-pack","https:\u002F\u002Fgithub.com\u002FNairon-AI","https:\u002F\u002Fwww.naironai.com\u002F","Building the future of Work","2026-09-20 17:40:05",{"source":8,"skillName":5,"commands":62,"prompt":72,"zipAvailable":73},[63,66,69],{"tool":64,"command":65},"npx","npx skills add Nairon-AI\u002Fagentic-starter-pack --skill react-native-best-practices",{"tool":67,"command":68},"bunx","bunx skills add Nairon-AI\u002Fagentic-starter-pack --skill react-native-best-practices",{"tool":70,"command":71},"pnpm","pnpm dlx skills add Nairon-AI\u002Fagentic-starter-pack --skill react-native-best-practices","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FNairon-AI\u002Fagentic-starter-pack\u002Fblob\u002Fmain\u002Ffrontend\u002Fframeworks\u002Freact-native-best-practices\u002FSKILL.md",true,[],[76,111,132,153,173,195],{"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":90,"publishedAt":44},"01M6RBCG630Y8X99XWR9Q4GYNY","writing-shape","Take a markdown file of raw material and shape it into an article through a conversational session — drafting candidate openings, growing the piece paragraph by paragraph, arguing about format (lists, tables, callouts, quotes) at each step. Use when the user has a pile of notes, fragments, or a rough draft and wants help turning it into something publishable.","https:\u002F\u002Fgithub.com\u002FNairon-AI\u002Fagentic-starter-pack\u002Fblob\u002Fmain\u002Fwriting\u002Fwriting-shape\u002FSKILL.md",[82,85],{"categoryNo":83,"categoryName":84,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":86,"categoryName":87,"taxonomyType":88,"taxonomyTypeDesc":89},"01JBSEEDCAT000000000000036","内容创作者","PROFESSION","适用职业",[91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110],"writing","writing shape","shape","notes","help","file","markdown","format","session","use","take","draft","article","material","it","about","quotes","at","candidate","when",{"skillNo":112,"name":113,"nameZh":6,"description":114,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":115,"categories":116,"keywords":119,"publishedAt":44},"01M6RBCCCB1KMF01P5SYGFWBSW","writing-fragments","Grilling session that mines the user for fragments — heterogeneous nuggets of writing (claims, vignettes, sharp sentences, half-thoughts) — and appends them to a single document as raw material for a future article. Use when the user wants to develop ideas before imposing structure, or mentions \"fragments\", \"ideate\", or \"raw material\" for writing.","https:\u002F\u002Fgithub.com\u002FNairon-AI\u002Fagentic-starter-pack\u002Fblob\u002Fmain\u002Fwriting\u002Fwriting-fragments\u002FSKILL.md",[117,118],{"categoryNo":83,"categoryName":84,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":86,"categoryName":87,"taxonomyType":88,"taxonomyTypeDesc":89},[91,120,121,122,123,124,99,100,125,126,127,103,128,104,129,130,32,131,110],"writing fragments","grilling","ideate","develop","user","document","structure","ideas","as","sharp","claims","single",{"skillNo":133,"name":134,"nameZh":6,"description":135,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":136,"categories":137,"keywords":140,"publishedAt":44},"01M6RBC8V7NHHKMTAZB4BPXVYQ","writing-beats","Shape an article as a journey of beats, choose-your-own-adventure style. The user picks a starting beat from the raw material, you write only that beat, then offer options for where to pivot next, beat by beat, until the article reaches a natural end. Use when the user has raw material and wants to assemble it as a narrative rather than an argument.","https:\u002F\u002Fgithub.com\u002FNairon-AI\u002Fagentic-starter-pack\u002Fblob\u002Fmain\u002Fwriting\u002Fwriting-beats\u002FSKILL.md",[138,139],{"categoryNo":83,"categoryName":84,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":86,"categoryName":87,"taxonomyType":88,"taxonomyTypeDesc":89},[91,141,142,143,100,144,145,93,146,147,148,103,149,128,150,104,151,152,32,110],"writing beats","choose","write","assemble","only","journey","next","options","end","style","narrative","argument",{"skillNo":154,"name":155,"nameZh":6,"description":156,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":157,"categories":158,"keywords":161,"publishedAt":44},"01M6RBC58SG5Y5SC4ZV4ZNEFHC","stop-slop","Remove AI writing patterns from prose. Use when drafting, editing, or reviewing text to eliminate predictable AI tells.","https:\u002F\u002Fgithub.com\u002FNairon-AI\u002Fagentic-starter-pack\u002Fblob\u002Fmain\u002Fwriting\u002Fstop-slop\u002FSKILL.md",[159,160],{"categoryNo":83,"categoryName":84,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":86,"categoryName":87,"taxonomyType":88,"taxonomyTypeDesc":89},[162,163,164,91,165,166,167,168,169,100,170,171,172,32,110],"stop","stop slop","slop","content","https","text","editing","remove","prose","patterns","drafts",{"skillNo":174,"name":175,"nameZh":6,"description":176,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":177,"categories":178,"keywords":181,"publishedAt":44},"01M6RBBJTTCJ7KZCP16G9JDFZH","humanizer","Remove signs of AI-generated writing from text. Use when editing or reviewing\ntext to make it sound more natural and human-written. Based on Wikipedia's\ncomprehensive \"Signs of AI writing\" guide. Detects and fixes patterns including:\ninflated symbolism, promotional language, superficial -ing analyses, vague\nattributions, em dash overuse, rule of three, AI vocabulary words, passive\nvoice, negative parallelisms, and filler phrases.","https:\u002F\u002Fgithub.com\u002FNairon-AI\u002Fagentic-starter-pack\u002Fblob\u002Fmain\u002Fwriting\u002Fhumanizer\u002FSKILL.md",[179,180],{"categoryNo":83,"categoryName":84,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":86,"categoryName":87,"taxonomyType":88,"taxonomyTypeDesc":89},[175,91,182,183,167,184,143,185,186,169,187,188,171,189,190,191,192,193,194,110],"code","em dash","read","edit","generated","guide","opencode","three","human","make","wikipedia","vague","dash",{"skillNo":196,"name":197,"nameZh":6,"description":198,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":199,"categories":200,"keywords":201,"publishedAt":44},"01M6RBBEQKJ5HRH8AV9J85QB1T","feedback","Prepare, deliver, and debrief timely interpersonal feedback using a question-first coaching flow, observable behavior, owned experience, and concrete impact. Use when drafting feedback, coaching managers, rehearsing a feedback conversation, praising specific behavior, or reviewing whether feedback landed.","https:\u002F\u002Fgithub.com\u002FNairon-AI\u002Fagentic-starter-pack\u002Fblob\u002Fmain\u002Fwriting\u002Ffeedback\u002FSKILL.md",[],[197,202,203,204,205,206,100,207,208,209,210,211,110,212],"prepare","flow","first","question","behavior","conversation","coaching","debrief","impact","managers","deliver"]