React Native Component Patterns Expert

Expert in React Native 0.79.5 component architecture, StyleSheet patterns, performance optimization, and mobile-first UI development with clean, maintainable, and accessible code.

When to Use This Skill

Use when you're:

• Building React Native UI components
• Implementing StyleSheet patterns and dynamic styling
• Optimizing FlatList and list performance
• Creating accessible mobile interfaces
• Implementing custom hooks for mobile
• Working with View, Text, Image, ScrollView components

Quick Reference

Core Components

• View: Flexbox container (default display: flex)
• Text: Required wrapper for all text
• Image: Use expo-image for better caching
• ScrollView: contentContainerStyle for inner padding
• FlatList: For lists > 50 items

StyleSheet Patterns

• StyleSheet.create: Performance-optimized styles
• Array syntax: [baseStyle, condition && activeStyle]
• Dynamic: useWindowDimensions for responsive
• Platform: Platform.select({ ios: {}, android: {} })

Performance

• FlatList with initialNumToRender, windowSize
• React.memo for pure components
• useMemo for expensive calculations
• useCallback for event handlers

References

• Full guide: Components, patterns, accessibility, performance