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