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