react-nativelisted

# 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