Agent skill · software engineering · wshobson
react-native-design
Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or creating performant animations.
Why this skill is useful
Provides specific patterns and best practices for React Native development that enhance performance and user experience, which the AI may not reliably generate on its own.
What it needs
Requires react-native, react-native-reanimated, react-navigation, styled-components installed locally. About 2k tokens when loaded. Last updated 2026-08-05. 38,570 stars on the source repository.
What this skill does
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 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)
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills wshobson/react-native-design