react-native

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 |