React Native Patterns Skill

React Native Patterns

Performance and architecture patterns for React Native + Expo apps. Rules ranked by impact — fix CRITICAL before touching MEDIUM.

This is a starting point. The skill will grow as you build more mobile apps.

When to Apply

Building new React Native or Expo apps
Optimising list and scroll performance
Implementing animations
Reviewing mobile code for performance issues
Setting up a new Expo project

1. List Performance (CRITICAL)

Lists are the #1 performance issue in React Native. A janky scroll kills the entire app experience.

| Pattern | Problem | Fix | |---------|---------|-----| | ScrollView for data | <ScrollView> renders all items at once | Use <FlatList> or <FlashList> — virtualised, only renders visible items | | Missing keyExtractor | FlatList without keyExtractor → unnecessary re-renders | keyExtractor={(item) => item.id} — stable unique key per item | | Complex renderItem | Expensive component in renderItem re-renders on every scroll | Wrap in React.memo, extract to separate component | | Inline functions in renderItem | renderItem={({ item }) => <Row onPress={() => nav(item.id)} />} | Extract handler: const handlePress = useCallback(...) | | No getItemLayout | FlatList measures every item on scroll (expensive) | Provide getItemLayout for fixed-height items: (data, index) => ({ length: 80, offset: 80 * index, index }) | | FlashList | FlatList is good, FlashList is better for large lists | @shopify/flash-list — drop-in replacement, recycling architecture | | Large images in lists | Full-res images decoded on main thread | Use expo-image with placeholder + transition, specify dimensions |

FlatList Checklist

Every FlatList should have:

<FlatList
  data={items}
  keyExtractor={(item) => item.id}
  renderItem={renderItem}           // Memoised component
  getItemLayout={getItemLayout}     // If items are fixed height
  initialNumToRender={10}           // Don't render 100 items on mount
  maxToRenderPerBatch={10}          // Batch size for off-screen rendering
  windowSize={5}                    // How many screens to keep in memory
  removeClippedSubviews={true}      // Unmount off-screen items (Android)
/>

2. Animations (HIGH)

Native animations run on the UI thread. JS animations block the JS thread and cause jank.

| Pattern | Problem | Fix | |---------|---------|-----| | Animated API for complex animations | Animated runs on JS thread, blocks interactions | Use react-native-reanimated — runs on UI thread | | Layout animation | Item appears/disappears with no transition | LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) | | Shared element transitions | Navigate between screens, element teleports | react-native-reanimated shared transitions or expo-router shared elements | | Gesture + animation | Drag/swipe feels laggy | react-native-gesture-handler + reanimated worklets — all on UI thread | | Measuring layout | onLayout fires too late, causes flash | Use useAnimatedStyle with shared values for instant response |

Reanimated Basics

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

function AnimatedBox() {
  const offset = useSharedValue(0);
  const style = useAnimatedStyle(() => ({
    transform: [{ translateX: withSpring(offset.value) }],
  }));

  return (
    <GestureDetector gesture={panGesture}>
      <Animated.View style={[styles.box, style]} />
    </GestureDetector>
  );
}

3. Navigation (HIGH)

| Pattern | Problem | Fix | |---------|---------|-----| | Expo Router | File-based routing (like Next.js) for React Native | app/ directory with _layout.tsx files. Preferred for new Expo projects. | | Heavy screens on stack | Every screen stays mounted in the stack | Use unmountOnBlur: true for screens that don't need to persist | | Deep linking | App doesn't respond to URLs | Expo Router handles this automatically. For bare RN: Linking API config | | Tab badge updates | Badge count doesn't update when tab is focused | Use useIsFocused() or refetch on focus: useFocusEffect(useCallback(...)) | | Navigation state persistence | App loses position on background/kill | onStateChange + initialState with AsyncStorage |

Expo Router Structure

app/
├── _layout.tsx          # Root layout (tab navigator)
├── index.tsx            # Home tab
├── (tabs)/
│   ├── _layout.tsx      # Tab bar config
│   ├── home.tsx
│   ├── search.tsx
│   └── profile.tsx
├── [id].tsx             # Dynamic route
└── modal.tsx            # Modal route

4. UI Patterns (HIGH)

| Pattern | Problem | Fix | |---------|---------|-----| | Safe area | Content under notch or home indicator | <SafeAreaView> or useSafeAreaInsets() from react-native-safe-area-context | | Keyboard avoidance | Form fields hidden behind keyboard | <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'}> | | Platform-specific code | iOS and Android need different behaviour | Platform.select({ ios: ..., android: ... }) or .ios.tsx / .android.tsx files | | Status bar | Status bar overlaps content or wrong colour | <StatusBar style="auto" /> from expo-status-bar in root layout | | Touch targets | Buttons too small to tap | Minimum 44x44pt. Use hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }} | | Haptic feedback | Taps feel dead | expo-haptics — Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light) on important actions |

5. Images and Media (MEDIUM)

| Pattern | Problem | Fix | |---------|---------|-----| | Image component | <Image> from react-native is basic | Use expo-image — caching, placeholder, transition, blurhash | | Remote images without dimensions | Layout shift when image loads | Always specify width and height, or use aspectRatio | | Large images | OOM crashes on Android | Resize server-side or use expo-image which handles memory | | SVG | SVG support isn't native | react-native-svg + react-native-svg-transformer for SVG imports | | Video | Video playback | expo-av or expo-video (newer API) |

6. State and Data (MEDIUM)

| Pattern | Problem | Fix | |---------|---------|-----| | AsyncStorage for complex data | JSON parse/stringify on every read | Use MMKV (react-native-mmkv) — 30x faster than AsyncStorage | | Global state | Redux/MobX boilerplate for simple state | Zustand — minimal, works great with React Native | | Server state | Manual fetch + loading + error + cache | TanStack Query — same as web, works in React Native | | Offline first | App unusable without network | TanStack Query persistQueryClient + MMKV, or WatermelonDB for complex offline | | Deep state updates | Spread operator hell for nested objects | Immer via Zustand: set(produce(state => { state.user.name = 'new' })) |

7. Expo Workflow (MEDIUM)

| Pattern | When | How | |---------|------|-----| | Development build | Need native modules | npx expo run:ios or eas build --profile development | | Expo Go | Quick prototyping, no native modules | npx expo start — scan QR code | | EAS Build | CI/CD, app store builds | eas build --platform ios --profile production | | EAS Update | Hot fix without app store review | eas update --branch production --message "Fix bug" | | Config plugins | Modify native config without ejecting | app.config.ts with expo-build-properties or custom config plugin | | Environment variables | Different configs per build | eas.json build profiles + expo-constants |

New Project Setup

npx create-expo-app my-app --template tabs
cd my-app
npx expo install expo-image react-native-reanimated react-native-gesture-handler react-native-safe-area-context

8. Testing (LOW-MEDIUM)

| Tool | For | Setup | |------|-----|-------| | Jest | Unit tests, hook tests | Included with Expo by default | | React Native Testing Library | Component tests | @testing-library/react-native | | Detox | E2E tests on real devices/simulators | detox — Wix's testing framework | | Maestro | E2E with YAML flows | maestro test flow.yaml — simpler than Detox |

Common Gotchas

| Gotcha | Fix | |--------|-----| | Metro bundler cache | npx expo start --clear | | Pod install issues (iOS) | cd ios && pod install --repo-update | | Reanimated not working | Must be first import: import 'react-native-reanimated' in root | | Expo SDK upgrade | npx expo install --fix after updating SDK version | | Android build fails | Check gradle.properties for memory: org.gradle.jvmargs=-Xmx4g | | iOS simulator slow | Use physical device for performance testing — simulator doesn't reflect real perf |

Agent Skills: React Native Patterns

Install this agent skill to your local

Skill Files