CodeBlanks Logo Icon CodeBlanks
Login Register

Platform.select

Learn platform-specific styles with Platform.select.

Platform.select

Instead of writing if (Platform.OS === 'ios') every time you can use Platform.select. This function takes an object and returns the value for the current platform. It makes your code shorter and more readable.

const padding = Platform.select({
  ios: 20,
  android: 16,
});

Here on iOS padding is 20, on Android 16. The object keys are ios and android. You can also provide a default key; it is used when no platform matches.

The Platform.select object

The object you pass to Platform.select has keys ios, android and an optional default. You can assign any value to each key: number, string, component, function. The value of the key matching the current platform is returned.

If the object has both ios and android, the value for whichever platform you are on is returned. default is used only when neither iOS nor Android key exists; for example on the web.

Practice Your turn: platform-specific padding

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

Starter code

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

// set padding with Platform.select
const padding = null;

Sample solution

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

const padding = Platform.select({
  ios: 20,
  android: 16,
});

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 Fill in the blank: Platform.select call

Question 
const padding = Platform.____({ ios: 20, android: 16 });
Answer 
const padding = Platform.select({ ios: 20, android: 16 });

Explanation: You get the platform-specific value with select.

2 What does Platform.select return?

App.js
Platform.select({ ios: 20, android: 16 })
  • An array
  • All values
  • The current platform's value Correct answer
  • A function

Explanation: Platform.select returns the value for the current platform.

3 Match: key and usage

Term Meaning
ios iOS value
android Android value
default fallback value

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