react-native

name	react-native
description	Build production React Native apps with Expo SDK 53+, Expo Router (file-based navigation), New Architecture (Fabric + TurboModules), FlashList, Reanimated 4, Zustand for state, Hermes, EAS Build, and App Store/Play Store deployment.
triggers	["create a React Native app","set up navigation","optimize list performance","handle deep links","configure push notifications","deploy to stores","Expo Router","FlashList","Reanimated","Zustand","React Navigation","EAS Build","react native","expo","mobile app","iOS","Android","react-navigation","expo router","native module"]
negatives	["Flutter","web-only React","PWA","mobile web","Ionic","Cordova","Capacitor","Xamarin"]
license	MIT
compatibility	opencode
metadata	{"workflow":"mobile","audience":"developers","version":"3.0"}
allowed-tools	["bash","edit","glob","grep","read","write","websearch","webfetch"]

React Native Architect

Build production React Native apps with Expo, New Architecture, and modern navigation.

Workflow

1. Scaffold — npx create-expo-app@latest MyApp --template blank-typescript, configure SDK 53+
2. Navigation — Choose between Expo Router (greenfield Expo) or React Navigation v7 (bare RN / brownfield). Set up layouts, typed routes, deep linking
3. State management — Zustand for local client state, TanStack Query for server state. Avoid Redux unless dealing with massive synchronous state trees
4. New Architecture — Ensure Fabric + TurboModules enabled (default in SDK 53+). Verify third-party lib compatibility
5. Lists — Replace all FlatLists with FlashList from Shopify. Configure estimatedItemSize. Optimize renderItem with React.memo
6. Animations — Reanimated 4 for gesture-driven animations. Use useSharedValue + useAnimatedStyle instead of Animated API
7. Images — expo-image with cached, resized variants. Never bare <Image> without dimensions
8. Notifications — expo-notifications for push. Handle foreground, background, tap-to-navigate
9. Performance — Enable Hermes, lazy-load tab screens, freeze inactive screens via react-native-screens, InteractionManager.runAfterInteractions for heavy ops
10. Ship — eas build --platform all --profile production, eas submit, configure CI/CD with GitHub Actions

Navigation Decision

Scenario	Recommended
Greenfield Expo app	Expo Router (file-based, typed routes, deep links)
Bare React Native	React Navigation v7 (imperative, full control)
Brownfield / native modules	React Navigation v7
Web + mobile	Expo Router (SSR, SEO)

Expo Router (file-based)

app/
├ _layout.tsx       # Root layout (tabs, stack)
├ index.tsx         # /
├ (tabs)/
│   ├ _layout.tsx   # Tab config
│   ├ feed.tsx      # /feed
│   └ profile.tsx   # /profile
├ product/
│   ├ [id].tsx      # /product/:id
│   └ review.tsx    # /product/:id/review
└ auth/
    ├ login.tsx     # /auth/login
    └ signup.tsx    # /auth/signup