Platform-Specific Code

import { Platform, StyleSheet, Text, View } from "react-native";
 
const HEADER_HEIGHT = Platform.select({ ios: 44, android: 56, default: 48 });
 
export function ScreenHeader({ title }: { title: string }) {
  return (
    <View style={styles.header}>
      <Text style={styles.title}>{title}</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  header: {
    height: HEADER_HEIGHT,
    paddingTop: Platform.OS === "ios" ? 4 : 0,
    backgroundColor: Platform.select({ ios: "#f8f8f8", android: "#6200ee" }),
    justifyContent: "center",
    paddingHorizontal: 16,
  },
  title: {
    fontSize: 17,
    fontWeight: Platform.select({ ios: "600", android: "500" }),
    color: Platform.OS === "android" ? "#fff" : "#000",
  },
});

// AppButton.tsx - shared entry; Metro resolves platform files automatically
import { AppButton } from "./components/AppButton";
 
export default function CheckoutScreen() {
  return (
    <AppButton
      label="Pay now"
      onPress={() => console.log("checkout")}
    />
  );
}

// components/AppButton.tsx - shared API, re-exports platform implementation
export { AppButton } from "./AppButton.native";
export type { AppButtonProps } from "./AppButton.types";

// components/AppButton.types.ts
export interface AppButtonProps {
  label: string;
  onPress: () => void;
  disabled?: boolean;
}

// components/AppButton.native.tsx - fallback for non-split platforms
import { Platform } from "react-native";
import { AppButtonIos } from "./AppButton.ios";
import { AppButtonAndroid } from "./AppButton.android";
 
export function AppButton(props: import("./AppButton.types").AppButtonProps) {
  return Platform.OS === "android" ? (
    <AppButtonAndroid {...props} />
  ) : (
    <AppButtonIos {...props} />
  );
}

// components/AppButton.ios.tsx
import { Pressable, StyleSheet, Text } from "react-native";
import type { AppButtonProps } from "./AppButton.types";
 
export function AppButtonIos({ label, onPress, disabled }: AppButtonProps) {
  return (
    <Pressable
      onPress={onPress}
      disabled={disabled}
      style={({ pressed }) => [
        styles.button,
        pressed && styles.pressed,
        disabled && styles.disabled,
      ]}
    >
      <Text style={styles.label}>{label}</Text>
    </Pressable>
  );
}
 
const styles = StyleSheet.create({
  button: {
    backgroundColor: "#007aff",
    borderRadius: 10,
    minHeight: 44,
    alignItems: "center",
    justifyContent: "center",
    paddingHorizontal: 20,
  },
  pressed: { opacity: 0.7 },
  disabled: { opacity: 0.4 },
  label: { color: "#fff", fontSize: 17, fontWeight: "600" },
});

// components/AppButton.android.tsx
import { Pressable, StyleSheet, Text } from "react-native";
import type { AppButtonProps } from "./AppButton.types";
 
export function AppButtonAndroid({ label, onPress, disabled }: AppButtonProps) {
  return (
    <Pressable
      onPress={onPress}
      disabled={disabled}
      android_ripple={{ color: "rgba(255,255,255,0.3)" }}
      style={[styles.button, disabled && styles.disabled]}
    >
      <Text style={styles.label}>{label}</Text>
    </Pressable>
  );
}
 
const styles = StyleSheet.create({
  button: {
    backgroundColor: "#6750a4",
    borderRadius: 4,
    minHeight: 48,
    alignItems: "center",
    justifyContent: "center",
    paddingHorizontal: 24,
    elevation: 2,
  },
  disabled: { opacity: 0.4 },
  label: { color: "#fff", fontSize: 15, fontWeight: "500", textTransform: "uppercase" },
});

// utils/share.ts - shared module with Platform.select for behavior
import { Platform, Share } from "react-native";
 
export async function shareUrl(url: string, message: string) {
  if (Platform.OS === "web") {
    if (navigator.share) {
      await navigator.share({ title: message, url });
      return;
    }
    await navigator.clipboard.writeText(url);
    return;
  }
 
  await Share.share(
    Platform.select({
      ios: { url, message },
      android: { message: `${message}\n${url}` },
      default: { message: `${message} ${url}` },
    })!
  );
}

// Object form - pick a value
const font = Platform.select({ ios: "System", android: "Roboto", default: "sans-serif" });
 
// Function form - lazy per platform
const createStyles = Platform.select({
  ios: () => StyleSheet.create({ card: { shadowOpacity: 0.2 } }),
  android: () => StyleSheet.create({ card: { elevation: 4 } }),
});
 
// Inline ternary - fine for one-off props
paddingTop: Platform.OS === "ios" ? 8 : 0,

import { Platform } from "react-native";
 
const iosVersion =
  Platform.OS === "ios" ? parseInt(String(Platform.Version), 10) : 0;
 
const androidApi =
  Platform.OS === "android" ? Platform.Version : 0;
 
const supportsBlur = iosVersion >= 13 || androidApi >= 31;

import { Platform, type PlatformOSType } from "react-native";
 
type MobileOS = Extract<PlatformOSType, "ios" | "android">;
 
function isMobile(os: PlatformOSType): os is MobileOS {
  return os === "ios" || os === "android";
}
 
// Platform.select return may be undefined - provide default
const height = Platform.select({ ios: 44, android: 56 }) ?? 48;
 
// Share platform-specific modules with identical exports
export type { AppButtonProps } from "./AppButton.types";