Platform-Specific Styling

Learn how to apply platform-specific styles and components to create native-feeling interfaces on both iOS and Android. This is a foundational concept in cross-platform mobile development that professional developers rely on daily. The explanations below are written to be beginner-friendly while covering the depth and nuance that comes from real-world React Native experience. Take your time with each section and practice the examples

30 min•By Priygop Team•Last updated: Feb 2026

Platform Detection

Use Platform.OS to detect the current platform and apply different styles or components based on whether the app is running on iOS or Android.. This is an essential concept that every React Native developer must understand thoroughly. In professional development environments, getting this right can mean the difference between code that works reliably and code that breaks in production. The following sections break this down into clear, digestible pieces with practical examples you can try immediately

Platform-Specific Styles

Create platform-specific styles using Platform.select() to provide different style objects for iOS and Android, ensuring your app feels native on each platform.. This is an essential concept that every React Native developer must understand thoroughly. In professional development environments, getting this right can mean the difference between code that works reliably and code that breaks in production. The following sections break this down into clear, digestible pieces with practical examples you can try immediately

Platform-Specific Components

Use Platform.select() to render different components for iOS and Android, such as different navigation patterns, button styles, or input components.. This is an essential concept that every React Native developer must understand thoroughly. In professional development environments, getting this right can mean the difference between code that works reliably and code that breaks in production. The following sections break this down into clear, digestible pieces with practical examples you can try immediately

Platform-Specific Styling Example

Example

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

const PlatformSpecificExample = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Platform-Specific Styling</Text>
      
      <View style={styles.buttonContainer}>
        <Text style={styles.buttonText}>
          {Platform.OS === 'ios' ? 'iOS Button' : 'Android Button'}
        </Text>
      </View>
      
      <Text style={styles.description}>
        This text has different styling on iOS and Android
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: Platform.OS === 'ios' ? '#F2F2F7' : '#FAFAFA',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 30,
    color: Platform.OS === 'ios' ? '#000' : '#333',
  },
  buttonContainer: {
    backgroundColor: Platform.select({
      ios: '#007AFF',
      android: '#2196F3',
    }),
    paddingHorizontal: 20,
    paddingVertical: 12,
    borderRadius: Platform.OS === 'ios' ? 8 : 4,
    marginBottom: 20,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: Platform.OS === 'ios' ? '600' : '500',
  },
  description: {
    fontSize: 16,
    textAlign: 'center',
    color: Platform.select({
      ios: '#8E8E93',
      android: '#757575',
    }),
    fontFamily: Platform.select({
      ios: 'System',
      android: 'Roboto',
    }),
  },
});

export default PlatformSpecificExample;

Try It Yourself — Core Components & Styling

Try It Yourself — Core Components & StylingHTML

HTML Editor

✓ ValidTab = 2 spaces

<!DOCTYPE html>
<html><head><style>
  body { font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; }
  .phone { background: #1a1a2e; padding: 30px 20px; border-radius: 24px; max-width: 360px; margin: auto; color: white; min-height: 400px; }
  h1 { color: #61DAFB; font-size: 20px; }
  button { background: #61DAFB; color: #1a1a2e; border: none; padding: 10px 20px; border-radius: 8px; font-weight: bold; cursor: pointer; margin: 5px; width: 100%; }
  .card { background: #16213e; padding: 15px; border-radius: 12px; margin: 10px 0; }
  .output { font-family: monospace; color: #4ec9b0; margin-top: 10px; font-size: 13px; }
</style></head><body>
<div class="phone">
  <h1>📱 React Native Module 2</h1>
  <div class="card"><p>Simulating mobile app components</p></div>
  <button onclick="navigate('Home')">Home Screen</button>
  <button onclick="navigate('Profile')">Profile Screen</button>
  <button onclick="navigate('Settings')">Settings Screen</button>
  <div class="card output" id="output">Tap a button to navigate...</div>
</div>
<script>
  let history = [];
  function navigate(screen) {
    history.push(screen);
    document.getElementById('output').textContent = 'Screen: ' + screen + '
History: ' + history.join(' > ');
  }
</script>
</body></html>

<!DOCTYPE html>
<html><head><style>
  body { font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; }
  .phone { background: #1a1a2e; padding: 30px 20px; border-radius: 24px; max-width: 360px; margin: auto; color: white; min-height: 400px; }
  h1 { color: #61DAFB; font-size: 20px; }
  button { background: #61DAFB; color: #1a1a2e; border: none; padding: 10px 20px; border-radius: 8px; font-weight: bold; cursor: pointer; margin: 5px; width: 100%; }
  .card { background: #16213e; padding: 15px; border-radius: 12px; margin: 10px 0; }
  .output { font-family: monospace; color: #4ec9b0; margin-top: 10px; font-size: 13px; }
</style></head><body>
<div class="phone">
  <h1>📱 React Native Module 2</h1>
  <div class="card"><p>Simulating mobile app components</p></div>
  <button onclick="navigate('Home')">Home Screen</button>
  <button onclick="navigate('Profile')">Profile Screen</button>
  <button onclick="navigate('Settings')">Settings Screen</button>
  <div class="card output" id="output">Tap a button to navigate...</div>
</div>
<script>
  let history = [];
  function navigate(screen) {
    history.push(screen);
    document.getElementById('output').textContent = 'Screen: ' + screen + '
History: ' + history.join(' > ');
  }
</script>
</body></html>

Result

Click ▶ Run to see the result

Edit the code on the left, then click Run

HTML|26 lines|1272 chars|✓ Valid syntax

UTF-8

Quick Quiz — Core Components & Styling

Next Module →

Platform-Specific Styling

30 min•By Priygop Team•Last updated: Feb 2026

Platform Detection

Platform-Specific Styles

Platform-Specific Components

Platform-Specific Styling Example

Example

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

const PlatformSpecificExample = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Platform-Specific Styling</Text>
      
      <View style={styles.buttonContainer}>
        <Text style={styles.buttonText}>
          {Platform.OS === 'ios' ? 'iOS Button' : 'Android Button'}
        </Text>
      </View>
      
      <Text style={styles.description}>
        This text has different styling on iOS and Android
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: Platform.OS === 'ios' ? '#F2F2F7' : '#FAFAFA',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 30,
    color: Platform.OS === 'ios' ? '#000' : '#333',
  },
  buttonContainer: {
    backgroundColor: Platform.select({
      ios: '#007AFF',
      android: '#2196F3',
    }),
    paddingHorizontal: 20,
    paddingVertical: 12,
    borderRadius: Platform.OS === 'ios' ? 8 : 4,
    marginBottom: 20,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: Platform.OS === 'ios' ? '600' : '500',
  },
  description: {
    fontSize: 16,
    textAlign: 'center',
    color: Platform.select({
      ios: '#8E8E93',
      android: '#757575',
    }),
    fontFamily: Platform.select({
      ios: 'System',
      android: 'Roboto',
    }),
  },
});

export default PlatformSpecificExample;

Try It Yourself — Core Components & Styling

Try It Yourself — Core Components & StylingHTML

HTML Editor

✓ ValidTab = 2 spaces

<!DOCTYPE html>
<html><head><style>
  body { font-family: Arial, sans-serif; padding: 20px; background: #f5f5f5; }
  .phone { background: #1a1a2e; padding: 30px 20px; border-radius: 24px; max-width: 360px; margin: auto; color: white; min-height: 400px; }
  h1 { color: #61DAFB; font-size: 20px; }
  button { background: #61DAFB; color: #1a1a2e; border: none; padding: 10px 20px; border-radius: 8px; font-weight: bold; cursor: pointer; margin: 5px; width: 100%; }
  .card { background: #16213e; padding: 15px; border-radius: 12px; margin: 10px 0; }
  .output { font-family: monospace; color: #4ec9b0; margin-top: 10px; font-size: 13px; }
</style></head><body>
<div class="phone">
  <h1>📱 React Native Module 2</h1>
  <div class="card"><p>Simulating mobile app components</p></div>
  <button onclick="navigate('Home')">Home Screen</button>
  <button onclick="navigate('Profile')">Profile Screen</button>
  <button onclick="navigate('Settings')">Settings Screen</button>
  <div class="card output" id="output">Tap a button to navigate...</div>
</div>
<script>
  let history = [];
  function navigate(screen) {
    history.push(screen);
    document.getElementById('output').textContent = 'Screen: ' + screen + '
History: ' + history.join(' > ');
  }
</script>
</body></html>

Result

Click ▶ Run to see the result

Edit the code on the left, then click Run

HTML|26 lines|1272 chars|✓ Valid syntax

UTF-8

Platform-Specific Styling

Platform Detection

Platform-Specific Styles

Platform-Specific Components

Platform-Specific Styling Example

Try It Yourself — Core Components & Styling

Quick Quiz — Core Components & Styling

Topics in This Module

Platform-Specific Styling

Platform Detection

Platform-Specific Styles

Platform-Specific Components

Platform-Specific Styling Example

Try It Yourself — Core Components & Styling

Quick Quiz — Core Components & Styling

Topics in This Module