CodeBlanks Logo Icon CodeBlanks
Login Register

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.

Practice 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>.

Starter code

App.js
import { Text } from 'react-native';

function Screen() {
  // check the platform
  return <Text>Device</Text>;
}

Sample solution

App.js
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?

App.js
Platform.OS
  • A number
  • The string 'ios' or 'android' Correct answer
  • A component
  • An array

Explanation: Platform.OS returns the string 'ios' or 'android'.

2 Fill in the blank: Platform.OS check

Question 
if (Platform.____ === 'ios') { ... }
Answer 
if (Platform.OS === 'ios') { ... }

Explanation: You check the platform with Platform.OS.

3 Match: value and platform

Term Meaning
'ios' Apple devices
'android' Google devices
Platform.OS platform name

All lessons in Beginner

1 React Native basics

  1. What is React Native?
  2. Expo setup
  3. Your first component
  4. App.js
  5. Running
  6. Summary - React Native basics

2 JSX

  1. What is JSX?
  2. Expressions
  3. Component tree
  4. Self-closing
  5. Conditional rendering
  6. Summary - JSX

3 Components

  1. Functional components
  2. Props
  3. Children
  4. Multiple props
  5. Component reuse
  6. Summary - Components

4 Project: Counter app

  1. Project design
  2. useState
  3. Increment and decrement
  4. TouchableOpacity
  5. Putting it together

5 TextInput

  1. TextInput
  2. onChangeText
  3. Controlled input
  4. placeholder
  5. Secure text
  6. Summary - TextInput

6 Style

  1. style prop
  2. StyleSheet.create
  3. Color and font
  4. Margin and padding
  5. border
  6. Summary - Style

7 Flexbox

  1. flexDirection
  2. justifyContent
  3. alignItems
  4. flex
  5. flexWrap
  6. Summary - Flexbox

8 Buttons

  1. Button
  2. TouchableOpacity
  3. Pressable
  4. onPress and onPressIn
  5. disabled
  6. Summary - Buttons

9 Project: To-do app

  1. App design
  2. Adding tasks
  3. Task list
  4. Completing tasks
  5. Putting it together

10 Lists

  1. FlatList
  2. renderItem
  3. keyExtractor
  4. SectionList
  5. List header and footer
  6. Summary - Lists

11 ScrollView

  1. ScrollView
  2. horizontal
  3. contentContainerStyle
  4. onScroll
  5. RefreshControl
  6. Summary - ScrollView

12 Images

  1. Image
  2. source
  3. resizeMode
  4. ImageBackground
  5. Image size
  6. Summary - Images

13 State

  1. useState
  2. State update
  3. Previous state
  4. Multiple state
  5. Object state
  6. Summary - State

14 Events

  1. onPress
  2. onLongPress
  3. Event parameters
  4. onLayout
  5. Form events
  6. Summary - Events

15 Project: Weather app

  1. App design
  2. Data model
  3. Display
  4. City selection
  5. Putting it together

16 Navigation

  1. React Navigation
  2. Stack navigator
  3. navigate
  4. params
  5. Back button
  6. Summary - Navigation

17 Alerts

  1. Alert
  2. Alert buttons
  3. Toast
  4. Modal
  5. Modal animation
  6. Summary - Alerts

18 Platform

  1. Platform.OS
  2. Platform.select
  3. Platform.Version
  4. File extension
  5. Platform-specific components
  6. Summary - Platform

19 Async Storage

  1. AsyncStorage
  2. setItem
  3. getItem
  4. removeItem
  5. JSON serialize
  6. Summary - Async Storage

20 Beginner final

  1. Project design
  2. Components
  3. State and events
  4. Navigation
  5. Putting it together