How to Use Platform Specific Style in React Native

In React Native, use the Platform module to detect the device OS and apply platform specific styles conditionally. You can also use Platform.select() inside your StyleSheet.create() to define styles for iOS and Android separately.

Syntax

React Native provides the Platform module to detect the current OS. You can use Platform.OS to check if the app runs on 'ios' or 'android'. The Platform.select() method helps define styles for each platform in one place.

• Platform.OS: Returns 'ios' or 'android'.
• Platform.select({ ios: ..., android: ... }): Returns the value for the current platform.

javascript

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

const styles = StyleSheet.create({
  container: {
    ...Platform.select({
      ios: { backgroundColor: 'blue' },
      android: { backgroundColor: 'green' },
    }),
    padding: 10,
  },
});

Example

This example shows a simple React Native component that uses platform specific styles to set different background colors on iOS and Android.

javascript

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Platform Specific Style</Text>
      <Text style={styles.platformText}>Running on {Platform.OS}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    ...Platform.select({
      ios: { backgroundColor: '#007AFF' },
      android: { backgroundColor: '#3DDC84' },
    }),
  },
  text: {
    fontSize: 24,
    color: 'white',
    marginBottom: 10,
  },
  platformText: {
    fontSize: 16,
    color: 'white',
  },
});

Output

A full screen view with a blue background on iOS or green background on Android, showing white text "Platform Specific Style" and below it "Running on ios" or "Running on android" depending on the device.

Common Pitfalls

Common mistakes when using platform specific styles include:

• Forgetting to import the Platform module.
• Using string comparisons like if (Platform.OS === 'ios') without considering other platforms like web or windows.
• Not using Platform.select() which makes code cleaner and easier to maintain.
• Placing platform logic outside of styles, making the code harder to read.

javascript

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

// Wrong: Repeating styles and no Platform.select
const stylesWrong = StyleSheet.create({
  container: {
    padding: 10,
    backgroundColor: Platform.OS === 'ios' ? 'blue' : 'green',
  },
});

// Right: Using Platform.select for clarity
const stylesRight = StyleSheet.create({
  container: {
    padding: 10,
    ...Platform.select({ ios: { backgroundColor: 'blue' }, android: { backgroundColor: 'green' } }),
  },
});

Quick Reference

Use this quick guide to apply platform specific styles:

Feature	Usage	Description
Platform.OS	Platform.OS === 'ios'	Check current platform as string
Platform.select()	Platform.select({ ios: {...}, android: {...} })	Choose styles or values per platform
Conditional styles	{ backgroundColor: Platform.OS === 'ios' ? 'blue' : 'green' }	Simple inline conditional style
Import	import { Platform } from 'react-native';	Required to use platform detection

Key Takeaways

Use the Platform module to detect the device OS in React Native.

Prefer Platform.select() inside StyleSheet for clean platform specific styles.

Always import Platform from 'react-native' before using it.

Avoid complex platform checks outside styles to keep code readable.

Test your styles on both iOS and Android devices or simulators.