Summary - Platform

Combine Platform.OS, select and file extension to write a platform-compatible component.

Summary - Platform

In this group you learned ways to write platform-specific code. With Platform.OS you read which platform you are on; with Platform.Version you check the OS version. Platform.select is a shortcut to select a value or component by platform.

With the file extension method .ios.js and .android.js files are loaded automatically; you do not write the extension when importing. Now let us combine these concepts in exercises.

Exercise Your turn: platform-specific padding

Import Platform. Assign padding to the result of Platform.select({ ios: 24, android: 18 }).

Show example solution

import { Platform } from 'react-native';

const padding = Platform.select({
  ios: 24,
  android: 18,
});

Exercise Your turn: show component by platform

Import Platform and Text. 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 'ios' or 'android'.
Match: property and role

Platform.OS

platform name
Platform.select

value selection
Platform.Version

version number

Next lesson: AsyncStorage

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies