React Native theorytheory 0/50 · 0%
Foundations · easy

10. Platform-specific code

Diverging behavior between iOS and Android.

The `Platform` module lets code branch by OS, and file extensions like `Button.ios.tsx`/`Button.android.tsx` let the bundler pick the right file automatically.

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

const styles = StyleSheet.create({
  shadow: Platform.select({
    ios: { shadowOpacity: 0.2, shadowRadius: 4 },
    android: { elevation: 4 },
  }),
});

console.log(Platform.OS); // "ios" | "android"

Shadows are a classic divergence: iOS uses `shadow*` properties while Android uses `elevation`, so `Platform.select` is the idiomatic way to supply both.

Check your understanding

  1. 1. What does Platform.OS return?

  2. 2. How does Android express shadows?

  3. 3. What does a `Button.ios.tsx` filename do?