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.

<ScrollView>

<FlatList>

<FlashList>

keyExtractor

keyExtractor={(item) => item.id}

React.memo

renderItem={({ item }) => <Row onPress={() => nav(item.id)} />}

const handlePress = useCallback(...)

getItemLayout

(data, index) => ({ length: 80, offset: 80 * index, index })

@shopify/flash-list

expo-image

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.

Animated

react-native-reanimated

LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)

react-native-reanimated

expo-router

react-native-gesture-handler

reanimated

onLayout

useAnimatedStyle

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)

app/

_layout.tsx

unmountOnBlur: true

Linking

useIsFocused()

useFocusEffect(useCallback(...))

onStateChange

initialState

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)

<SafeAreaView>

useSafeAreaInsets()

react-native-safe-area-context

<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>

Platform.select({ ios: ..., android: ... })

.ios.tsx

.android.tsx

<StatusBar style="auto" />

expo-status-bar

hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}

expo-haptics

Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)

5. Images and Media (MEDIUM)

<Image>

expo-image

width

height

aspectRatio

expo-image

react-native-svg

react-native-svg-transformer

expo-av

expo-video

6. State and Data (MEDIUM)

react-native-mmkv

persistQueryClient

set(produce(state => { state.user.name = 'new' }))

7. Expo Workflow (MEDIUM)

npx expo run:ios

eas build --profile development

npx expo start

eas build --platform ios --profile production

eas update --branch production --message "Fix bug"

app.config.ts

expo-build-properties

eas.json

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)

@testing-library/react-native

detox

maestro test flow.yaml

Common Gotchas

npx expo start --clear

cd ios && pod install --repo-update

import 'react-native-reanimated'

npx expo install --fix

gradle.properties

org.gradle.jvmargs=-Xmx4g