How do you write platform-specific code in React Native?

Question

Accepted Answer

While React Native shares most code across iOS and Android, sometimes you need **platform-specific** code or styling — for different platform behaviors, designs, or capabilities. React Native provides the **Platform** module and platform-specific file extensions for this.

## The Platform module

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

// check the current platform
if (Platform.OS === 'ios') { /* iOS-specific */ }
else if (Platform.OS === 'android') { /* Android-specific */ }

// Platform.select — pick a value per platform
const styles = {
  padding: Platform.OS === 'ios' ? 20 : 16,
  ...Platform.select({
    ios: { fontFamily: 'Helvetica' },
    android: { fontFamily: 'Roboto' },
  }),
};
```

`Platform.OS` checks the platform; `Platform.select` picks values per platform — for conditional behavior and styling.

## Platform-specific files

```text
→ Create separate files per platform using extensions:
  Button.ios.js   → used on iOS
  Button.android.js → used on Android
  import Button from './Button'   → RN automatically picks the right file per platform
→ Good for substantially different platform implementations (cleaner than lots of if-checks)
```

## When and how to use it

```text
✓ Use platform-specific code SPARINGLY — share code by default; diverge only when needed
✓ Common reasons: platform design conventions (iOS vs Material), platform-specific
  features/APIs, behavior differences, platform-appropriate UX
✓ Platform module for small differences; .ios/.android files for large differences
✓ Test on BOTH platforms (a feature working on one may differ/break on the other)
```

## Why it matters

Understanding how to write platform-specific code is valuable because **even cross-platform apps sometimes need platform-specific behavior or styling**, so handling it correctly is useful practical knowledge for real React Native apps.

While React Native's value is sharing most code across iOS and Android, real apps sometimes need to **diverge per platform** — for platform design conventions (iOS vs Android/Material aesthetics), platform-specific features or APIs, behavior differences, or platform-appropriate UX — and understanding how to handle this is important.

The **Platform module** (`Platform.OS` to check the platform and `Platform.select` to pick values per platform) handles small differences inline — conditional behavior and styling. **Platform-specific files** (using `.ios.js` and `.android.js` extensions, with React Native automatically selecting the right file) handle larger differences cleanly (separate implementations rather than many conditionals).

Understanding **when and how to use these** reflects good judgment: using platform-specific code **sparingly** (sharing code by default and diverging only when genuinely needed — preserving React Native's cross-platform benefit), choosing the Platform module for small differences versus platform-specific files for large ones, and crucially **testing on both platforms** (since a feature working on one may differ or break on the other — a common real issue).

This balanced approach (share by default, diverge thoughtfully when needed, test both) reflects mature cross-platform development.

Since cross-platform apps sometimes legitimately need platform-specific code (for conventions, features, or UX) and handling it well (the right tools used sparingly, with both-platform testing) is important for quality apps, and since understanding the Platform module and platform-specific files enables this, understanding how to write platform-specific code in React Native is valuable, practically-relevant knowledge — useful for handling the platform differences that arise in real apps while preserving the cross-platform code-sharing that makes React Native valuable, reflecting thoughtful cross-platform development.