React Native Best Practices

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.

1,694 stars 117 forksFrontend & DesignOfficial

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add callstackincubator/agent-skills --skill react-native-best-practices

Manual install

git clone --depth 1 https://github.com/callstackincubator/agent-skills.git /tmp/agent-skills
mkdir -p ~/.claude/skills
cp -r /tmp/agent-skills/skills/react-native-best-practices ~/.claude/skills/react-native-best-practices

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# React Native Best Practices

## Overview

Performance optimization guide for React Native applications, covering JavaScript/React, Native (iOS/Android), and bundling optimizations. Based on Callstack's "Ultimate Guide to React Native Optimization".

## When to Apply

Reference these guidelines when:
- Debugging slow/janky UI or animations
- Investigating memory leaks (JS or native)
- Optimizing app startup time (TTI)
- Reducing bundle or app size
- Writing native modules (Turbo Modules)
- Profiling React Native performance
- Reviewing React Native code for performance

## Security Notes

- 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.
- 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.
- Treat remote chunk loading as first-party artifact delivery only. Prefer app-bundled chunks or signed CI release manifests; hosted chunks must come from trusted HTTPS origins you control and be pinned to the current app release.

## Priority-Ordered Guidelines

| Priority | Category | Impact | Prefix |
|----------|----------|--------|--------|
| 1 | FPS & Re-renders | CRITICAL | `js-*` |
| 2 | Bundle Size | CRITICAL | `bundle-*` |
| 3 | TTI Optimization | HIGH | `native-*`, `bundle-*` |

Read the full skill on GitHub

Details

Skill name: react-native-best-practices
Repository: callstackincubator/agent-skills
Path: skills/react-native-best-practices/SKILL.md
License: MIT
Repo updated: 8 October 2026
Listed in: heilcheng/awesome-agent-skills

FAQ

What does the React Native Best Practices skill do?

How do I install the React Native Best Practices skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add callstackincubator/agent-skills --skill react-native-best-practices. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is React Native Best Practices popular?

It lives in callstackincubator/agent-skills, which has 1,694 GitHub stars and 117 forks, and is included in 1 curated skill list.

Related skills

Upgrading React Native

1.7k

callstackincubator/agent-skills

Upgrades React Native apps to newer versions by applying rn-diff-purge template diffs, updating package.json dependencies, migrating native iOS and Android configuration, resolving CocoaPods and Gradle changes, and handling breaking API updates. Use when upgrading React Native, bumping RN version, updating from RN 0.x to 0.y, or migrating Expo SDK alongside a React Native upgrade.

Mobile DevelopmentIn 1 list117

Markstream Angular

Simon-He95/markstream-vue

Integrate the alpha markstream-angular package into an Angular 20+ app. Use when Codex needs standalone component imports, signal-based examples, CSS wiring, custom HTML tags or customComponents setup, or optional peer integration in an Angular repository.

Frontend & DesignIn 2 lists188

Oil UI

2.5k

oil-oil/oil-ui

设计、改进和评审网站、App、后台与组件的界面：探索设计方向、生成多风格同屏对比页，并基于真实截图打磨视觉层级；按请求交付对比页、设计说明、设计稿或可运行界面。只负责设计判断，不用于纯业务逻辑、接口构建、无界面变化的代码整理，或改法已完全明确的日常修改（如改文案、调数量、删指定元素、复用现有样式，哪怕带有“优化”字样）。已安装 oil-ui-pro 时交给 oil-ui-pro。

Frontend & DesignIn 1 list142

Markstream Custom Components

Simon-He95/markstream-vue

Override built-in Markstream node renderers and add trusted custom tags across Vue, React, Solid, Svelte, and Angular. Use when Codex needs scoped `setCustomComponents`, renderer-local React `streamingComponents` or `htmlComponents`, Angular/Svelte `customComponents`, Vue app-scoped components, node override keys such as `image`, `code_block`, `mermaid`, or `link`, or nested renderers for tags such as `thinking`.

Frontend & DesignIn 2 lists188

Mono Color

3.6k

yanliudesign/mono-color-skill

Generate original one-ink or controlled two-ink editorial images from any theme, sentence, article idea, object, or reference photo. Always use this skill when the user asks for 单色海报、双色印刷、单色调视觉、蓝色/绿色孔版印刷、risograph、网点照片、复古或当代编辑排版、zine poster, monochrome editorial poster, duotone print, or asks to use the mono-color style. It uses an adaptive white, gray, or pale-beige substrate, no more than two printing inks, active negative space, terse human language, and strong serif/grotesk/mono typography without making retro styling the default or copying a source composition, wording, logo, or artwork.

Frontend & Design111

Markstream Install

Simon-He95/markstream-vue

Install and wire markstream-vue, markstream-react, markstream-vue2, markstream-angular, markstream-svelte, or markstream-solid into an existing repository. Use when Codex needs to choose the right package, install the smallest framework-specific peer-dependency set, fix CSS/reset order, choose Vue 3 renderer mode and built-in, plain, or custom code-block paths, decide between `content`, `nodes`, and Vue 3 virtual-scroll coordination, or add a minimal working renderer example.

Frontend & DesignIn 2 lists188

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.