React Native Patterns

Overview

Patterns for building maintainable React Native components. Covers touch interactions (Pressable), list rendering (FlashList), modal patterns (bottom sheets), accessibility, navigation, and RN-specific requirements that differ from web React.

For React web patterns (hooks, context, composition), see the react-patterns skill.

Workflows

Building an interactive screen:

1. Set up SafeAreaView or apply safe area insets
2. Use Pressable for all interactive elements (44pt minimum)
3. Add haptic feedback on primary actions
4. Use FlashList for lists, ScrollView for fixed content
5. Implement bottom sheet for detail/modal views
6. Add accessibility labels to all interactive elements
7. Test on device for touch targets and scroll performance