Get Platform and Device Details in React Native

Despite "write once, run everywhere", real differences exist between iOS and Android (status bar height, back-button behavior, shadow syntax) – React Native's Platform API allows targeted, platform-specific adjustments.

1. Description

Platform.OS returns 'ios' or 'android' (or 'web'/'windows'/'macos' depending on the target platform), Platform.Version the operating system version. The helper function Platform.select({{ ios: ..., android: ..., default: ... }}) picks a value directly, no manual if/else needed.

2. Short example

import { Platform } from 'react-native';

const topSpacing = Platform.select({ ios: 44, android: 24, default: 0 });
const isIos = Platform.OS === 'ios';

3. Complete project: a platform info screen

npx create-expo-app platform-demo
cd platform-demo

App.js

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

function InfoRow({ label, value }) {
  return (
    <View style={styles.row}>
      <Text style={styles.label}>{label}</Text>
      <Text style={styles.value}>{String(value)}</Text>
    </View>
  );
}

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Platform Information</Text>
      <InfoRow label="Operating system" value={Platform.OS} />
      <InfoRow label="OS version" value={Platform.Version} />
      <InfoRow label="Is iOS?" value={Platform.OS === 'ios'} />
      <InfoRow label="Is Android?" value={Platform.OS === 'android'} />

      <View style={styles.exampleBox}>
        <Text style={styles.exampleText}>
          This box uses Platform.select() for its shadow -
          via elevation on Android, via shadow* properties on iOS.
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 60, paddingHorizontal: 24 },
  title: { fontSize: 20, fontWeight: 'bold', marginBottom: 16 },
  row: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: '#e5e7eb' },
  label: { color: '#6b7280' },
  value: { fontWeight: 'bold' },
  exampleBox: {
    marginTop: 24, backgroundColor: 'white', padding: 16, borderRadius: 10,
    ...Platform.select({
      android: { elevation: 4 },
      ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.15, shadowRadius: 6 },
      default: { borderWidth: 1, borderColor: '#e5e7eb' },
    }),
  },
  exampleText: { color: '#374151' },
});

4. Explanation

Platform.select({{...}}) inside the style object itself (via the spread operator ...Platform.select(...)) is the idiomatic way to mix platform-specific style PROPERTIES, instead of maintaining two completely separate style objects.
Platform.Version means something different on Android (a numeric API level like 34) than on iOS (a version string like '17.4') – account for that when comparing versions.
Beyond Platform, for extended device information (model name, is-it-a-tablet, battery level) there's the separate package expo-device or react-native-device-info – Platform itself only covers the operating system, not physical device properties.
The default branch in Platform.select() applies to any platform not explicitly named (e.g. web in an Expo web app) – a good fallback instead of crashing on a missing match.

5. Outputs

Ausgabe

A list with four rows: "Operating system: ios" (or "android"), "OS version: 17.4" (or e.g. "34"), "Is iOS?: true"/"false", "Is Android?: true"/"false" – depending on the tested device, exactly ONE of the last two rows reads "true". Below that, a white box with explanatory text whose shadow appears soft on iOS and as a classic Material shadow on Android.