How does Claude handle different UI files using this skill?

Claude utilizes React Native's file-naming conventions, creating separate .ios.tsx and .android.tsx files that the build system automatically imports based on the target device.

Can this skill help with device-specific hardware features?

Absolutely. It provides implementation logic for platform-specific haptics, status bar translucent settings, and permission handling tailored to either iOS or Android APIs.

What is the core principle of this platform-specific skill?

The core principle is 'Write Once, Adapt Where Needed,' which focuses on maximizing code sharing while allowing for strategic divergence when platform-native behavior is required.

Does this skill support modern styling frameworks like NativeWind?

Yes, it includes specific patterns for using NativeWind platform prefixes, such as 'ios:pt-12' or 'android:elevation-4', to manage styles without complex JS logic.

React Native Platform Patterns

Name: React Native Platform Patterns
Author: IvanTorresEdge

byIvanTorresEdge

0•

Mobile Development

Implements platform-specific UI patterns and conditional logic for React Native iOS and Android applications.

This skill provides a comprehensive set of patterns and best practices for managing platform differences in React Native development. It guides Claude in handling UI discrepancies, API variations, and native feature implementations across iOS and Android using techniques like platform detection, specialized file naming (.ios.tsx/.android.tsx), and adaptive styling. It is essential for developers building high-quality cross-platform apps that need to respect the unique design languages and hardware behaviors of both mobile operating systems.

Características Principales

01Automated platform-specific file structure implementation

02Native feature integration for Haptics, Status Bar, and Permissions

03Support for NativeWind platform-prefixed utility classes

04Safe Area and Keyboard avoidance handling for notched displays

050 GitHub stars

06Conditional platform detection using Platform.OS and Platform.select

Casos de Uso

01Managing native hardware API calls like camera permissions and haptic feedback

02Differentiating UI components like buttons and headers between iOS and Android

03Implementing platform-specific navigation transitions and gestures

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ivantorresedge/molcajete.ai platform-specific-code

For use in Claude.ai and ChatGPT

Download Skill