Expo React Native Patterns

Expo Router (File-Based Navigation)

app/
├── (tabs)/              # Tab navigator group
│   ├── _layout.tsx      # Tab bar configuration
│   ├── index.tsx        # Home tab
│   ├── challenges.tsx   # Challenges tab
│   └── profile.tsx      # Profile tab
├── challenge/
│   └── [id].tsx         # Dynamic route: /challenge/abc-123
├── modal.tsx            # Presented as modal (presentation: 'modal')
└── _layout.tsx          # Root layout (auth check, providers)

// Type-safe route params
import { useLocalSearchParams } from 'expo-router'
export default function ChallengeDetail() {
  const { id } = useLocalSearchParams<{ id: string }>()
  // id is typed as string
}

Performance Patterns

FlatList over ScrollView

// ❌ Renders ALL items at once (slow for >20 items)
<ScrollView>
  {items.map(item => <ItemCard key={item.id} item={item} />)}
</ScrollView>

// ✅ Virtualizes — only renders visible items
<FlatList
  data={items}
  keyExtractor={item => item.id}
  renderItem={({ item }) => <ItemCard item={item} />}
  getItemLayout={(_, index) => ({ length: 80, offset: 80 * index, index })}
  // getItemLayout enables instant scroll-to-index
/>

expo-image over Image

// ❌ No caching, no blurhash, no transitions
import { Image } from 'react-native'
<Image source={{ uri: avatarUrl }} style={{ width: 48, height: 48 }} />

// ✅ Built-in caching, blurhash placeholder, smooth transitions
import { Image } from 'expo-image'
<Image 
  source={avatarUrl}
  style={{ width: 48, height: 48 }}
  placeholder={blurhash}
  transition={200}
  contentFit="cover"
/>

Reanimated for Animations

// ❌ JS thread animation (drops frames during heavy computation)
import { Animated } from 'react-native'

// ✅ UI thread animation (smooth 60fps always)
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated'

function AnimatedCard() {
  const scale = useSharedValue(1)
  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }]
  }))
  
  return (
    <Pressable onPressIn={() => { scale.value = withSpring(0.95) }}
               onPressOut={() => { scale.value = withSpring(1) }}>
      <Animated.View style={animatedStyle}>
        <Text>Card content</Text>
      </Animated.View>
    </Pressable>
  )
}

Security

Storage Security

// ❌ AsyncStorage is UNENCRYPTED — visible to anyone with device access
import AsyncStorage from '@react-native-async-storage/async-storage'
await AsyncStorage.setItem('auth_token', token) // INSECURE

// ✅ expo-secure-store uses iOS Keychain / Android Keystore
import * as SecureStore from 'expo-secure-store'
await SecureStore.setItemAsync('auth_token', token) // ENCRYPTED

What Goes Where

Offline-First Pattern (MathMind)

// 1. Try network, fall back to cache
async function getProblems(grade: number) {
  try {
    const online = await NetInfo.fetch()
    if (online.isConnected) {
      const data = await fetchFromSupabase(grade)
      await cacheLocally(grade, data) // update cache
      return data
    }
  } catch {} // network failed
  
  return getCachedProblems(grade) // offline fallback
}

// 2. Queue mutations for sync
async function submitAnswer(answer: Answer) {
  await saveToLocalDb(answer) // always save locally first
  
  const online = await NetInfo.fetch()
  if (online.isConnected) {
    await syncToSupabase(answer)
  } else {
    await addToSyncQueue(answer) // sync when back online
  }
}

App Store Deployment

# Build for production
eas build --platform ios --profile production

# Submit to App Store
eas submit --platform ios

# OTA update (JS-only changes, no native module changes)
eas update --branch production --message "Fix scoring display"

MathMind-Specific Considerations

• Kids Category: requires COPPA compliance, no third-party analytics, no behavioral ads
• Age rating: educational content, no user-generated content = likely 4+
• Login for reviewer: provide test credentials in App Store Connect

Sources

• expo/expo documentation
• expo/examples (navigation, auth, notifications)
• nativewind/nativewind (Tailwind compilation)
• React Native performance documentation

Changelog

• 2026-03-21: Initial skill — Expo/React Native patterns