Expo React Native Patterns
Expo SDK 54 Setup
bash
# Start dev server npx expo start # Run platform npm run android npm run ios # Clear cache npx expo start -c # Prebuild native npx expo prebuild --clean
Component Pattern
typescript
import React, { useState, useCallback } from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';
interface Props {
title: string;
onPress: () => void;
}
export function MyComponent({ title, onPress }: Props) {
const [loading, setLoading] = useState(false);
const handlePress = useCallback(async () => {
setLoading(true);
await onPress();
setLoading(false);
}, [onPress]);
return (
<Pressable onPress={handlePress} style={styles.container}>
<Text style={styles.text}>{title}</Text>
</Pressable>
);
}
const styles = StyleSheet.create({
container: { padding: 16 },
text: { fontSize: 16 },
});
Expo Packages Used
| Package | Import | Usage |
|---|---|---|
expo-image | import { Image } from 'expo-image' | Optimized images |
expo-file-system | import * as FileSystem from 'expo-file-system' | File operations |
expo-haptics | import * as Haptics from 'expo-haptics' | Touch feedback |
expo-blur | import { BlurView } from 'expo-blur' | Blur effects |
expo-linear-gradient | import { LinearGradient } from 'expo-linear-gradient' | Gradients |
Image Component
typescript
import { Image } from 'expo-image';
<Image
source={{ uri: imageUrl }}
style={{ width: 120, height: 180 }}
contentFit="cover"
cachePolicy="memory-disk"
placeholder={blurhash}
transition={200}
/>
File System
typescript
import * as FileSystem from 'expo-file-system';
// Directories
FileSystem.documentDirectory // Persistent storage
FileSystem.cacheDirectory // Temporary cache
// Operations
await FileSystem.writeAsStringAsync(path, content);
await FileSystem.readAsStringAsync(path);
await FileSystem.deleteAsync(path, { idempotent: true });
await FileSystem.getInfoAsync(path);
await FileSystem.makeDirectoryAsync(dir, { intermediates: true });
AsyncStorage
typescript
import AsyncStorage from '@react-native-async-storage/async-storage';
// Save
await AsyncStorage.setItem('@key', JSON.stringify(data));
// Load
const json = await AsyncStorage.getItem('@key');
const data = json ? JSON.parse(json) : defaultValue;
// Remove
await AsyncStorage.removeItem('@key');
Hooks Pattern
typescript
// Custom hook
export function useDebounce<T>(value: T, delay: number): T {
const [debounced, setDebounced] = useState(value);
useEffect(() => {
const timer = setTimeout(() => setDebounced(value), delay);
return () => clearTimeout(timer);
}, [value, delay]);
return debounced;
}
FlatList Optimization
typescript
<FlatList
data={items}
keyExtractor={(item) => item.id}
renderItem={({ item }) => <ItemComponent item={item} />}
numColumns={3}
getItemLayout={(_, index) => ({
length: ITEM_HEIGHT,
offset: ITEM_HEIGHT * index,
index,
})}
removeClippedSubviews
maxToRenderPerBatch={10}
windowSize={5}
/>