skills.rest
rladydqls99
rladydqls99COMMUNITY
Explore all skills by this author →
GitHub

rn-platform

Generate platform-specific React Native components using .ios.tsx and .android.tsx files.

Updated Aug 23, 2026
Search Tags:#ios#component generation#android#ui development#react native#platform specific
One-click install
npx skills add https://github.com/rladydqls99/claude-marketplace --skill rn-platform
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: rn-platform
Source: https://github.com/rladydqls99/claude-marketplace/tree/main/plugins/dev-team-plugin/skills/rn-platform
Command: npx skills add https://github.com/rladydqls99/claude-marketplace --skill rn-platform

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating React Native components that need to look or behave differently on iOS and Android, eliminating the need for runtime Platform.OS checks within your code.

Core Features & Use Cases

  • Platform-Specific Files: Automatically generates and uses .ios.tsx and .android.tsx files, which the Metro bundler resolves correctly.
  • Adherence to Guidelines: Ensures components follow platform-specific design principles (Apple HIG for iOS, Material Design 3 for Android).
  • Use Case: When building a custom button component, you can create ExampleButton.ios.tsx styled according to Apple's HIG and ExampleButton.android.tsx styled according to Material Design 3, without any conditional logic in your main component file.

Quick Start

Generate platform-specific React Native components for iOS and Android.

Frequently Asked Questions about rn-platform

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create React Native components for iOS and Android without using Platform.OS checks?▼

You can create platform-specific React Native components by using `.ios.tsx` and `.android.tsx` file extensions. The Metro bundler automatically resolves the correct file, eliminating the need for runtime `Platform.OS` branching within your component logic.

What is the best way to separate iOS and Android UI logic in React Native?▼

The best way to separate platform-specific UI is generating `.ios.tsx` and `.android.tsx` files. This approach ensures your components adhere to Apple Human Interface Guidelines and Material Design 3 respectively, without mixing platform logic in a single file.

How does the Metro bundler resolve platform-specific React Native files?▼

The Metro bundler resolves platform-specific files by matching the `.ios` and `.android` extensions during the build process. When you import a component, Metro automatically loads the correct platform variant based on the target operating system.

Do I need any special dependencies to use .ios.tsx and .android.tsx file extensions in React Native?▼

No special dependencies are required. The Metro bundler natively supports automatic resolution of `.ios.tsx` and `.android.tsx` files, allowing you to generate platform-specific components without adding external libraries to your project.

When should I use platform-specific React Native components instead of conditional styling?▼

Use platform-specific React Native components when your UI requires distinct behaviors or appearances for iOS and Android. Generating separate files adhering to Apple HIG and Material Design 3 ensures clean code, avoiding complex runtime `Platform.OS` branching.

Can I follow Apple HIG and Material Design 3 guidelines in the same React Native project?▼

Yes, you can follow Apple HIG and Material Design 3 by generating separate `.ios.tsx` and `.android.tsx` component files. This allows each platform variant to implement its respective design guidelines independently within the same project.

Related Skills

Explore More Software Engineering Skills→
thesaifalitaithesaifalitai
8

react-native-expert

Build and configure production-grade bare React Native projects with native modules.

Community
Advanced
masssi164masssi164

flutter-embedding-native-views

Embed native Android, iOS, and macOS views inside Flutter apps.

Community
Advanced
expoexpo
2.4k

expo-native-ui

Build native-feeling Expo UI screens with Apple HIG and Material 3.

Official
Intermediate
AratKruglikAratKruglik
9

rn-platform-specific

Bridge platform-specific behavior in React Native apps using Platform.OS and file extensions.

Community
Intermediate