React Native Best Practices

CallstackOfficialPublished by Callstack

Skill
Guidelines
Software development
MIT
No issues found

From the author

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.

— the description by Callstack

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured approach to optimizing React Native applications. It focuses on critical performance metrics including FPS, Time to Interactive (TTI), bundle size, and memory management. The guide emphasizes a data-driven workflow: Measure, Optimize, Re-measure, and Validate, ensuring that performance improvements are based on actual profiling data rather than assumptions. It covers both JavaScript-level optimizations and native-level configurations, providing actionable strategies for common bottlenecks like list rendering, re-renders, and heavy native modules.

What it does

Provides a standardized performance measurement and optimization workflow
Offers specific guidance for improving FPS and reducing UI re-renders
Details techniques for analyzing and reducing JavaScript bundle sizes
Outlines strategies for optimizing TTI and native module performance
Includes best practices for memory leak detection and management
Provides a mapping of common performance problems to specific diagnostic and fix strategies

When to use it

When debugging janky UI, frame drops, or slow animations
When investigating memory leaks in JS or native code
When optimizing app startup time and TTI
When attempting to reduce the final application bundle size
When profiling and tuning native modules or Turbo Modules
During code reviews to ensure performance-conscious implementation

Advantages

Promotes a rigorous, evidence-based approach to performance tuning
Covers the full stack from React components to native bridge and bundle configuration
Provides clear, priority-ordered guidelines for triage
Includes specific diagnostic commands for profiling and bundle analysis
Helps avoid common pitfalls like premature optimization or incorrect dependency usage

Usage examples

“My React Native app is dropping frames during list scrolling. How should I investigate?”: The agent will guide you to use the FPS and re-render profiling workflow, suggesting the use of react-devtools to identify slow components and recommending the replacement of ScrollView with optimized alternatives like FlashList.
“How can I reduce the size of my React Native iOS bundle?”: The agent will provide steps to analyze the bundle using source-map-explorer, identify heavy dependencies, and apply optimizations such as avoiding barrel imports and enabling native code shrinking.

Install

1 of its files are not mirrored here, so install it from its source:
https://github.com/callstackincubator/agent-skills/tree/59e9d17446a248b21d86f078fcd0bd2d36db1ca4/skills/react-native-best-practices

Documentation by Callstack

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-`
4	Native Performance	HIGH	`native-*`
5	Memory Management	MEDIUM-HIGH	`js-`, `native-`
6	Animations	MEDIUM	`js-*`

Impact labels are triage hints: CRITICAL first, HIGH next, MEDIUM when evidence points there.

Quick Reference

Optimization Workflow

Follow this cycle for any performance issue: Measure → Optimize → Re-measure → Validate

Measure: Capture baseline metrics before changes. For runtime issues, prefer commit timeline, re-render counts, slow components, heaviest-commit breakdown, and startup/TTI when available. Component tree depth or count are optional context, not substitutes. Do not recommend memoization, atomic state, or compiler changes without a measured render or FPS problem.
Optimize: Apply the targeted fix from the relevant reference
Re-measure: Run the same measurement to get updated metrics
Validate: Confirm improvement (e.g., FPS 45→60, TTI 3.2s→1.8s, bundle 2.1MB→1.6MB)

If metrics did not improve, revert and try the next suggested fix.

Review Guardrails

Check library versions before suggesting API-specific fixes. Example: FlashList v2 deprecates estimatedItemSize, so do not flag it as missing there.
Do not suggest useMemo or useCallback dependency changes unless behavior is demonstrably incorrect or profiling shows wasted work tied to that value.
Do not report stale closures speculatively. Show the stale read path, a repro, or profiler evidence before calling it out.
When profiling a flow, measure the target interaction itself. Do not treat component tree depth or component count as the main performance evidence.

Critical: FPS & Re-renders

Profile first:

agent-device react-devtools status
agent-device react-devtools wait --connected
agent-device react-devtools profile start
agent-device react-devtools profile stop
agent-device react-devtools profile slow --limit 5
agent-device react-devtools profile rerenders --limit 5
agent-device react-devtools profile timeline --limit 20

Drive the target interaction with normal agent-device commands between profile start and profile stop.

Manual fallback when agent-device is unavailable: open React Native DevTools from Metro (j) or the Dev Menu, use the Profiler tab, and record the same interaction.

For release-build React component profiling, connect @callstack/inspector first so React DevTools can attach to the release app, then run the agent-device react-devtools flow above.

Common fixes:

Replace ScrollView with FlatList/FlashList/Legend List for long lists
After profiling shows cascading re-renders, use React Compiler for automatic memoization
After profiling shows broad store/context updates, use atomic state (Jotai/Zustand) to reduce re-renders
Use useDeferredValue for expensive computations

Critical: Bundle Size

Analyze bundle:

npx react-native bundle \
  --entry-file index.js \
  --bundle-output output.js \
  --platform ios \
  --sourcemap-output output.js.map \
  --dev false --minify true

npx source-map-explorer output.js --no-border-checks

Verify improvement after optimization:

# Record baseline size before changes
ls -lh output.js  # e.g., Before: 2.1 MB

# After applying fixes, re-bundle and compare
npx react-native bundle --entry-file index.js --bundle-output output.js \
  --platform ios --dev false --minify true
ls -lh output.js  # e.g., After: 1.6 MB  (24% reduction)

Common fixes:

Avoid barrel imports (import directly from source)
Remove unnecessary Intl polyfills only after checking Hermes API and method coverage
Evaluate tree shaking (Expo SDK 52+ experimental unused import/export removal, or Re.Pack only if already configured)
Enable R8 for Android native code shrinking

High: TTI Optimization

Measure TTI:

Use react-native-performance for markers
Only measure cold starts (exclude warm/hot/prewarm)

Common fixes:

For React Native 0.78 and earlier, disable Android JS bundle compression to enable Hermes mmap
Use native navigation (react-native-screens)
Preload commonly-used expensive screens before navigating to them

High: Native Performance

Profile native:

iOS: Xcode Instruments → Time Profiler
Android: Android Studio → CPU Profiler

Common fixes:

Use background threads for heavy native work
Prefer async over sync Turbo Module methods
Use C++ for cross-platform performance-critical code

References

Full documentation with code examples in references/:

JavaScript/React (`js-*`)

File	Impact	Description
js-lists-flatlist-flashlist.md	CRITICAL	Replace ScrollView with virtualized lists
js-profile-react.md	MEDIUM	`agent-device react-devtools` profiling
js-measure-fps.md	HIGH	FPS monitoring and measurement
js-memory-leaks.md	MEDIUM	JS memory leak hunting
js-atomic-state.md	HIGH	Jotai/Zustand patterns
js-concurrent-react.md	HIGH	useDeferredValue, useTransition
js-react-compiler.md	HIGH	Automatic memoization
js-animations-reanimated.md	MEDIUM	Reanimated worklets
js-bottomsheet.md	HIGH	Bottom sheet optimization
js-uncontrolled-components.md	HIGH	TextInput optimization

Native (`native-*`)

File	Impact	Description
native-turbo-modules.md	HIGH	Building fast native modules
native-sdks-over-polyfills.md	HIGH	Native vs JS libraries
native-measure-tti.md	HIGH	TTI measurement setup
native-threading-model.md	HIGH	Turbo Module threads
native-profiling.md	MEDIUM	Xcode/Android Studio profiling
native-platform-setup.md	MEDIUM	iOS/Android tooling guide
native-view-flattening.md	MEDIUM	View hierarchy debugging
native-memory-patterns.md	MEDIUM	C++/Swift/Kotlin memory
native-memory-leaks.md	MEDIUM	Native memory leak hunting
native-android-16kb-alignment.md	CRITICAL	Third-party library alignment for Google Play

Bundling (`bundle-*`)

File	Impact	Description
bundle-barrel-exports.md	CRITICAL	Avoid barrel imports
bundle-analyze-js.md	CRITICAL	JS bundle visualization
bundle-tree-shaking.md	HIGH	Dead code elimination
bundle-analyze-app.md	HIGH	App size analysis
bundle-r8-android.md	HIGH	Android code shrinking
bundle-hermes-mmap.md	HIGH	Disable bundle compression
bundle-native-assets.md	HIGH	Asset catalog setup
bundle-library-size.md	MEDIUM	Evaluate dependencies
bundle-code-splitting.md	MEDIUM	Remote chunk loading safeguards

Problem → Skill Mapping

Problem	Start With
App feels slow/janky	js-measure-fps.md → js-profile-react.md
Too many re-renders	js-profile-react.md → js-react-compiler.md
Slow startup (TTI)	native-measure-tti.md → bundle-analyze-js.md
Large app size	bundle-analyze-app.md → bundle-r8-android.md
Memory growing	js-memory-leaks.md or native-memory-leaks.md
Animation drops frames	js-animations-reanimated.md
Bottom sheet jank/re-renders	js-bottomsheet.md → js-animations-reanimated.md
List scroll jank	js-lists-flatlist-flashlist.md
TextInput lag	js-uncontrolled-components.md
Native module slow	native-turbo-modules.md → native-threading-model.md
Native library alignment issue	native-android-16kb-alignment.md

Attribution

Based on "The Ultimate Guide to React Native Optimization" by Callstack.

Files

ATTRIBUTION.mdAdded by AutoGineer873 B
LICENSELicence file added by AutoGineer1.1 KiB
POWER.md8.1 KiB
SKILL.md12.1 KiB
agents/openai.yaml227 B
references/bundle-analyze-app.md5.3 KiB
references/bundle-analyze-js.md6.9 KiB
references/bundle-barrel-exports.md5.3 KiB
references/bundle-code-splitting.md7.4 KiB
references/bundle-hermes-mmap.md4.0 KiB
references/bundle-library-size.md4.1 KiB
references/bundle-native-assets.md4.9 KiB
references/bundle-r8-android.md5.2 KiB
references/bundle-tree-shaking.md5.6 KiB
references/images/bundle-treemap-source-map-explorer.png651.8 KiB
references/images/controlled-textinput-pingpong.png124.2 KiB
references/images/devtools-flamegraph.png508.5 KiB
references/images/emerge-xray-ios.png429.4 KiB
references/images/expo-atlas-treemap.png604.4 KiB
references/images/flashlight-flatlist-vs-flashlist.png305.9 KiB
references/images/fps-drop-graph.png148.9 KiB
references/images/memory-heap-snapshot.png300.8 KiB
references/images/tti-warm-start-diagram.png124.3 KiB
references/images/view-hierarchy-flattening.png(opens on GitHub)Not mirrored: opens on GitHub2.5 MiB
references/images/xcode-instruments-templates.png398.8 KiB
references/images/xcode-thread-view.png174.3 KiB
references/js-animations-reanimated.md7.8 KiB
references/js-atomic-state.md5.1 KiB
references/js-bottomsheet.md11.9 KiB
references/js-concurrent-react.md6.5 KiB
references/js-lists-flatlist-flashlist.md5.9 KiB
references/js-measure-fps.md5.2 KiB
references/js-memory-leaks.md5.2 KiB
references/js-profile-react.md5.7 KiB
references/js-react-compiler.md7.2 KiB
references/js-uncontrolled-components.md5.4 KiB
references/native-android-16kb-alignment.md3.7 KiB
references/native-measure-tti.md6.4 KiB
references/native-memory-leaks.md5.5 KiB
references/native-memory-patterns.md5.8 KiB
references/native-platform-setup.md3.7 KiB
references/native-profiling.md4.3 KiB
references/native-sdks-over-polyfills.md6.1 KiB
references/native-threading-model.md6.7 KiB
references/native-turbo-modules.md5.5 KiB
references/native-view-flattening.md5.1 KiB

references/js-animations-reanimated.md

title: High-Performance Animations impact: MEDIUM tags: reanimated, animations, worklets, ui-thread

Skill: High-Performance Animations

Use React Native Reanimated for smooth 60+ FPS animations.

Quick Pattern

Incorrect (JS thread - blocks on heavy work):

const opacity = useRef(new Animated.Value(0)).current;
Animated.timing(opacity, { toValue: 1 }).start();

Correct (UI thread - smooth even during JS work):

const opacity = useSharedValue(0);
const style = useAnimatedStyle(() => ({ opacity: opacity.value }));
opacity.value = withTiming(1);

When to Use

Animations drop frames or feel janky
UI freezes during animations
Need gesture-driven animations
Want animations to run during heavy JS work

Prerequisites

react-native-reanimated (v4+) and react-native-worklets installed

npm install react-native-reanimated react-native-worklets

Add to babel.config.js:

module.exports = {
  plugins: ['react-native-worklets/plugin'],  // Must be last
};

Note: Reanimated 4 requires React Native's New Architecture (Fabric + TurboModules). The Legacy Architecture is no longer supported. If upgrading from v3, see the migration notes at the end of this document.

Key Concepts

Main Thread vs JS Thread

Main/UI Thread: Handles native rendering (60+ FPS target)
JS Thread: Runs React and your JavaScript

Problem: Heavy JS work blocks animations running on JS thread.

Solution: Run animations on UI thread with Reanimated worklets.

Step-by-Step Instructions

1. Basic Animated Style (UI Thread)

import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming
} from 'react-native-reanimated';

const FadeInView = () => {
  const opacity = useSharedValue(0);

  // This runs on UI thread - won't be blocked by JS
  const animatedStyle = useAnimatedStyle(() => {
    return { opacity: opacity.value };
  });

  useEffect(() => {
    opacity.value = withTiming(1, { duration: 500 });
  }, []);

  return <Animated.View style={[styles.box, animatedStyle]} />;
};

2. Run Code on UI Thread with `scheduleOnUI`

import { scheduleOnUI } from 'react-native-worklets';

const triggerAnimation = () => {
  scheduleOnUI(() => {
    'worklet';
    console.log('Running on UI thread');
    // Direct UI manipulations here
  });
};

3. Call JS from UI Thread with `scheduleOnRN`

import { scheduleOnRN } from 'react-native-worklets';
import { Pressable } from 'react-native';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';

// Regular JS function
const trackAnalytics = (value) => {
  analytics.track('animation_complete', { value });
};

const AnimatedComponent = () => {
  const progress = useSharedValue(0);

  const handlePress = () => {
    progress.value = withTiming(1, { duration: 200 }, (finished) => {
      if (finished) {
        scheduleOnRN(trackAnalytics, 1);
      }
    });
  };

  const animatedStyle = useAnimatedStyle(() => {
    return { opacity: progress.value };
  });

  return (
    <Pressable onPress={handlePress}>
      <Animated.View style={animatedStyle} />
    </Pressable>
  );
};

Avoid calling scheduleOnRN from useAnimatedStyle; style worklets can evaluate more often than an analytics or state callback should run. Prefer animation completion callbacks or useAnimatedReaction.

4. Animation with Callback

import { scheduleOnRN } from 'react-native-worklets';

const AnimatedButton = () => {
  const scale = useSharedValue(1);

  const onComplete = () => {
    console.log('Animation finished!');
  };

  const handlePress = () => {
    scale.value = withTiming(
      1.2,
      { duration: 200 },
      (finished) => {
        if (finished) {
          scheduleOnRN(onComplete);
        }
      }
    );
  };

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));

  return (
    <Pressable onPress={handlePress}>
      <Animated.View style={[styles.button, animatedStyle]}>
        <Text>Press Me</Text>
      </Animated.View>
    </Pressable>
  );
};

When to Use What

Thread	Best For
UI Thread (worklets)	Visual animations, transforms, gestures
JS Thread	State updates, data processing, API calls

Hook/API	Use Case
`useAnimatedStyle`	Animated styles (auto UI thread)
`scheduleOnUI`	Manual UI thread execution (from `react-native-worklets`)
`scheduleOnRN`	Call JS functions from worklets (from `react-native-worklets`)
`useTransition`	Alternative for React state-driven delays

For React Native Web targets, CSS transitions can be appropriate for simple state-driven style changes. In native apps, keep shared values/worklets for gesture-driven, scroll-driven, layout-sensitive, or orchestrated animations.

Common Pitfalls

Accessing React state in worklets: Use useSharedValue instead of useState for animated values
Not using Animated components: Must use Animated.View, Animated.Text, etc.
Heavy computation in useAnimatedStyle: Keep worklets fast
Forgetting 'worklet' directive: Required for inline worklet functions

// BAD: Regular function in useAnimatedStyle
const style = useAnimatedStyle(() => {
  heavyComputation();  // Blocks UI thread!
  return { opacity: 1 };
});

// GOOD: Keep worklets fast
const style = useAnimatedStyle(() => {
  return { opacity: opacity.value };  // Just read value
});

Migrating from Reanimated 3.x to 4.x

If you're upgrading from Reanimated 3.x, here are the key changes.

Can't upgrade to v4? If your project is blocked from migrating to New Architecture (e.g., incompatible native libraries, complex native code, or timeline constraints), keep using existing APIs and leverage native drivers where applicable. Avoid introducing legacy Reanimated 3.x or older to reduce future migration complexity.

Breaking Changes

Old API (v3)	New API (v4)	Package
`runOnUI(() => {...})()`	`scheduleOnUI(() => {...})`	`react-native-worklets`
`runOnJS(fn)(args)`	`scheduleOnRN(fn, args)`	`react-native-worklets`
`executeOnUIRuntimeSync`	`runOnUISync`	`react-native-worklets`
`runOnRuntime`	`scheduleOnRuntime`	`react-native-worklets`
`useScrollViewOffset`	`useScrollOffset`	`react-native-reanimated`
`useWorkletCallback`	Use `useCallback` with `'worklet';` directive	React

Removed APIs

useAnimatedGestureHandler - Migrate to the Gesture API from react-native-gesture-handler v2+
addWhitelistedNativeProps / addWhitelistedUIProps - No longer needed
combineTransition - Use EntryExitTransition.entering(...).exiting(...) instead

withSpring Changes

// Before (v3)
withSpring(value, {
  restDisplacementThreshold: 0.01,
  restSpeedThreshold: 0.01,
  duration: 300,
});

// After (v4)
withSpring(value, {
  energyThreshold: 0.01,  // Replaces both threshold parameters
  duration: 200,          // Duration is now "perceptual" (~1.5x actual time)
});

Migration Checklist

Enable New Architecture - Reanimated 4 only supports Fabric + TurboModules
Install react-native-worklets - Required new dependency
Update Babel plugin - Change 'react-native-reanimated/plugin' to 'react-native-worklets/plugin'
Update imports - Move worklet functions to react-native-worklets
Update API calls - New functions take callback + args directly (not curried)
Rebuild native apps - Required after adding react-native-worklets

js-measure-fps.md - Verify animation frame rate
js-bottomsheet.md - Keep bottom sheet visual state on the UI thread
js-concurrent-react.md - React-level deferral with useTransition

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs Node.js

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Published by

Callstack

Publisher

Callstack (Official)

Source

callstackincubator/agent-skills · skills/react-native-best-practices · commit 59e9d17

Licence

MIT License (redistribution allowed)

LICENSE (added by AutoGineer from LICENSE)
ATTRIBUTION.md (written by AutoGineer)

Synced

2026-11-09

AutoGineer is not affiliated with or endorsed by Callstack or Callstack.

Get it from the source

1 of this skill’s files are not mirrored here, so there is no ZIP. Get the complete skill from its source: callstackincubator/agent-skills

From the author

AutoGineer summary

What it does

When to use it

Advantages

Usage examples

Install

Documentation by Callstack

React Native Best Practices

Overview

When to Apply

Security Notes

Priority-Ordered Guidelines

Quick Reference

Optimization Workflow

Review Guardrails

Critical: FPS & Re-renders

Critical: Bundle Size

High: TTI Optimization

High: Native Performance

References

JavaScript/React (js-*)

Native (native-*)

Bundling (bundle-*)

Problem → Skill Mapping

Attribution

Files

references/js-animations-reanimated.md

title: High-Performance Animations impact: MEDIUM tags: reanimated, animations, worklets, ui-thread

Skill: High-Performance Animations

Quick Pattern

When to Use

Prerequisites

Key Concepts

Main Thread vs JS Thread

Step-by-Step Instructions

1. Basic Animated Style (UI Thread)

2. Run Code on UI Thread with scheduleOnUI

3. Call JS from UI Thread with scheduleOnRN

4. Animation with Callback

When to Use What

Common Pitfalls

Migrating from Reanimated 3.x to 4.x

Breaking Changes

Removed APIs

withSpring Changes

Migration Checklist

Related Skills

Requirements and compatibility

Security

Attribution and licence

Related skills

Diagnosing Bugs

Systematic Debugging

Performance Optimization

Debugging And Error Recovery

Animation Performance

Parallel Debugging

Get it from the source

JavaScript/React (`js-*`)

Native (`native-*`)

Bundling (`bundle-*`)

2. Run Code on UI Thread with `scheduleOnUI`

3. Call JS from UI Thread with `scheduleOnRN`