Back to Skills

react-native-best-practices

Software Mansion's best practices for production React Native and Expo apps on the New Architecture. MUST USE before writing, reviewing, or debugging ANY code in a React Native or Expo project. If the working directory contains a package.json with react-native, expo, or expo-router as a dependency, this skill applies. Trigger on: any code task in a React Native/Expo project, 'React Native', 'Expo', 'New Architecture', 'Reanimated', 'Gesture Handler', 'react-native-svg', 'ExecuTorch', 'react-nati

227stars9forksUpdated 6/19/2026

Security Assessment

Medium Risk(60/100)

Detected risks:

Remote Code Execution([references/animations/canvas-animations.md] eval()
Secret Exposure([references/on-device-ai/setup.md] token =)
Security Score60/100

About react-native-best-practices

This skill provides Software Mansion's production-grade best practices for building React Native and Expo applications on the New Architecture. It automatically activates when working in any project that includes react-native, expo, or expo-router dependencies, ensuring that all code written, reviewed, or debugged follows modern patterns optimized for performance, maintainability, and native integration. The skill covers the complete React Native ecosystem including Fabric renderer, TurboModules, and advanced threading models.

The skill is organized into specialized sub-skills covering animations (Reanimated 4 with GPU shaders, WebGPU, and TypeGPU), gestures (React Native Gesture Handler), vector graphics (react-native-svg), on-device AI (ExecuTorch for LLMs and computer vision), rich text editing (react-native-enriched), multithreading (react-native-worklets), audio processing (react-native-audio-api), and JSI-based native modules. Each sub-skill provides targeted guidance for its domain, from basic UI interactions to advanced topics like worklet-based computation offloading, real-time frame processing, and custom C++ module development.

This skill is essential for developers building production React Native apps who need to implement complex features like 120fps animations, real-time gesture handling, on-device ML inference, multi-threaded audio processing, or custom native integrations. It serves mobile app developers, React Native library authors, and teams migrating to the New Architecture who require authoritative guidance on performance optimization, threading safety, and modern API usage patterns.

FAQ

When does this skill automatically activate?

The skill activates automatically in any directory containing a package.json file with react-native, expo, or expo-router as dependencies. It also triggers on specific keywords like 'Reanimated', 'Gesture Handler', 'Worklet', 'TurboModule', 'WebGPU', or questions about React Native threading, animations, and native modules.

Which React Native architecture does this skill target?

This skill focuses on the New Architecture, including Fabric renderer, TurboModules, and modern threading models. It covers Reanimated 4, react-native-worklets for multithreading, and JSI-based native module development.

How do I know which sub-skill to use for my task?

The skill includes a table mapping specific topics to sub-skills. For example, use the animations sub-skill for any work with shared values, interpolation, or GPU shaders; use the gestures sub-skill for touch interactions; use the on-device-ai sub-skill for LLMs or computer vision; and use the jsi sub-skill when building custom C++ native modules.

Does this skill cover both iOS and Android?

Yes, the skill covers cross-platform React Native development for both iOS and Android, including platform-specific considerations for threading, native modules, and system integration patterns like audio sessions and permissions.

What advanced topics does this skill cover?

Advanced topics include worklet-based multithreading, GPU shader programming with WebGPU and TypeGPU, on-device AI inference with ExecuTorch, JSI HostObjects and ArrayBuffer zero-copy patterns, real-time audio processing with worklets, and VisionCamera frame processing for computer vision tasks.

All Files

51 files
README.md9.2 KB
View
references/animations/animation-functions.md7.1 KB
View
references/audio/worklets.md7.5 KB
View
references/audio/effects-and-analysis.md10.7 KB
View
references/gestures/continuous-gestures.md8.8 KB
View
references/gestures/v2-to-v3-migration.md14.5 KB
View
references/multithreading/shared-memory.md6.1 KB
View
references/gestures/testing.md4.5 KB
View
references/multithreading/setup-and-advanced.md7.3 KB
View
references/audio/system-and-notifications.md11.6 KB
View
references/gestures/tap-handling.md7.4 KB
View
references/jsi/threading-safety.md4.8 KB
View
references/svg/when-to-use.md2.6 KB
View
references/jsi/overview.md11.6 KB
View
references/on-device-ai/vision.md10.5 KB
View
references/multithreading/threading-api.md7.6 KB
View
SKILL.md3.9 KB
View
references/animations/canvas-atlas.md2.4 KB
View
references/audio/SKILL.md3.9 KB
View
references/gestures/swipeable-and-drawer.md4.9 KB
View
references/jsi/SKILL.md3.5 KB
View
references/svg/svg.md5.2 KB
View
references/audio/playback.md9.5 KB
View
references/jsi/performance.md5.4 KB
View
references/rich-text/SKILL.md12.2 KB
View
references/animations/layout-animations.md5.6 KB
View
references/gestures/gestures.md10.3 KB
View
references/jsi/casting-and-serialization.md6.9 KB
View
references/animations/animations.md11.4 KB
View
references/animations/svg-animations.md2.2 KB
View
references/jsi/debugging-and-pitfalls.md13.7 KB
View
references/on-device-ai/SKILL.md9.1 KB
View
references/audio/recording.md7.4 KB
View
references/jsi/setup-and-templates.md14.5 KB
View
references/svg/SKILL.md1.0 KB
View
references/animations/gpu-animations.md10.9 KB
View
references/gestures/gesture-composition.md6.4 KB
View
references/jsi/calling-js-and-async.md7.0 KB
View
references/multithreading/SKILL.md4.3 KB
View
references/animations/canvas-animations.md14.3 KB
View
references/audio/audio.md6.0 KB
View
references/gestures/SKILL.md6.8 KB
View
references/jsi/module-approaches.md13.3 KB
View
references/on-device-ai/speech.md8.8 KB
View
references/animations/animations-performance.md5.8 KB
View
references/animations/SKILL.md3.7 KB
View
references/jsi/cpp-memory-patterns.md6.2 KB
View
references/on-device-ai/setup.md15.0 KB
View
references/animations/scroll-and-events.md6.0 KB
View
references/jsi/core-types.md9.4 KB
View
references/on-device-ai/llm.md7.9 KB
View

Install react-native-best-practices

Download and extract the skill files to your .claude/skills/ directory.

Quick Setup:

  1. Copy the skill folder to .claude/skills/
  2. Claude will automatically detect and use the skill