Platform-specific Code

React Native lets you write code specific to iOS or Android.

Platform.OS

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

export default function PlatformExample() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        Platform: {Platform.OS}
      </Text>
      <Text style={styles.text}>
        Version: {Platform.Version}
      </Text>

      {/* Conditional rendering */}
      {Platform.OS === 'ios' && (
        <Text style={styles.iosOnly}>iOS only!</Text>
      )}

      {Platform.OS === 'android' && (
        <Text style={styles.androidOnly}>Android only!</Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#1a5276',
  },
  text: {
    fontSize: 18,
    color: '#fff',
    marginBottom: 10,
  },
  iosOnly: {
    fontSize: 16,
    color: '#3498db',
    marginTop: 20,
  },
  androidOnly: {
    fontSize: 16,
    color: '#2ecc71',
    marginTop: 20,
  },
});

Platform.select()

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

export default function PlatformSelectExample() {
  const instructions = Platform.select({
    ios: 'Press Cmd+D to open the developer menu',
    android: 'Shake the phone to open the developer menu',
    default: 'Platform not recognized',
  });

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Instructions:</Text>
      <Text style={styles.instructions}>{instructions}</Text>

      {/* Platform-specific components */}
      <View style={styles.button}>
        <Text style={styles.buttonText}>Button</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#1a5276',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#fff',
    marginBottom: 10,
  },
  instructions: {
    fontSize: 14,
    color: '#bdc3c7',
    textAlign: 'center',
    marginBottom: 30,
  },
  button: {
    paddingVertical: 14,
    paddingHorizontal: 28,
    borderRadius: Platform.select({
      ios: 12,
      android: 4,
    }),
    backgroundColor: Platform.select({
      ios: '#007AFF', // iOS blue
      android: '#6200EE', // Material purple
    }),
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.25,
        shadowRadius: 4,
      },
      android: {
        elevation: 4,
      },
    }),
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  },
});

Platform-specific Files

You can create separate files for each platform:

components/
├── Button.tsx          # Used when there are no specific files
├── Button.ios.tsx      # Used only on iOS
└── Button.android.tsx  # Used only on Android

// Button.ios.tsx
import { Pressable, Text, StyleSheet } from 'react-native';

export default function Button({ title, onPress }) {
  return (
    <Pressable style={styles.button} onPress={onPress}>
      <Text style={styles.text}>{title}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#007AFF',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 10,
  },
  text: {
    color: '#fff',
    fontSize: 17,
    fontWeight: '600',
  },
});

// Button.android.tsx
import { Pressable, Text, StyleSheet } from 'react-native';

export default function Button({ title, onPress }) {
  return (
    <Pressable
      style={styles.button}
      onPress={onPress}
      android_ripple={{ color: 'rgba(255,255,255,0.3)' }}
    >
      <Text style={styles.text}>{title}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#6200EE',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 4,
    elevation: 2,
  },
  text: {
    color: '#fff',
    fontSize: 14,
    fontWeight: '500',
    textTransform: 'uppercase',
    letterSpacing: 1,
  },
});

The import will automatically select the correct file:

import Button from './components/Button';
// On iOS it will load Button.ios.tsx
// On Android it will load Button.android.tsx

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Gate of Atlantis</Text>
      <View style={styles.button}>
        <Text style={styles.buttonText}>Open the gate</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#1a5276',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#fff',
    marginBottom: 20,
  },
  button: {
    paddingVertical: 14,
    paddingHorizontal: 28,
    // TODO: use Platform.select to set borderRadius to 12 for iOS and 4 for android.
    //   Syntax: borderRadius: Platform.select({ ios: 12, android: 4 }),
    // TODO: use Platform.select to set backgroundColor to '#007AFF' for iOS
    //   and '#6200EE' for android.
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  },
});