react-native-skills

name	React Native Skills
description	BUILD performant React Native and Expo mobile apps. Mandatory patterns: FlashList for lists (never FlatList), expo-image for images (never RN Image), Pressable for touch (never TouchableOpacity), StyleSheet.create (never inline styles), native stack navigator (never JS). Expo SDK 56, React Native 0.85, New Architecture mandatory (Bridge removed in RN 0.82). Trigger: building RN components, optimizing list performance, implementing animations, working with native modules.
license	MIT
metadata	{"author":"vercel","version":"2.0.0","last_updated":"2026-06-28T00:00:00.000Z"}
stacks	["Expo SDK 56","React Native 0.85","React 19.2","React Navigation v7","React Native Reanimated v4","TypeScript 6.0"]
related_skills	["empty-loading-error-states","component-architecture-patterns","performance-budgets-and-cwv","accessibility-audit-protocol","react-best-practices"]
category	react
version	2.0.0

React Native Skills: Best Practices

IDENTIFY: When to Activate

Activate when:

• Building React Native or Expo applications
• Optimizing list and scroll performance
• Implementing animations with Reanimated
• Working with images and media
• Configuring native modules or fonts
• Structuring monorepo projects with native dependencies

2026 CONTEXT: New Architecture Mandatory

React Native 0.82+ removed the legacy Bridge architecture. All development MUST use the New Architecture (Fabric + TurboModules + JSI):

IMPACT:
- ~60x faster native calls (JSI replaces JSON bridge serialization)
- React Compiler auto-memoization (no manual useMemo/useCallback)
- Expo SDK 56 targets RN 0.85
- Android 16 mandates edge-to-edge rendering (SafeAreaView deprecated)

PRIORITY MAP: Rule Categories by Impact

Priority	Category	Impact	When to Check
1	List Performance	CRITICAL	Any scrollable list
2	Animation	HIGH	Any animated element
3	Navigation	HIGH	Screen transitions
4	UI Patterns	HIGH	Every component
5	State Management	MEDIUM	Data fetching, forms
6	Rendering	MEDIUM	Conditional display
7	Monorepo	MEDIUM	Multi-package setup
8	Configuration	LOW	Fonts, imports

EXECUTE: Mandatory Rules by Priority

Priority 1: List Performance: ALWAYS FlashList

// ✅ ALWAYS use FlashList
import { FlashList } from '@shopify/flash-list';

<FlashList
  data={items}
  renderItem=
  =          // ,   
  = => item.id}
/>


 {  }  ;