Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/facebook/react-native/llms.txt

Use this file to discover all available pages before exploring further.

React Native makes it easy to write code that works on both iOS and Android, but sometimes you need platform-specific logic. This guide covers the various ways to handle platform differences.

​
The Platform Module

The Platform module from React Native provides information about the current platform.

​
Platform.OS

Check which platform your code is running on: 
import {Platform, Text} from 'react-native';

function PlatformInfo() {
  return (
    <Text>
      Running on {Platform.OS}
    </Text>
  );
}

// Platform.OS returns: 'ios' | 'android' | 'windows' | 'macos' | 'web'

​
Platform.Version

Get the platform version: 
import {Platform} from 'react-native';

// Returns iOS version as string (e.g., "14.5")
console.log(Platform.Version); // "15.0"

if (parseFloat(Platform.Version) >= 14) {
  // Use iOS 14+ features
}

​
Platform Implementation from Source

From the React Native source code: 
// From Libraries/Utilities/Platform.ios.js
const Platform = {
  OS: 'ios',
  get Version(): string {
    return this.constants.osVersion;
  },
  get isPad(): boolean {
    return this.constants.interfaceIdiom === 'pad';
  },
  get isTV(): boolean {
    return this.constants.interfaceIdiom === 'tv';
  },
  get isVision(): boolean {
    return this.constants.interfaceIdiom === 'vision';
  },
};

​
Platform.select()

Return different values based on platform: 
import {Platform, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      ios: {
        backgroundColor: 'white',
        shadowColor: '#000',
        shadowOffset: {width: 0, height: 2},
        shadowOpacity: 0.3,
      },
      android: {
        backgroundColor: '#f5f5f5',
        elevation: 4,
      },
    }),
  },
});

​
Platform.select() with Components

import {Platform, TouchableOpacity, TouchableNativeFeedback} from 'react-native';

const Touchable = Platform.select({
  ios: TouchableOpacity,
  android: TouchableNativeFeedback,
});

function MyButton({children, onPress}) {
  return (
    <Touchable onPress={onPress}>
      {children}
    </Touchable>
  );
}

​
Real Example from React Native Source

From Libraries/Components/Button.js:
Button.js (source)
const styles = StyleSheet.create({
  button: Platform.select({
    ios: {},
    android: {
      elevation: 4,
      backgroundColor: '#2196F3',
      borderRadius: 2,
    },
  }),
  text: {
    textAlign: 'center',
    margin: 8,
    ...Platform.select({
      ios: {
        color: '#007AFF',
        fontSize: 18,
      },
      android: {
        color: 'white',
        fontWeight: '500',
      },
    }),
  },
});

​
Platform-Specific File Extensions

Create separate files for each platform:
1

Create platform-specific files

MyComponent.ios.js
MyComponent.android.js
2

Import without extension

import MyComponent from './MyComponent';
React Native automatically picks the right file based on platform.

​
Example: Platform-Specific Components

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

export default function MyComponent() {
  return (
    <View>
      <Text>iOS Version</Text>
      {/* iOS-specific implementation */}
    </View>
  );
}

​
Real Example from React Native

From the React Native source, ToastAndroid has platform-specific implementations: 
ToastAndroid.js          # Base file with type definitions
ToastAndroid.ios.js      # iOS (shows warning)
ToastAndroid.android.js  # Android (actual implementation)

​
Platform-Specific Props

Some components have platform-specific props: 
import {TextInput} from 'react-native';

<TextInput
  clearButtonMode="while-editing"  // iOS only
  enablesReturnKeyAutomatically    // iOS only
  dataDetectorTypes="phoneNumber"  // iOS only
/>

​
Conditional Rendering

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

function Header() {
  return (
    <View>
      <Text>My App</Text>
      {Platform.OS === 'ios' && (
        <Text style={{fontSize: 12}}>iOS Exclusive Feature</Text>
      )}
      {Platform.OS === 'android' && (
        <Text style={{fontSize: 12}}>Android Exclusive Feature</Text>
      )}
    </View>
  );
}

​
Platform-Specific APIs

Some APIs are platform-specific: 
import {ActionSheetIOS, Alert} from 'react-native';

// ActionSheetIOS
if (Platform.OS === 'ios') {
  ActionSheetIOS.showActionSheetWithOptions(
    {
      options: ['Cancel', 'Delete'],
      destructiveButtonIndex: 1,
      cancelButtonIndex: 0,
    },
    (buttonIndex) => {
      console.log('Button clicked:', buttonIndex);
    }
  );
}

import {ToastAndroid, Platform} from 'react-native';

// ToastAndroid
if (Platform.OS === 'android') {
  ToastAndroid.show('Message sent!', ToastAndroid.SHORT);
}

// PermissionsAndroid
import {PermissionsAndroid} from 'react-native';

async function requestCameraPermission() {
  if (Platform.OS === 'android') {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.CAMERA
    );
    return granted === PermissionsAndroid.RESULTS.GRANTED;
  }
  return true; // iOS handles permissions differently
}

​
Styling Differences

​
Shadows vs Elevation

const styles = StyleSheet.create({
  card: {
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
  },
});

​
Device-Specific Code

​
Check for iPad

import {Platform} from 'react-native';

if (Platform.OS === 'ios' && Platform.isPad) {
  console.log('Running on iPad');
}

​
Check for TV

import {Platform} from 'react-native';

if (Platform.isTV) {
  console.log('Running on TV');
}

​
Best Practices

Use Platform.select() for styles

Keeps your code clean and readable when differences are minor

Use .ios.js/.android.js for major differences

Better for completely different implementations

Test on both platforms

Always test platform-specific code on actual devices

Document platform differences

Comment why platform-specific code is needed

​
Common Patterns

​
Safe Area Handling

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

function App() {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.content}>
        {/* Your app content */}
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
  },
  content: {
    flex: 1,
  },
});

import {Platform} from 'react-native';

const NAVBAR_HEIGHT = Platform.select({
  ios: 44,
  android: 56,
  default: 56,
});

​
Next Steps

Networking

Learn about fetching data from APIs

Navigation

Navigate between screens in your app

Build docs developers (and LLMs) love

Get started for freeTalk to us