@shipshitdev/react-native-components

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

View in AI SkillSafe app
Scanned · no findings
0 downloads
0 stars
0 demos
SKILL.md
namereact-native-components
descriptionMaster 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

Embed badges

Add these to your README to show the skill's verification status.

SkillSafe verified badge
Verified badge
[![SkillSafe verified badge](https://api.skillsafe.ai/v1/badge/@shipshitdev/react-native-components/verified)](https://skillsafe.ai/skill/@shipshitdev/react-native-components/)
Installs badge
Installs badge
[![Installs badge](https://api.skillsafe.ai/v1/badge/@shipshitdev/react-native-components/installs)](https://skillsafe.ai/skill/@shipshitdev/react-native-components/)
Scan badge
Scan badge
[![Scan badge](https://api.skillsafe.ai/v1/badge/@shipshitdev/react-native-components/scan)](https://skillsafe.ai/skill/@shipshitdev/react-native-components/)
Eval pass rate badge
Eval pass rate
[![Eval pass rate badge](https://api.skillsafe.ai/v1/badge/@shipshitdev/react-native-components/eval)](https://skillsafe.ai/skill/@shipshitdev/react-native-components/)