# React Native

> React Native patterns — New Architecture (Fabric/TurboModules), Expo, navigation, performance

- Skill: `xoai/react-native` (Agent Skill, multi-file: 10 files)
- Install (CLI): `npx skillmds@latest add xoai/react-native`
- Raw SKILL.md: https://api.skillmd.com/api/skills/xoai/react-native/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: xoai (https://skillmd.com/u/xoai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/xoai/react-native

---


# react-native

**Layer 2 — Framework Pack**

React Native patterns for the New Architecture era (0.76+). Fabric, TurboModules,
Expo, navigation, and the mistakes agents make from old Bridge-era training data.

## Philosophy

React Native underwent a fundamental architectural shift. The old Bridge
(async JSON serialization between JS and native) is replaced by JSI (direct
synchronous C++ references). Fabric replaces the old UI Manager. TurboModules
replace legacy Native Modules. Starting from RN 0.82, the New Architecture
is always-on and can't be disabled.

LLMs trained on 2018-2023 content produce Bridge-era patterns: old lifecycle
methods, legacy navigation libraries, manual native module boilerplate. This
pack establishes New Architecture as the baseline and corrects stale patterns.

## What's Included

| Type | Files | Coverage |
|------|-------|----------|
| Patterns | 7 | New Architecture, Expo workflow, navigation, state management, native modules, lists, styling |
| Anti-patterns | 5 | Bridge-era patterns, wrong navigation library, blocking JS thread, inline styles everywhere, unnecessary native modules |
| Constitution | 1 | 5 React Native-specific principles |
| Gate | 1 | RN pattern compliance check |

## Stack Integrations (detection-gated)

When `expo` is detected, read `integration/expo-integration.md` for the Expo +
React Navigation + Zustand + MMKV + TanStack Query seams — navigation guards,
store hydration, offline cache, and Expo Router auth flows — that the individual
docs don't cover together. This folds in the former `stack-react-native-expo`
skill; the content is unchanged.
Constitution: `constitution/expo.constitution-additions.md` ·
anti-patterns: `anti-patterns/expo-anti-patterns.md`.