react-native-best-practices

Category: Content & Multimedia | Uploader: software-mansion-labs | Downloads: 0 | Version: v1.0（Latest）

Software Mansion's best practices for production React Native apps on the New Architecture. Use when writing, reviewing, or debugging React Native code across animations, gestures, SVG, haptics, on-device AI, multimedia, rich text, multithreading, or audio. Trigger on any React Native implementation question or when a more specific sub-skill below matches the task.

Changelog: Source: GitHub https://github.com/software-mansion-labs/skills

Directory Structure

Current level: skills/react-native-best-practices/

📁 references/
- 📁 animations/
  - 📄 animations-performance.md 3.1 KB
  - 📄 animations.md 6.2 KB
  - 📄 SKILL.md 1.2 KB
- 📁 audio/
  - 📄 SKILL.md 4.8 KB
- 📁 gestures/
  - 📄 gesture-composition.md 1.5 KB
  - 📄 reanimated-patterns.md 1.4 KB
  - 📄 SKILL.md 2.0 KB
  - 📄 tap-handling.md 2.4 KB
- 📁 haptics/
  - 📄 SKILL.md 591 B
- 📁 multimedia/
  - 📄 SKILL.md 453 B
- 📁 multithreading/
  - 📄 SKILL.md 675 B
- 📁 on-device-ai/
  - 📁 references/
    
    📄 core-utilities.md 9.6 KB
    
    📄 reference-audio.md 9.7 KB
    
    📄 reference-cv-2.md 6.7 KB
    
    📄 reference-cv.md 7.4 KB
    
    📄 reference-llms.md 6.6 KB
    
    📄 reference-models.md 12.3 KB
    
    📄 reference-nlp.md 6.1 KB
    
    📄 reference-ocr.md 5.7 KB
  - 📄 SKILL.md 22.7 KB
- 📁 radon-mcp/
  - 📁 references/
    
    📄 get-library-description.md 1.4 KB
    
    📄 query-documentation.md 1.7 KB
    
    📄 reload-application.md 2.0 KB
    
    📄 view-application-logs.md 2.1 KB
    
    📄 view-component-tree.md 1.9 KB
    
    📄 view-network-logs.md 1.8 KB
    
    📄 view-network-request-details.md 1.7 KB
    
    📄 view-screenshot.md 1.2 KB
  - 📄 SKILL.md 2.6 KB
- 📁 rich-text/
  - 📄 SKILL.md 2.3 KB
- 📁 svg/
  - 📄 animation-patterns.md 2.0 KB
  - 📄 SKILL.md 835 B
  - 📄 svg.md 852 B
  - 📄 when-to-use.md 896 B
📄 README.md 5.2 KB
📄 SKILL.md 2.0 KB

SKILL.md

---
name: react-native-best-practices
description: "Software Mansion's best practices for production React Native apps on the New Architecture. Use when writing, reviewing, or debugging React Native code across animations, gestures, SVG, haptics, on-device AI, multimedia, rich text, multithreading, or audio. Trigger on any React Native implementation question or when a more specific sub-skill below matches the task."
version: 1.0.0
metadata:
  author: Software Mansion
  license: MIT
---

# 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-skill | When to use |
|-----------|------------|
| `references/animations/SKILL.md` | CSS transitions, CSS animations, shared value animations, layout animations, animation performance, 120fps, Reanimated 4 |
| `references/gestures/SKILL.md` | Tap, pan, pinch, swipe, long press, drag — any touch interaction with Gesture Handler |
| `references/svg/SKILL.md` | Vector graphics, icons, charts, illustrations using React Native SVG |
| `references/haptics/SKILL.md` | Tactile feedback, vibration patterns, impact/notification haptics |
| `references/on-device-ai/SKILL.md` | On-device AI: LLMs, computer vision, OCR, audio processing, text/image embeddings |
| `references/multimedia/SKILL.md` | Video playback and streaming |
| `references/rich-text/SKILL.md` | Rich text editor, formatted text input, WYSIWYG, mentions, react-native-enriched |
| `references/multithreading/SKILL.md` | Background processing, Worklets, offloading computation from the JS thread |
| `references/audio/SKILL.md` | Audio playback, recording, music players, audio sessions |
| `references/radon-mcp/SKILL.md` | Radon IDE MCP tools - extensive React native app debugging, inspecting, building. This tool allows viewing screenshots, reading logs, inspecting the component tree, debugging network requests, reloading the app, querying RN/Expo docs |

Comments 0

Latest | Hot

Please login before commenting.

No comments yet. Be the first one!

react-native-best-practices

Directory Structure

SKILL.md

Report

Notice