React Native Visual Testing
Validates and automates the visual appearance of React Native applications across all modern iPhone models and screen resolutions.
The source repository doesn't declare a license. Check its terms before reusing the code.
Key features
- Detailed logical dimension reference for all iPhone models from 11 to 17
- Status bar 'Demo Mode' configuration for consistent baseline comparisons
- Automated scripts for multi-device simulator booting and screenshot capture
- Validation guidelines for Safe Areas, notches, and Dynamic Island compatibility
- Implementation patterns for visual testing libraries like Detox and React Native Owl
Use cases
- Ensuring UI layout consistency across various screen sizes and notch configurations
- Capturing consistent, high-quality app screenshots for store listings and documentation
- Automating multi-device visual regression tests within a CI/CD pipeline
FAQ
What does the React Native Visual Testing skill do?
This skill equips Claude with specialized knowledge to automate and validate the UI of React Native applications. it provides precise logical dimensions, simulator configurations, and testing scripts for every modern iPhone model from the 11 through the 17 series.
Does it help with Safe Area and Dynamic Island layout issues?
Yes. The skill includes a detailed reference for top insets (e.g., 47pt for notches vs. 59pt for Dynamic Island) and provides validation guidelines to ensure your app content never overlaps with system-level UI elements.
How does this skill improve my mobile development workflow?
It eliminates manual cross-device checking by providing Claude with ready-to-use scripts for multi-device simulator booting, 'Demo Mode' status bar configuration for consistent baselines, and integration patterns for libraries like Detox and React Native Owl.
Which iPhone models and features are covered?
The skill covers the entire iPhone 11–17 lineup, including Pro, Pro Max, Plus, Mini, and SE variants. It specifically handles hardware-specific UI challenges like the Notch, Dynamic Island, Safe Area insets, and varied pixel densities (2x vs 3x).
Can I use this skill to automate screenshot capture?
Absolutely. It provides automated shell scripts and `xcrun simctl` commands that allow Claude to boot multiple simulators, trigger screenshots across different resolutions, and organize them for pixel-perfect verification.
Related skills
Git & GitHub Workflow
Manages the complete Git and GitHub workflow for React Native (Expo) projects, enforcing best practices for branching, commits, and pull requests.
Mobile Development12 ptsReact Native Feature Generator
Generates new feature modules for React Native applications based on a clean, three-layer (Presentation, Domain, Data) architecture.
Mobile Development12 ptsComet Scaffold
Generates opinionated, feature-first React Native projects using the Comet CLI and its configuration standards.
Mobile Development12 pts