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.

Exercise Your turn: select component by platform

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

Show example solution

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.

Test yourself

Fill in the blank: select component

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

Show answer

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

How does selecting a component with Platform.select work?
```
Platform.select({ ios: A, android: B })
```
- Returns the current platform's component
- Merges both components
- Returns only the ios component
- Throws an error
Show answer

Returns the current platform's component — Platform.select returns the current platform's component.
Match: key and usage

ios

iOS component
android

Android component
default

fallback component

Next lesson: Summary - Platform

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies