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