# React Native Platform-Specific Code

> Handling iOS and Android differences with Platform API and native modules.

- Skill: `fierzone/react-native-platform-specific-code` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add fierzone/react-native-platform-specific-code`
- Raw SKILL.md: https://api.skillmd.com/api/skills/fierzone/react-native-platform-specific-code/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: fierzone (https://skillmd.com/u/fierzone)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/fierzone/react-native-platform-specific-code

---


# 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