Platform Differences in Code

Most of Sprout is shared, but a few details should differ. iPhone users expect a subtle shadow; Android uses elevation. The date picker looks different on each. React Native gives you three levels of tools for this, from a single value to a whole file, and even a path to the web.

The rule

Small difference, Platform; big difference, separate files.

The Platform module handles small differences inside one file:

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  card: {
    padding: 16,
    ...Platform.select({
      ios: { shadowOpacity: 0.15, shadowRadius: 6 },
      android: { elevation: 3 },
      default: {},
    }),
  },
});

if (Platform.OS === 'android') {
  // Android-only behaviour
}

Platform.OS is 'ios', 'android' or 'web' (and a few others).
Platform.select({...}) returns the value for the current platform, with default as the fallback.
Platform.Version gives the OS version: a number (the API level) on Android, a string on iOS.

Platform file extensions handle big differences. Create two files with the same base name:

components/DatePicker.ios.js
components/DatePicker.android.js

Then import without the extension:

import DatePicker from './components/DatePicker';

Metro picks the right file for each platform when it bundles. There is also .native.js, used for iOS and Android together, next to a plain .js that the web build uses.

react-native-web runs React Native components in a browser by turning View and Text into HTML elements. Expo uses it for its web target, which is why Platform.OS can be 'web'. Features without a browser equivalent need a web branch or a .web.js file.

The shortcut

Measure the difference: one value or one line → Platform.select or Platform.OS; a whole component that differs → a .ios.js / .android.js pair. If you find many if (Platform.OS ...) checks in one component, it is time to split files.

Two differences in SproutStep 1 of 4

Card shadow

Only style values differ. Use Platform.select inside the stylesheet.

Drills

Answer fast — trust the rule.

quick drill

On an Android phone, what does Platform.OS equal?

quick drill

What does Platform.select({ ios: 12, android: 16, default: 14 }) return in a web browser?

quick drill

Both Header.ios.js and Header.android.js exist. How should a screen import it?

quick drill

A component contains ten if (Platform.OS === 'ios') checks. What does the shortcut suggest?

quick drill

What does react-native-web do?

Remember

Small difference: Platform.OS or Platform.select; big difference: separate platform files.
Many checks in one component means it is time to split.
Trap: Platform.OS values are lower-case, and the web needs a branch too.

Platform Differences in Code

Platform Differences in Code

The rule

The shortcut

Card shadow

Drills

Remember

Practice — level up