skills.rest
chuxiaoguo
chuxiaoguoCOMMUNITY
Explore all skills by this author →
GitHub

react-native-best-practices

Optimize React Native performance with profiling, rendering, startup, and bundle-size patterns.

Updated Aug 23, 2026
Search Tags:#performance#optimization#rendering#profiling#react-native#bundle-size
One-click install
npx skills add https://github.com/chuxiaoguo/skills-repo --skill react-native-best-practices-chuxiaoguo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-native-best-practices
Source: https://github.com/chuxiaoguo/skills-repo/tree/main/skills-collection/react-native-best-practices
Command: npx skills add https://github.com/chuxiaoguo/skills-repo --skill react-native-best-practices-chuxiaoguo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill consolidates React Native performance best practices to help teams reduce jank, improve startup times, and shrink bundle sizes.

Core Features & Use Cases

  • FPS and re-render optimization patterns to keep UIs responsive during scrolling and animations
  • Startup/TTI improvements to accelerate first meaningful render and interactivity
  • Bundle and asset optimization guidance to reduce app size and delivery costs
  • Real-world mapping to common RN configurations and tooling (Hermes, Reanimated, Metro, native modules)

Quick Start

Implement the patterns described across your project to reduce jank and accelerate startup.

Frequently Asked Questions about react-native-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I optimize React Native rendering to prevent jank during scrolling?▼

To optimize React Native rendering and prevent jank, apply patterns that reduce unnecessary re-renders and stabilize FPS during scrolling and animations.

What's the best way to improve React Native startup time and TTI?▼

Improve React Native startup time and TTI by applying targeted tuning patterns that accelerate first meaningful render and overall interactivity.

How do I reduce React Native bundle size and asset delivery costs?▼

Reduce React Native bundle size by applying asset optimization guidance that decreases app size and lowers delivery costs across your project.

Does this optimization guidance work with Hermes and Reanimated configurations?▼

Yes, this optimization guidance maps directly to common React Native tooling and configurations, including Hermes, Reanimated, Metro, and native modules.

Why are my React native profiling metrics not improving after basic changes?▼

React Native profiling metrics may stagnate without prioritizing FPS, re-renders, TTI, and native module strategies, which these proven optimization patterns address systematically.

Related Skills

Explore More Software Engineering Skills→
GetStreamGetStream
1.2k

perf-benchmarking

Measure React Native app performance via Hermes CPU and render profiling.

Official
Advanced
callstackincubatorcallstackincubator
1.6k

react-native-best-practices

Profile and optimize React Native performance bottlenecks across JavaScript and native layers.

Official
Advanced
ricablericable

vercel-react-native-skills

Review React Native and Expo screens for performance and implementation improvements.

Community
Advanced
yldst-devyldst-dev

vercel-react-best-practices

Identify and enforce React/Next.js performance best practices in codebases.

Community
Advanced