Platform-Specific Code

Different Platforms, Different Needs

iOS and Android have different design conventions, navigation patterns, and user expectations. While React Native lets you share most code between platforms, sometimes you need platform-specific behavior. Maybe you want iOS-style headers on iPhone and Material Design on Android.

React Native provides several ways to handle platform-specific code without creating entirely separate codebases.

The Platform API

The Platform module lets you detect which platform your code is running on and apply different behavior accordingly.

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

function PlatformExample() {
  const isIOS = Platform.OS === 'ios';
  const isAndroid = Platform.OS === 'android';

  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        Running on {isIOS ? 'iOS' : isAndroid ? 'Android' : 'Web'}
      </Text>
      <Text style={[styles.text, Platform.select({
        ios: { color: 'blue' },
        android: { color: 'green' },
      })]}>
        Platform-specific color
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  text: { fontSize: 18, marginBottom: 10 },
});

export default PlatformExample;

Platform.OS gives you the current platform as a string. The Platform.select method is a convenient way to choose between values based on platform. This is useful for applying platform-specific styles or logic.

Platform-Specific Files

For larger platform differences, you can create separate files for each platform. React Native automatically picks the right file based on the platform.

// Button.ios.js
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';

function Button({ title, onPress }) {
  return (
    <TouchableOpacity onPress={onPress} style={{ padding: 15, backgroundColor: '#007AFF' }}>
      <Text style={{ color: 'white', fontSize: 16 }}>{title}</Text>
    </TouchableOpacity>
  );
}

export default Button;

// Button.android.js
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';

function Button({ title, onPress }) {
  return (
    <TouchableOpacity onPress={onPress} style={{ padding: 15, backgroundColor: '#6200EE' }}>
      <Text style={{ color: 'white', fontSize: 16 }}>{title}</Text>
    </TouchableOpacity>
  );
}

export default Button;

Create files with .ios.js or .android.js extensions. When you import Button, React Native automatically loads the correct file. This keeps your platform differences organized and clean.

When to Use Platform-Specific Code

Use platform-specific code sparingly. The more platform-specific code you write, the less advantage you get from cross-platform development. Only separate when there's a genuine difference in behavior or design.

Good use cases include: different navigation patterns (iOS uses back buttons differently), platform-specific APIs (like Face ID on iOS), different design guidelines (Material vs Cupertino), and performance-critical code that benefits from platform optimizations. For most UI and business logic, shared code works perfectly.