@hairyf/react-native

Hairy's curated collection of agent skills.

View in AI SkillSafe app
Scanned · no findings
48 downloads
0 stars
0 demos
SKILL.md
namereact-native
descriptionReact Native framework for building native mobile apps with React. Use when building iOS/Android apps, working with native components, handling touch interactions, animations, or platform APIs.

React Native

The skill is based on React Native, generated at 2026-01-31.

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components. With React Native, you don't build a "mobile web app", an "HTML5 app", or a "hybrid app". You build a real mobile app that's indistinguishable from an app built using Objective-C or Java.

Core References

Topic Description Reference
Core Components View, Text, Image, TextInput, ScrollView - fundamental UI building blocks core-components
Layout with Flexbox Flexbox layout system for positioning and aligning components core-layout
Styling StyleSheet API for creating and organizing component styles core-styling

Features

Animations

Topic Description Reference
Animated API Create fluid animations with Animated.Value, timing, spring, and gesture integration features-animations
Easing Functions Easing functions for custom animation curves and natural motion features-easing

User Interactions

Topic Description Reference
Touch Handling Pressable, Touchable components, and gesture responders for handling user input features-touch-handling
Keyboard Keyboard API for handling keyboard events, dismissing keyboard, and KeyboardAvoidingView features-keyboard

UI Components

Topic Description Reference
Additional Components Modal, Switch, ActivityIndicator, RefreshControl for dialogs, toggles, loading states components-ui

Data Display

Topic Description Reference
Lists FlatList and SectionList for efficiently rendering large, scrollable lists features-lists

Styling and Theming

Topic Description Reference
Colors and Theming Colors, PlatformColor, Appearance API for theming and dark mode support features-colors-theming

Platform Integration

Topic Description Reference
Platform APIs Linking, Dimensions, Platform detection, AppState, and native integrations features-platform-apis
Network Fetch API for making HTTP requests and handling network responses features-network
StatusBar Control status bar appearance, style, and visibility features-statusbar
Share & Vibration Native share dialog and device vibration for haptic feedback features-share-vibration
Timers setTimeout, setInterval, requestAnimationFrame for scheduling and delays features-timers
Platform-Specific APIs Android (PermissionsAndroid, ToastAndroid, DrawerLayoutAndroid) and iOS (ActionSheetIOS) features-platform-specific

Accessibility

Topic Description Reference
Accessibility Screen reader support, accessibility labels, roles, and states features-accessibility

Advanced Styling

Topic Description Reference
Transforms 2D and 3D transforms for rotation, scale, translation, and skew features-transforms

Best Practices

Topic Description Reference
Performance Performance optimization techniques, profiling, and common bottlenecks best-practices-performance
Debugging Debugging tools, Dev Menu, LogBox, React Native DevTools, and debugging techniques best-practices-debugging

Key Recommendations

  • Use StyleSheet.create() for all styles instead of inline objects
  • Use FlatList instead of ScrollView for long lists
  • Enable useNativeDriver for animations when possible (transform, opacity)
  • Use Pressable for new touch interactions (preferred over Touchable components)
  • Handle platform differences with Platform.select() and Platform.OS
  • Test on real devices - simulator behavior may differ from actual devices
  • Optimize list performance with getItemLayout for fixed-height items
  • Use TypeScript for better type safety and developer experience

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/@hairyf/react-native/verified)](https://skillsafe.ai/skill/@hairyf/react-native/)
Installs badge
Installs badge
[![Installs badge](https://api.skillsafe.ai/v1/badge/@hairyf/react-native/installs)](https://skillsafe.ai/skill/@hairyf/react-native/)
Scan badge
Scan badge
[![Scan badge](https://api.skillsafe.ai/v1/badge/@hairyf/react-native/scan)](https://skillsafe.ai/skill/@hairyf/react-native/)
Eval pass rate badge
Eval pass rate
[![Eval pass rate badge](https://api.skillsafe.ai/v1/badge/@hairyf/react-native/eval)](https://skillsafe.ai/skill/@hairyf/react-native/)