Summary - Platform
- React Native course
- Beginner
- Lesson 105/116
- 5 min
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.
Practice Your turn: platform-specific padding
Import Platform. Assign padding to the result of Platform.select({ ios: 24, android: 18 }).
Starter code
import { Platform } from 'react-native';
// set padding with Platform.select
const padding = null;Sample solution
import { Platform } from 'react-native';
const padding = Platform.select({
ios: 24,
android: 18,
});Practice Your turn: show component by platform
Import Platform and Text. If Platform.OS === 'ios' return <Text>iOS</Text>; otherwise return <Text>Android</Text>.
Starter code
import { Text } from 'react-native';
function Screen() {
// check the platform
return <Text>Device</Text>;
}Sample solution
import { Platform, Text } from 'react-native';
function Screen() {
if (Platform.OS === 'ios') {
return <Text>iOS</Text>;
}
return <Text>Android</Text>;
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does Platform.OS return?
Platform.OS- A number
- The string 'ios' or 'android' Correct answer
- A component
- An array
Explanation: Platform.OS returns 'ios' or 'android'.
2 Match: property and role
| Term | Meaning |
|---|---|
Platform.OS |
platform name |
Platform.select |
value selection |
Platform.Version |
version number |