software-mansion-labs/skills

react-native-best-practices

Software Mansion's best practices for production React Native and Expo apps on the New Architecture.

Ver código fuente
Documento original del Skill

Contenido del repositorio de origen con títulos, ejemplos, código, tablas, enlaces e imágenes preservados.

React Native Best Practices

Software Mansion's production patterns for React Native apps on the New Architecture.

Read the relevant sub-skill for the topic at hand. All sub-skills are in references/.

Sub-skills

Sub-skillWhen to use
references/animations/SKILL.mdCSS transitions, CSS animations, shared value animations, GPU shader animations (WebGPU, TypeGPU), layout animations (entering/exiting, transitions, keyframes), scroll-driven animations, animation functions (withSpring, withTiming, withDecay), core hooks (useSharedValue, useAnimatedStyle), interpolation, particle systems, procedural noise, SDF rendering, animation performance, 120fps, accessibility, Reanimated 4
references/gestures/SKILL.mdTap, pan, pinch, rotation, swipe, long press, fling, hover, drag, Pressable, RectButton, Swipeable, DrawerLayout, VirtualGestureDetector, gesture composition, gesture testing -- any touch interaction with Gesture Handler
references/svg/SKILL.mdVector graphics, icons, charts, illustrations using React Native SVG
references/on-device-ai/SKILL.mdOn-device AI: LLMs (chat, tool calling, structured output, vision-language models), computer vision (classification, object detection, OCR, semantic/instance segmentation, style transfer, embeddings, text-to-image), speech processing (STT with timestamps, TTS with phonemes, VAD), VisionCamera real-time frame processing, model loading, resource management, custom models with ExecuTorch
references/rich-text/SKILL.mdRich text editor, formatted text input, WYSIWYG, mentions, HTML/Markdown rendering, react-native-enriched-html (formerly react-native-enriched), react-native-enriched-markdown
references/multithreading/SKILL.mdMultithreading, react-native-worklets, background processing, Worker Runtimes, UI thread, scheduleOnUI, scheduleOnRN, Serializable, Synchronizable, offloading computation from the JS thread
references/enable-worklets-bundle-mode/SKILL.mdEnabling react-native-worklets Bundle Mode (imports inside worklets, third-party npm libraries on worklet runtimes) in an Expo, RN CLI, or brownfield app: babel bundleMode plugin option, bundleModeMetroConfig / getBundleModeMetroConfig, mandatory metro and metro-runtime patches per package manager, "Failed to get the SHA-1" errors, missing Fast Refresh for worklet code, uniwind/NativeWind resolver conflicts
references/audio/SKILL.mdAudio playback (buffer sources, oscillators, streaming, queued playback), recording (file, data callback, graph processing), audio effects (gain, filters, delay, convolver, panner, waveshaper), real-time analysis and visualization, audio worklets (custom processing, synthesis), system integration (sessions, interruptions, notifications, permissions), testing with mocks -- any audio feature with react-native-audio-api
references/jsi/SKILL.mdJSI, C++ native modules, jsi::Runtime, jsi::Value, jsi::Object, jsi::Function, jsi::HostObject, jsi::HostFunction, jsi::NativeState, jsi::PropNameID, jsi::ArrayBuffer, jsi::WeakObject, jsi::Scope, jsi::BigInt, JSIException, JSError, JSINativeException, calling JS from C++, calling C++ from JS, HostObject destructor constraints, shared_ptr<jsi::Value>, CallInvoker, invokeAsync, JSI threading safety, zero-copy ArrayBuffer, rt.global(), ISerialization, WithRuntimeDecorator, jsi.h