Platform.OS

Learn OS detection with Platform.OS.

What is Platform.OS?

Your React Native app runs on both iOS and Android. Sometimes you need to know which platform you are on: for example you may want different padding on iOS and a different shadow style on Android. This information is provided by Platform.OS.

Platform.OS returns the string 'ios' or 'android'. You import Platform from the react-native package. By using it in a condition you can write platform-specific code: if (Platform.OS === 'ios').

Using Platform.OS

You use Platform.OS in an if condition to write platform-specific code. You can show one component on iOS and another on Android. Or you can give the same component different styles.

import { Platform, Text } from 'react-native';

if (Platform.OS === 'ios') {
  return <Text>iOS device</Text>;
}
return <Text>Android device</Text>;

The condition string is lowercase: 'ios' and 'android'. If you use uppercase it will not match. Always use === for comparison.

Exercise Your turn: show text based on platform

Import Platform from react-native. If Platform.OS === 'ios' return <Text>iOS</Text>; otherwise return <Text>Android</Text>.

Show example solution

import { Platform, Text } from 'react-native';

function Screen() {
  if (Platform.OS === 'ios') {
    return <Text>iOS</Text>;
  }
  return <Text>Android</Text>;
}

Test yourself

What does Platform.OS return?
```
Platform.OS
```
- A number
- The string 'ios' or 'android'
- A component
- An array
Show answer

The string 'ios' or 'android' — Platform.OS returns the string 'ios' or 'android'.

Fill in the blank: Platform.OS check

if (Platform.____ === 'ios') { ... }

Show answer

if (Platform.OS === 'ios') { ... }

Match: value and platform

'ios'

Apple devices
'android'

Google devices
Platform.OS

platform name

Next lesson: Platform.select

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies