skills.rest
truongnat
truongnatCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-native-platform

Standardize React Native platform-specific implementations across iOS and Android.

Updated Mar 5, 2026
Search Tags:#permissions#native modules#react native#platform detection#ios android#platform-specific components#safe area handling
One-click install
npx skills add https://github.com/truongnat/emplus --skill react-native-platform
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-native-platform
Source: https://github.com/truongnat/emplus/tree/main/.agents/skills/jutsu-react-native%3Areact-native-platform
Command: npx skills add https://github.com/truongnat/emplus --skill react-native-platform

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of React Native apps behaving inconsistently across iOS and Android by giving you structured patterns for platform-specific behavior without brittle ad-hoc checks.

Core Features & Use Cases

  • Platform detection & branching: Use Platform.OS, Platform.Version, and Platform.select to apply correct logic and styling per platform.
  • Platform-specific files & components: Implement Component.ios.tsx, Component.android.tsx, and shared Component.tsx so React Native automatically resolves the right implementation.
  • Native-adjacent UI & behavior: Configure platform-specific UI elements (StatusBar, Touchable differences), permissions handling, and Android back button behavior.
  • Common cross-platform pitfalls: Handle Safe Areas correctly, avoid styling-only platform checks, and safely check feature support before using platform linking.

Quick Start

Use the react-native-platform skill to restructure your existing component so iOS and Android each use their own implementation files where necessary, while shared logic and adaptive styling stay in the common module.

Frequently Asked Questions about react-native-platform

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

FAQPage Schema
How do I handle React Native platform-specific styling for iOS and Android?▼

Handle React Native platform-specific styling using Platform.select to apply correct logic and styling per platform, avoiding brittle ad-hoc checks that cause inconsistent UI and behavior across iOS and Android.

What is the best way to create platform-specific components in React Native?▼

Create platform-specific components in React Native by implementing Component.ios.tsx and Component.android.tsx files alongside a shared Component.tsx, so the framework automatically resolves the correct platform implementation.

How do I manage permissions and safe area handling in React Native cross-platform apps?▼

Manage permissions and safe area handling in React Native by applying standardized platform-specific implementation patterns that safely configure native-adjacent UI behavior and prevent inconsistent cross-platform rendering.

Why does my React Native StatusBar and keyboard avoiding behavior differ between iOS and Android?▼

React Native StatusBar and keyboard avoiding behavior differs because iOS and Android require platform-aware navigation configuration and specific file naming conventions to standardize native-adjacent UI elements correctly.

Can I use Platform.select for Android back button logic and feature support checks?▼

Yes, use Platform.select with Platform.OS and Platform.Version to implement Android back button logic and safely check feature support before using platform linking, ensuring consistent cross-platform behavior.

When do I need platform-specific file variants instead of conditional styling in React Native?▼

Use platform-specific file variants in React Native when native-adjacent UI behavior requires separate implementations, reserving conditional styling for simpler adaptive styling that stays in the common shared module.

Related Skills

Explore More Software Engineering Skills→
TMHSDigitalTMHSDigital
2

mobile-dev-environment

Detect missing mobile development tools and SDKs across macOS, Windows, and Linux.

Community
Intermediate
limit5limit5

skill-flutter

Generates a Flutter 3.22+/Dart 3.4+ codebase for iOS and Android with Riverpod 2, go-router 7, FCM push, and in-app purchases integrated.

Community
Advanced
TheBushidoCollectiveTheBushidoCollective
187

jutsu-react-native:react-native-platform

Identify and manage platform-specific code paths in React Native apps.

Official
Intermediate
elihuvillarauselihuvillaraus
2

mobile-builder

Develop native iOS and Android apps with SwiftUI, Kotlin, React Native, or Flutter.

Community
Advanced