react-native-design

React Native Design

Master React Native styling patterns, React Navigation, and Reanimated 3 to build performant, cross-platform mobile applications with native-quality user experiences.

When to Use This Skill

• Building cross-platform mobile apps with React Native
• Implementing navigation with React Navigation 6+
• Creating performant animations with Reanimated 3
• Styling components with StyleSheet and styled-components
• Building responsive layouts for different screen sizes
• Implementing platform-specific designs (iOS/Android)
• Creating gesture-driven interactions with Gesture Handler
• Optimizing React Native performance

Detailed section: Core Concepts

Originally a 6471-byte section in this SKILL.md. Moved to references/details.md to fit Codex's 8 KB skill body cap.

Quick Start Component

import

Best Practices

1. Use TypeScript: Define navigation and prop types for type safety
2. Memoize Components: Use React.memo and useCallback to prevent unnecessary rerenders
3. Run Animations on UI Thread: Use Reanimated worklets for 60fps animations
4. Avoid Inline Styles: Use StyleSheet.create for performance
5. Handle Safe Areas: Use SafeAreaView or useSafeAreaInsets
6. Test on Real Devices: Simulator/emulator performance differs from real devices
7. Use FlatList for Lists: Never use ScrollView with map for long lists
8. Platform-Specific Code: Use Platform.select for iOS/Android differences

Common Issues

• Gesture Conflicts: Wrap gestures with GestureDetector and use simultaneousHandlers
• Navigation Type Errors: Define ParamList types for all navigators
• Animation Jank: Move animations to UI thread with runOnUI worklets
• Memory Leaks: Cancel animations and cleanup in useEffect
• Font Loading: Use expo-font or react-native-asset for custom fonts
• Safe Area Issues: Test on notched devices (iPhone, Android with cutouts)