Platform differences: Platform

The same code runs on iOS, Android and in a browser, but sometimes you need to tell the platforms apart: shadows are drawn differently, and familiar gestures and spacing vary. The Platform module and files with a platform suffix handle this.

Platform.OS

Platform.OS is a string with the platform name: 'ios', 'android' or 'web'.

// app/about.tsx
import { Platform, Text, View } from 'react-native';
 
export default function About() {
  return (
    <View style={{ flex: 1, padding: 16 }}>
      <Text>Platform: {Platform.OS}</Text>
      <Text>System version: {Platform.Version}</Text>
    </View>
  );
}

On an iPhone the screen shows ios and the iOS version, for example 18.0; on Android, android and the API level, for example 35; in a browser, web.

Platform.select

Platform.select takes an object keyed by platform and returns the value for the current one. It is handy for styles, for example a shadow on a post card:

// components/PostCard.tsx
import { Platform, StyleSheet, Text, View } from 'react-native';
 
export default function PostCard({ title }: { title: string }) {
  return (
    <View style={styles.card}>
      <Text style={{ fontSize: 16 }}>{title}</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  card: {
    backgroundColor: '#fff',
    padding: 16,
    margin: 8,
    borderRadius: 8,
    ...Platform.select({
      ios: { shadowColor: '#000', shadowOpacity: 0.1, shadowRadius: 6 },
      android: { elevation: 3 },
      default: {},
    }),
  },
});

On iOS the shadow is set with the shadow* properties, on Android with a single elevation number. On both platforms the card looks raised above the background. The default key applies to other platforms, including the web.

Render the cards in the post list's renderItem instead of the link rows: <PostCard title={item.title} />, wrapping the card in a Pressable inside a Link with asChild, as in the routing lesson.

Platform-specific files

When there are many differences, make two files: components/Hint.ios.tsx and components/Hint.android.tsx. Import them without the suffix:

// app/about.tsx
import Hint from '@/components/Hint';

Metro picks the right file for each platform at build time. For the web you can add Hint.web.tsx, and a plain Hint.tsx serves as the shared fallback.

Common mistake

Checking only for ios and forgetting the others:

// components/PostCard.tsx
// Wrong: on Android and the web you get undefined.
const padding = Platform.select({ ios: 20 });

If there is no key for the current platform, Platform.select returns undefined, and the style is silently not applied. Always list all the platforms you need or a default key.