Agent Skills: React Native Component Patterns Expert

Master React Native 0.79.5 components, styling, performance optimization, and mobile UI best practices with real-world examples

UncategorizedID: shipshitdev/library/react-native-components

Install this agent skill to your local

pnpm dlx add-skill https://github.com/shipshitdev/library/tree/HEAD/bundles/frontend/skills/react-native-components

Skill Files

Browse the full folder contents for react-native-components.

Download Skill

Loading file tree…

bundles/frontend/skills/react-native-components/SKILL.md

Skill Metadata

Name
react-native-components
Description
Master React Native 0.79.5 components, styling, performance optimization, and mobile UI best practices with real-world examples. Use when building React Native UI components, implementing StyleSheet or dynamic styling, optimizing list performance, or creating accessible mobile interfaces.

React Native Component Patterns Expert

When to Use

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

React Native Component Patterns Expert Skill | Agent Skills