react-native

1# React Native Patterns
2 
3Performance and architecture patterns for React Native + Expo apps. Rules ranked by impact — fix CRITICAL before touching MEDIUM.
4 
5This is a starting point. The skill will grow as you build more mobile apps.
6 
7## When to Apply
8 
9- Building new React Native or Expo apps
10- Optimising list and scroll performance
11- Implementing animations
12- Reviewing mobile code for performance issues
13- Setting up a new Expo project
14 
15## 1. List Performance (CRITICAL)
16 
17Lists are the #1 performance issue in React Native. A janky scroll kills the entire app experience.
18 
19| Pattern | Problem | Fix |
20|---------|---------|-----|
21| **ScrollView for data** | `<ScrollView>` renders all items at once | Use `<FlatList>` or `<FlashList>` — virtualised, only renders visible items |
22| **Missing keyExtractor** | FlatList without `keyExtractor` → unnecessary re-renders | `keyExtractor={(item) => item.id}` — stable unique key per item |
23| **Complex renderItem** | Expensive component in renderItem re-renders on every scroll | Wrap in `React.memo`, extract to separate component |
24| **Inline functions in renderItem** | `renderItem={({ item }) => <Row onPress={() => nav(item.id)} />}` | Extract handler: `const handlePress = useCallback(...)` |
25| **No getItemLayout** | FlatList measures every item on scroll (expensive) | Provide `getItemLayout` for fixed-height items: `(data, index) => ({ length: 80, offset: 80 * index, index })` |
26…