← Back to Chapters

Platform-Specific Styling in React Native

? Platform-Specific Styling in React Native

✨ Quick Overview

React Native allows you to write a single codebase for both Android and iOS. However, some UI styles and behaviors need to change depending on the platform. Platform-specific styling helps you customize appearance and behavior for Android, iOS, and Web while keeping code clean and maintainable.

? Key Concepts

  • Using Platform.OS to detect the platform
  • Applying conditional styles for Android and iOS
  • Using Platform.select() for cleaner styling
  • Handling platform-specific fonts, shadows, and spacing

? Syntax / Theory

React Native exposes a built-in Platform module that tells you which platform your app is running on. You can use it inside JavaScript logic or directly inside styles.

? View Code Example 
// Import Platform module from react-native
import { Platform } from "react-native";

// Check current operating system
if (Platform.OS === "android") {
console.log("Running on Android");
} else if (Platform.OS === "ios") {
console.log("Running on iOS");
}

? Code Example(s)

? View Code Example 
// Platform-specific styles using conditional logic
import { StyleSheet, Platform } from "react-native";

const styles = StyleSheet.create({
container: {
padding: Platform.OS === "android" ? 16 : 20,
backgroundColor: Platform.OS === "ios" ? "#f1f5f9" : "#e5e7eb"
}
});

export default styles;

? Live Output / Explanation

What Happens?

On Android devices, the container gets slightly less padding and a different background color. On iOS, padding is larger to match Apple’s design guidelines. This ensures the UI feels native on both platforms.

? Interactive Example

Toggle the switch below to simulate how Platform.select() changes the appearance of a component. Observe how the Shadow, Radius, and Button Style adapt.

Card Component
// Active Styles (Simulated)
...Platform.select({
  ios: {
    shadowOpacity: 0.15,
    borderRadius: 16,
    btnColor: "#007AFF"
  }
})
? View Code Implementation 
// Cleaner platform-specific styles using Platform.select
import { StyleSheet, Platform } from "react-native";

const styles = StyleSheet.create({
card: {
backgroundColor: 'white',
padding: 20,
...Platform.select({
ios: {
  shadowColor: '#000',
  shadowOffset: { width: 0, height: 10 },
  shadowOpacity: 0.15,
  borderRadius: 16,
},
android: {
  elevation: 5,
  borderRadius: 4,
  borderWidth: 1,
  borderColor: '#ddd'
}
})
}
});

? Use Cases

  • Different shadow styles for Android and iOS
  • Custom fonts based on platform support
  • Adjusting padding and spacing for platform UI guidelines
  • Handling platform-specific bugs or limitations

✅ Tips & Best Practices

  • Prefer Platform.select() for cleaner style definitions
  • Keep platform-specific code minimal and well-documented
  • Test UI on real Android and iOS devices
  • Avoid deep conditional nesting in styles

? Try It Yourself

  1. Create a button with different colors on Android and iOS
  2. Change font size based on platform
  3. Add platform-specific shadows for a card component
  4. Log the current platform and test on an emulator