home / skills / hoangnguyen0403 / agent-skills-standard / platform-specific

platform-specific skill

safe

This skill helps you implement platform-specific React Native code using Platform API and native modules for iOS and Android.

npx playbooks add skill hoangnguyen0403/agent-skills-standard --skill platform-specific

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

1.7 KB

---
name: React Native Platform-Specific Code
description: Handling iOS and Android differences with Platform API and native modules.
metadata:
  labels: [react-native, platform, ios, android, native-modules]
  triggers:
    files: ['**/*.tsx', '**/*.ts', '**/*.ios.*', '**/*.android.*']
    keywords: [Platform, Platform.select, native-module, ios, android]
---

# React Native Platform-Specific Code

## **Priority: P1 (OPERATIONAL)**

## Platform Detection

```tsx
import { Platform } from 'react-native';

// Simple Check
if (Platform.OS === 'ios') {
  // iOS-specific code
}

// Object Selection
const styles = Platform.select({
  ios: { paddingTop: 20 },
  android: { paddingTop: 0 },
  default: { paddingTop: 10 }, // Fallback
});
```

## File Extensions

Use `.ios.` and `.android.` for platform-specific files:

```text
Button.tsx          # Shared
Button.ios.tsx      # iOS-specific
Button.android.tsx  # Android-specific
```

React Native automatically picks the right file:

- **iOS**: Button.ios.tsx → Button.tsx (fallback)
- **Android**: Button.android.tsx → Button.tsx (fallback)

## Native Modules

- **Expo**: Use Expo modules when available (`expo-*` packages).
- **Bare RN**: Use community modules (`@react-native-community/*`).
- **Custom**: Write native modules in Swift/Kotlin when needed.

## Anti-Patterns

- **No Excessive Branching**: Extract to separate files if logic diverges.
- **No Hardcoded Version Checks**: Use feature detection.
- **No Ignoring Android**: Test on both platforms.

## Reference & Examples

See [references/native-modules.md](references/native-modules.md) for Native Bridge (iOS/Android), Expo JSI Modules, and SafeArea handling.

## Related Topics

components | styling

Overview

This skill teaches practical patterns for managing platform-specific differences in React Native using the Platform API, file extensions, and native modules. It focuses on clear, maintainable strategies that reduce branching and ensure consistent behavior across iOS and Android. The guidance covers when to use Expo, community modules, or custom native code and highlights common anti-patterns to avoid.

How this skill works

It inspects app code and recommends where to apply Platform.OS checks, Platform.select styling, and platform-specific file extensions (.ios.tsx / .android.tsx) to keep code clean. It also guides choosing between Expo modules, community packages, or writing native modules in Swift/Kotlin, and suggests extraction to separate files when logic diverges. The skill flags risky anti-patterns such as hardcoded version checks, excessive branching, and skipping cross-platform testing.

When to use it

When UI or behavior needs subtle differences between iOS and Android.
When a platform-specific API or native capability is required.
When shared files grow complex due to branching logic.
When choosing between Expo, community, or custom native modules.
During code reviews to enforce platform-specific best practices.

Best practices

Prefer Platform.select and .ios/.android file extensions over scattered if-else checks.
Extract divergent logic into platform-specific files instead of in-file branching.
Use feature detection rather than hardcoded OS or version checks.
Prefer Expo or community modules when available; implement native modules only when necessary.
Test on both iOS and Android and include a fallback (default) for unknown platforms.

Example use cases

Apply .ios.tsx and .android.tsx files for custom buttons that use platform-native touch feedback.
Use Platform.select to adjust layout padding for iOS SafeArea handling vs. Android.
Choose an expo-* module for camera access in managed apps, or write a native module for a custom sensor in bare RN.
Refactor a screen with many OS branches into two platform-specific component files to simplify maintenance.
Replace version checks with runtime capability probes before calling platform APIs.

FAQ

When should I prefer .ios/.android file extensions over Platform.OS checks?

Use platform-specific files when entire components or modules diverge; use Platform.OS for small conditional tweaks within shared components.

How do I decide between Expo, community modules, or custom native modules?

Start with Expo modules in managed apps, fall back to community packages for bare RN, and implement custom native code only if no existing module meets your needs or performance requirements.