Platform - React Native

The Platform module provides information about the platform the app is running on. Use it to implement platform-specific behavior and conditionally render components.

Import

import { Platform } from 'react-native';

Properties

OS

Returns the current operating system.

const os = Platform.OS;

Returns: 'ios' | 'android' | 'windows' | 'macos' | 'web'

Version

Returns the OS version.

const version = Platform.Version;

Returns:

iOS: string - iOS version (e.g., '16.0')
Android: number - API level (e.g., 33)

constants

Object containing platform-specific constants.

const constants = Platform.constants;

iOS constants:

forceTouchAvailable (boolean): Whether 3D Touch is available
interfaceIdiom (string): Device type ('phone', 'pad', 'tv', 'vision')
isTesting (boolean): Whether running in test mode
isDisableAnimations (boolean): Whether animations are disabled
osVersion (string): iOS version
systemName (string): OS name (e.g., 'iOS')
isMacCatalyst (boolean): Whether running on Mac Catalyst
reactNativeVersion (object): React Native version info

Android constants:

Version (number): Android API level
Release (string): Android release version
Serial (string): Device serial number
Fingerprint (string): Build fingerprint
Model (string): Device model
Brand (string): Device brand
Manufacturer (string): Device manufacturer
ServerHost (string): Development server host (debug builds)
uiMode (string): UI mode ('normal', 'tv', etc.)
isTesting (boolean): Whether running in test mode
isDisableAnimations (boolean): Whether animations are disabled
reactNativeVersion (object): React Native version info

isPad (iOS only)

Whether the device is an iPad.

const isPad = Platform.isPad;

Returns: boolean

isTV

Whether the device is a TV (Apple TV or Android TV).

const isTV = Platform.isTV;

Returns: boolean

isVision (iOS only)

Whether the device is Apple Vision Pro.

const isVision = Platform.isVision;

Returns: boolean

isTesting

Whether the app is running in test mode.

const isTesting = Platform.isTesting;

Returns: boolean

isDisableAnimations

Whether animations are disabled (for testing or accessibility).

const isDisableAnimations = Platform.isDisableAnimations;

Returns: boolean

isMacCatalyst (iOS only)

Whether the app is running on Mac via Catalyst.

const isMacCatalyst = Platform.isMacCatalyst;

Returns: boolean

Methods

select()

Returns the appropriate value for the current platform.

const value = Platform.select(obj);

object

required

Object with platform-specific values:

type PlatformSelectSpec<T> = {
  ios?: T;
  android?: T;
  native?: T;
  default?: T;
};

The method checks keys in order: ios/android → native → default

Returns: The value for the current platform.

Examples

Basic Platform Detection

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

const PlatformInfo = () => (
  <Text>
    OS: {Platform.OS}
    Version: {Platform.Version}
  </Text>
);

Conditional Rendering

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

const ConditionalComponent = () => (
  <View>
    {Platform.OS === 'ios' && <Text>This is iOS</Text>}
    {Platform.OS === 'android' && <Text>This is Android</Text>}
  </View>
);

Using Platform.select()

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

const styles = StyleSheet.create({
  container: {
    ...Platform.select({
      ios: {
        backgroundColor: '#007AFF',
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.25,
      },
      android: {
        backgroundColor: '#3DDC84',
        elevation: 4,
      },
      default: {
        backgroundColor: '#ccc',
      },
    }),
  },
  text: {
    fontSize: Platform.select({
      ios: 17,
      android: 16,
      default: 14,
    }),
  },
});

Platform-Specific Components

import { Platform } from 'react-native';
import IOSComponent from './IOSComponent';
import AndroidComponent from './AndroidComponent';

const MyComponent = Platform.select({
  ios: IOSComponent,
  android: AndroidComponent,
});

export default MyComponent;

Platform-Specific Code

import { Platform } from 'react-native';

const getStatusBarHeight = () => {
  if (Platform.OS === 'ios') {
    // iPhone X and newer
    return Platform.constants.osVersion >= '11' ? 44 : 20;
  }
  return 0;
};

Android Version Check

import { Platform } from 'react-native';

const useAndroidFeature = () => {
  if (Platform.OS === 'android' && Platform.Version >= 33) {
    // Use Android 13+ specific features
    console.log('Android 13 or higher');
  }
};

Device Type Detection

import { Platform } from 'react-native';

const isTablet = () => {
  if (Platform.OS === 'ios') {
    return Platform.isPad;
  }
  // For Android, you'd need to check screen size
  return false;
};

const isTVDevice = () => Platform.isTV;

const isVisionPro = () => Platform.isVision;

Platform-Specific File Extensions

Create platform-specific files:

Button.js          // Default
Button.ios.js      // iOS-specific
Button.android.js  // Android-specific

React Native automatically picks the right file:

import Button from './Button'; // Loads Button.ios.js on iOS, Button.android.js on Android

Platform-Specific Props

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

const MyView = () => (
  <View
    {...Platform.select({
      ios: {
        accessibilityRole: 'button',
        accessibilityLabel: 'Tap me',
      },
      android: {
        accessible: true,
        accessibilityLabel: 'Tap me',
      },
    })}
  >
    {/* Content */}
  </View>
);

React Native Version Check

import { Platform } from 'react-native';

const { reactNativeVersion } = Platform.constants;

console.log('React Native Version:', reactNativeVersion);
// { major: 0, minor: 72, patch: 0, prerelease: null }

const isRN72OrHigher = 
  reactNativeVersion.major > 0 || 
  (reactNativeVersion.major === 0 && reactNativeVersion.minor >= 72);

Mac Catalyst Detection

import { Platform } from 'react-native';

if (Platform.OS === 'ios' && Platform.isMacCatalyst) {
  console.log('Running on Mac via Catalyst');
  // Adjust UI for desktop environment
}

Testing Mode Detection

import { Platform } from 'react-native';

if (Platform.isTesting) {
  console.log('Running in test mode');
  // Skip animations, use mock data, etc.
}

if (Platform.isDisableAnimations) {
  console.log('Animations disabled');
  // Use instant transitions instead of animations
}

Platform-Specific Styles Pattern

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Platform.select({
      ios: 20,
      android: 0,
    }),
  },
  shadow: Platform.select({
    ios: {
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.25,
      shadowRadius: 3.84,
    },
    android: {
      elevation: 5,
    },
  }),
});

Best Practices

Use platform-specific file extensions (.ios.js, .android.js) for components with significantly different implementations instead of cluttering code with conditionals.

The Platform.select() method is preferred over if/else statements for cleaner, more maintainable code.

Don’t over-use platform checks. Try to write cross-platform code whenever possible and only add platform-specific code when necessary.

Common Patterns

Safe Imports

import { Platform } from 'react-native';

let NativeModule;

if (Platform.OS === 'android') {
  NativeModule = require('./NativeModule.android').default;
} else {
  NativeModule = require('./NativeModule.ios').default;
}

Platform-Aware Constants

import { Platform } from 'react-native';

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

export const IS_SMALL_DEVICE = Platform.select({
  ios: Platform.constants.interfaceIdiom === 'phone',
  android: true, // Requires custom logic
});

​Import

​Properties

​OS

​Version

​constants

​isPad (iOS only)

​isTV

​isVision (iOS only)

​isTesting

​isDisableAnimations

​isMacCatalyst (iOS only)

​Methods

​select()

​Examples

​Basic Platform Detection

​Conditional Rendering

​Using Platform.select()

​Platform-Specific Components

​Platform-Specific Code

​Android Version Check

​Device Type Detection

​Platform-Specific File Extensions

​Platform-Specific Props

​React Native Version Check

​Mac Catalyst Detection

​Testing Mode Detection

​Platform-Specific Styles Pattern

​Best Practices

​Common Patterns

​Safe Imports

​Platform-Aware Constants

Import

Properties

OS

Version

constants

isPad (iOS only)

isTV

isVision (iOS only)

isTesting

isDisableAnimations

isMacCatalyst (iOS only)

Methods

select()

Examples

Basic Platform Detection

Conditional Rendering

Using Platform.select()

Platform-Specific Components

Platform-Specific Code

Android Version Check

Device Type Detection

Platform-Specific File Extensions

Platform-Specific Props

React Native Version Check

Mac Catalyst Detection

Testing Mode Detection

Platform-Specific Styles Pattern

Best Practices

Common Patterns

Safe Imports

Platform-Aware Constants