Skip to main content
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);
​
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
});

Build docs developers (and LLMs) love

Get started for freeTalk to us