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.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

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

Deep links work automatically. Universal links with app.json scheme config.

Typed Routes (Expo Router v4+)

// app/product/[id].tsx
import { useLocalSearchParams } from 'expo-router'

export default function ProductScreen() {
  const { id } = useLocalSearchParams<{ id: string }>()
  // id is typed as string
}

React Navigation v7

type RootStackParamList = {
  Home: undefined
  ProductDetail: { id: string }
  Cart: undefined
}

const Stack = createNativeStackNavigator<RootStackParamList>()

export function RootNavigator() {
  return (
    <NavigationContainer
      linking={{
        prefixes: ['myapp://', 'https://myapp.com'],
        config: {
          screens: {
            Home: '',
            ProductDetail: 'product/:id',
            Cart: 'cart',
          },
        },
      }}>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="ProductDetail" component={ProductDetailScreen} />
        <Stack.Screen name="Cart" component={CartScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

State Management

Zustand (preferred for most apps)

import { create } from 'zustand'
import { persist, createJSONStorage } from 'zustand/middleware'
import AsyncStorage from '@react-native-async-storage/async-storage'

interface CartStore {
  items: CartItem[]
  total: number
  addItem: (item: Product) => void
  removeItem: (id: string) => void
  clear: () => void
}

export const useCartStore = create<CartStore>()(
  persist(
    (set, get) => ({
      items: [],
      total: 0,
      addItem: (product) => set((state) => ({
        items: [...state.items, { ...product, quantity: 1 }],
        total: state.total + product.price,
      })),
      removeItem: (id) => set((state) => ({
        items: state.items.filter((i) => i.id !== id),
        total: state.items.filter((i) => i.id !== id).reduce((s, i) => s + i.price, 0),
      })),
      clear: () => set({ items: [], total: 0 }),
    }),
    { name: 'cart-storage', storage: createJSONStorage(() => AsyncStorage) }
  )
)

Performance Rules

FlashList (preferred over FlatList)

import { FlashList } from '@shopify/flash-list'

<FlashList
  data={items}
  renderItem={renderItem}
  keyExtractor={(item) => item.id}
  estimatedItemSize={120}
/>

New Architecture

Enabled by default in Expo SDK 53+.

Ensure compatibility:

// app.json
{
  "expo": {
    "platforms": ["ios", "android"]
  }
}

Reanimated 4

import { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated'

export function AnimatedCard() {
  const scale = useSharedValue(1)

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }))

  return (
    <Animated.View
      style={animatedStyle}
      => { scale.value = withSpring(0.95) }}
      => { scale.value = withSpring(1) }}
    />
  )
}

Deep Linking

{
  "expo": {
    "scheme": "myapp",
    "plugins": [["expo-linking"]]
  }
}

Always implement a fallback for malformed links.

Push Notifications

import * as Notifications from 'expo-notifications'

const { status } = await Notifications.requestPermissionsAsync()
if (status !== 'granted') return

const token = await Notifications.getExpoPushTokenAsync()

Notifications.addNotificationResponseReceivedListener((response) => {
  const { screen, params } = response.notification.request.content.data
  router.push({ pathname: screen as any, params: params as any })
})

Deployment

eas build --platform all --profile production
eas submit --platform ios
eas submit --platform android

Error Handling

Production Checklist

• Hermes engine enabled
• FlashList (not FlatList) for all lists
• Images use expo-image with resize
• React.memo on list items and screens
• Navigation screens lazy-loaded
• Deep linking configured and tested
• Push notifications configured
• MMKV or AsyncStorage for persistence
• Error boundary wrapping root navigator
• Sentry or similar crash reporting
• EAS Build for CI/CD
• New Architecture verified (no TurboModule issues)
• App Store / Play Store screenshots and metadata
• InteractionManager.runAfterInteractions for heavy operations
• expo-constants env segregation (dev / staging / prod)

Anti-Patterns

Sources

• React Native Documentation (reactnative.dev)
• Expo Documentation (docs.expo.dev)
• Expo Router Documentation
• React Navigation v7 Documentation
• Shopify FlashList (shopify.github.io/flash-list)
• Reanimated 4 Documentation (docs.swmansion.com/react-native-reanimated)
• Hermes Engine Documentation
• EAS Build Documentation
• Zustand Documentation (github.com/pmndrs/zustand)
• TanStack Query Documentation (tanstack.com/query/latest)

Checklist

• Skill loads without errors in the AI agent
• YAML frontmatter is valid (description, compatibility, audience)
• Workflow section provides clear step-by-step instructions
• Error handling section covers common failure modes
• All referenced files (references/, scripts/, assets/) exist
• Skill triggers correctly for intended use cases
• No broken links or missing resources