tomevault-io 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
Core Concepts
- StyleSheet-first styling with typed style objects
- Flexbox layouts for responsive cross-platform UI
- React Navigation patterns: stack, tabs, drawer, modal, deep linking
- Reanimated 3 shared values, worklets, gestures, and layout animations
- Platform-specific styling via
Platform.selectand conditional components - Theme systems, responsive breakpoints, and reusable layout primitives
Instructions
- Clarify the app’s platform targets, navigation flow, and animation requirements.
- Recommend best-practice styling patterns and screen/component structure.
- Provide actionable code snippets in TypeScript by default.
- Prefer native-feeling navigation and performance-safe Reanimated worklets.
- Highlight tradeoffs between simplicity, maintainability, and animation complexity.
Resources
- resources/implementation-playbook.md for detailed patterns and examples.
Limitations
- Do not design full application UI beyond architecture and component patterns.
- Do not prescribe specific UI design systems unless asked.
- Do not embed secrets, credentials, or proprietary assets.
- Do not skip validation for the sake of animation or style brevity.
Source: Javabutdif/Lessora-AI — distributed by TomeVault.