CodeBlanks Logo Icon CodeBlanks
Login Register

Platform-specific components

Learn to write platform-specific components.

Platform-specific component

Platform.select can select not only numbers and strings but also components. When you want to show one component on iOS and another on Android you use this method. You assign a component to each key; Platform.select returns the one for the current platform.

const Button = Platform.select({
  ios: IOSButton,
  android: AndroidButton,
  default: DefaultButton,
});

Here the Button variable holds the relevant component on whichever platform you are on. You can use the component as <Button />; React Native renders the right one.

Practice Your turn: select component by platform

Import Platform. Assign Card to the result of Platform.select({ ios: IOSCard, android: AndroidCard, default: DefaultCard }).

Starter code

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

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

Sample solution

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

const Card = Platform.select({
  ios: IOSCard,
  android: AndroidCard,
  default: DefaultCard,
});

Default value

The default key in the Platform.select object is used when neither ios nor android key exists. This provides a safety net if your app is extended to a new platform (for example the web) in the future.

Usually you set the default value to the component of the platform you use most. For example if both iOS and Android values exist but there is no default, on the web undefined is returned and this causes an error. Adding default eliminates this risk.

Questions and answers

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

1 Fill in the blank: select component

Question 
const Button = Platform.____({ ios: IOSButton, android: AndroidButton });
Answer 
const Button = Platform.select({ ios: IOSButton, android: AndroidButton });

Explanation: You select the component with Platform.select.

2 How does selecting a component with Platform.select work?

App.js
Platform.select({ ios: A, android: B })
  • Returns the current platform's component Correct answer
  • Merges both components
  • Returns only the ios component
  • Throws an error

Explanation: Platform.select returns the current platform's component.

3 Match: key and usage

Term Meaning
ios iOS component
android Android component
default fallback component

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