Platform-specific

Learn platform-specific native modules.

Platform-specific

Platform-specific code is writing different behavior for iOS and Android. The Platform module gives the device's OS: Platform.OS === 'ios' or Platform.OS === 'android'. You branch based on this.

File names can also be platform-selective: Battery.ios.js is loaded only on iOS, Battery.android.js only on Android. Battery.js is used as a fallback on both. This pattern is preferred when the differences are big; for small differences Platform.OS is more practical.

Branching with Platform.OS

Platform.OS is a string: 'ios' or 'android'. You write iOS-specific code with if (Platform.OS === 'ios'). This pattern is ideal for small differences: margin values, colors, behavior differences.

Example: const marginTop = Platform.OS === 'ios' ? 40 : 24. On iOS 40 may be needed due to the notch; on Android 24 px may be enough. This single-line solution is more practical than creating two separate files.

Exercise Platform margin value

Complete the getTopMargin function. Import Platform from react-native. Return Platform.OS === 'ios' ? 40 : 24.

Show example solution

import { Platform } from 'react-native';

export function getTopMargin() {
  return Platform.OS === 'ios' ? 40 : 24;
}

Test yourself

Import Platform

import { ____ } from 'react-native';

Show answer

import { Platform } from 'react-native';

Match the platform parts

Platform.OS

Operating system
'ios'

iOS value
'android'

Android value
.ios.js

iOS file extension
Which is ideal for small differences?
- Creating two separate files
- Branching with Platform.OS
- Writing a native module
- Installing a new package
Show answer

Creating two separate files — Branching with Platform.OS is ideal for small differences.

Next lesson: Native events

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies