skills.rest
guicheffer
guichefferCOMMUNITY
Explore all skills by this author →
Website𝕏@guichefferGitHub

platform-detection

Detect iOS and Android platforms using React Native's Platform module.

3|Updated Dec 30, 2025
Search Tags:#platform#cross-platform#ios#android#react-native#conditional rendering
One-click install
npx skills add https://github.com/guicheffer/devorch-cli --skill platform-detection
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: platform-detection
Source: https://github.com/guicheffer/devorch-cli/tree/main/templates/skills/platform/platform-detection
Command: npx skills add https://github.com/guicheffer/devorch-cli --skill platform-detection

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides robust patterns and utilities to ensure your application behaves correctly and looks consistent across both iOS and Android platforms, preventing platform-specific bugs and improving user experience.

Core Features & Use Cases

  • Conditional Rendering: Display different UI elements based on the operating system.
  • Platform-Specific Logic: Execute different code paths for iOS and Android.
  • Value Selection: Choose platform-specific constants, styles, or configurations.
  • Use Case: You need to apply different shadow styles to a card component on iOS versus an elevation style on Android. This Skill helps you achieve that seamlessly.

Quick Start

Use the platform-detection skill to conditionally render a component only on iOS devices.

Frequently Asked Questions about platform-detection

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

FAQPage Schema
How do I handle conditional rendering for iOS and Android in React Native?▼

Conditional rendering for iOS and Android in React Native is handled by detecting the operating system using PlatformIs and Platform.OS utilities to display different UI elements based on the active platform. This ensures your application looks consistent and behaves correctly across both operating systems.

What is the best way to apply platform-specific styles like shadows and elevation in React Native?▼

The best way to apply platform-specific styles is using Platform.select to choose platform-specific constants and configurations. This allows you to seamlessly apply shadow styles for iOS cards and elevation styles for Android components within the same logic flow.

How does Platform.select work for cross-platform value selection?▼

Platform.select works for cross-platform value selection by taking an object keyed by operating system and returning the value matching the active platform. It integrates directly with React Native's Platform module to dynamically select the correct constants, styles, or configurations for iOS or Android.

When do I need to use platform detection utilities in a React Native app?▼

You need platform detection utilities when your React Native app requires different code paths or UI adjustments to prevent platform-specific bugs. It is necessary when applying OS-specific shadow or elevation styles, or displaying entirely different UI elements based on whether the device is iOS or Android.

Can I execute different code paths for iOS and Android without adding external dependencies?▼

Yes, you can execute different code paths for iOS and Android without external dependencies by utilizing built-in React Native Platform module patterns. This Skill provides utilities like PlatformIs to run platform-specific logic dynamically without requiring additional installed packages.

Related Skills

Explore More Software Engineering Skills→
artofrawrartofrawr
1

react-native

Generate React Native project structures with platform-specific code templates.

Community
Intermediate
dual-devs0dual-devs0
1

adapt

Automate responsive design adaptations for web and app interfaces across devices.

Community
Advanced
dralgorhythmdralgorhythm
111

design-systems

Standardize UI components and design tokens across projects.

Community
Advanced
serverpodserverpod
8

shadcn_ui-responsive

Manage responsive Flutter layouts using shadcn_ui breakpoints and ShadResponsiveBuilder.

Official
Intermediate