Platform APIs

Platform APIs in React Native: Your App’s Superpower Toolkit

Analogy: Imagine your app is a superhero visiting different planets (iOS and Android). Platform APIs are your utility belt — special gadgets that help you communicate with each planet’s citizens, change your costume based on the environment, and perform planet-specific tricks!

The Story Begins: Why Platform APIs Matter

Picture this: You’re building an app that needs to work on both iPhones and Android phones. But here’s the thing — these devices speak different languages and have different customs!

Platform APIs are your translator and adapter — they help your app:

• Talk to users through alerts
• Dress appropriately for each device
• Adapt to light and dark themes
• Copy and paste like a pro

Let’s explore each superpower in your toolkit!

1. Alert API: Your App’s Megaphone

What Is It?

The Alert API is like a polite tap on the shoulder — it shows a popup message to grab the user’s attention.

Simple Example

import { Alert } from 'react-native';

// Basic alert - just a message
Alert.alert('Hello!', 'Welcome to our app!');

// Alert with buttons
Alert.alert(
  'Delete Photo?',
  'This cannot be undone',
  [
    { text: 'Cancel', style: 'cancel' },
    { text: 'Delete', style: 'destructive' }
  ]
);

Real Life Use

• Confirming before deleting something
• Showing error messages
• Asking “Are you sure you want to logout?”

graph TD
    A["User Action"] --> B["Alert.alert"]
    B --> C["Show Popup"]
    C --> D{User Choice}
    D -->|Cancel| E["Do Nothing"]
    D -->|Confirm| F["Execute Action"]

2. Platform Module: The Identity Card

What Is It?

The Platform module tells your app which planet it’s on — iOS or Android!

Simple Example

import { Platform } from 'react-native';

// Check which platform
console.log(Platform.OS); // 'ios' or 'android'

// Check version
console.log(Platform.Version);
// iOS: '14.0' | Android: 30

// Quick conditional
const message = Platform.OS === 'ios'
  ? 'Hello iPhone!'
  : 'Hello Android!';

The select() Helper

const fontSize = Platform.select({
  ios: 17,
  android: 16,
  default: 16
});

3. Platform-Specific Code: Two Costumes, One Hero

What Is It?

Sometimes you need completely different code for each platform. React Native has a clever trick!

Method 1: File Extensions

Create two files with special names:

Button.ios.js    ← Used on iPhone
Button.android.js ← Used on Android

Then import normally:

import Button from './Button';
// React Native picks the right file!

Method 2: Platform.select for Components

const MyIcon = Platform.select({
  ios: () => require('./MyIcon.ios'),
  android: () => require('./MyIcon.android')
})();

graph TD
    A["Import Component"] --> B{Which Platform?}
    B -->|iOS| C["Load .ios.js file"]
    B -->|Android| D["Load .android.js file"]
    C --> E["Render Component"]
    D --> E

4. Platform-Specific Styles: Dress for Success

What Is It?

Each platform has different design expectations. Platform-specific styles help your app look native everywhere!

Simple Example

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

const styles = StyleSheet.create({
  header: {
    paddingTop: Platform.OS === 'ios' ? 44 : 0,
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.25,
      },
      android: {
        elevation: 4,
      },
    }),
  },
});

Why Different?

5. Appearance API: Light vs Dark Detective

What Is It?

The Appearance API discovers whether the user’s phone is in light mode or dark mode.

Simple Example

import { Appearance } from 'react-native';

// Get current color scheme
const colorScheme = Appearance.getColorScheme();
// Returns: 'light' | 'dark' | null

console.log(`User prefers: ${colorScheme} mode`);

When to Use

• Setting initial theme when app loads
• Checking preference at specific moments

6. useColorScheme Hook: The Theme Watcher

What Is It?

This React hook automatically updates when the user switches between light and dark mode. It’s like having a lookout!

Simple Example

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

function MyScreen() {
  const colorScheme = useColorScheme();

  const backgroundColor =
    colorScheme === 'dark' ? '#1a1a1a' : '#ffffff';
  const textColor =
    colorScheme === 'dark' ? '#ffffff' : '#000000';

  return (
    <View style={{ backgroundColor }}>
      <Text style={{ color: textColor }}>
        Current theme: {colorScheme}
      </Text>
    </View>
  );
}

graph TD
    A["User Changes Theme"] --> B["System Notifies App"]
    B --> C["useColorScheme Updates"]
    C --> D["Component Re-renders"]
    D --> E["New Colors Applied!"]

7. Appearance Change Listener: The Alert System

What Is It?

This listener sounds the alarm the moment the user changes their theme preference!

Simple Example

import { Appearance } from 'react-native';

// Set up the listener
const subscription = Appearance.addChangeListener(
  ({ colorScheme }) => {
    console.log('Theme changed to:', colorScheme);
    // Update your app's theme here!
  }
);

// Later: clean up when done
subscription.remove();

Complete Pattern

import { useEffect } from 'react';
import { Appearance } from 'react-native';

function App() {
  useEffect(() => {
    const subscription = Appearance.addChangeListener(
      ({ colorScheme }) => {
        // Handle theme change
      }
    );

    // Cleanup on unmount
    return () => subscription.remove();
  }, []);

  return <MyApp />;
}

8. Clipboard API: Copy-Paste Magic

What Is It?

The Clipboard API lets your app copy text to and paste text from the device clipboard — just like when you copy a link!

Installation

npm install @react-native-clipboard/clipboard

Simple Example

import Clipboard from '@react-native-clipboard/clipboard';

// Copy text to clipboard
const copyToClipboard = () => {
  Clipboard.setString('Hello, World!');
  Alert.alert('Copied!', 'Text saved to clipboard');
};

// Paste from clipboard
const pasteFromClipboard = async () => {
  const text = await Clipboard.getString();
  console.log('Pasted:', text);
};

Real World Uses

• “Copy referral code” button
• “Share this link” feature
• Pasting saved passwords

graph TD
    A["User Taps Copy"] --> B["Clipboard.setString"]
    B --> C["Text in Clipboard"]
    C --> D["User Goes to Another App"]
    D --> E["Pastes Text There!"]

Putting It All Together: A Complete Example

Here’s a mini-app using ALL the Platform APIs:

import React, { useEffect } from 'react';
import {
  View, Text, Button, Platform,
  Alert, Appearance, useColorScheme,
  StyleSheet
} from 'react-native';
import Clipboard from '@react-native-clipboard/clipboard';

function PlatformDemo() {
  const colorScheme = useColorScheme();
  const isDark = colorScheme === 'dark';

  // Listen for theme changes
  useEffect(() => {
    const sub = Appearance.addChangeListener(({ colorScheme }) => {
      Alert.alert('Theme Changed!', `Now using ${colorScheme} mode`);
    });
    return () => sub.remove();
  }, []);

  const handleCopy = () => {
    Clipboard.setString(`Running on ${Platform.OS}!`);
    Alert.alert('Copied!', 'Platform info saved');
  };

  return (
    <View style={[styles.container, isDark && styles.dark]}>
      <Text style={[styles.text, isDark && styles.lightText]}>
        Platform: {Platform.OS}
      </Text>
      <Text style={[styles.text, isDark && styles.lightText]}>
        Version: {Platform.Version}
      </Text>
      <Text style={[styles.text, isDark && styles.lightText]}>
        Theme: {colorScheme}
      </Text>
      <Button title="Copy Platform Info" onPress={handleCopy} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  dark: { backgroundColor: '#1a1a1a' },
  text: { fontSize: 18, marginBottom: 10 },
  lightText: { color: '#fff' },
});

Quick Reference Table

You Did It!

You now have a complete understanding of Platform APIs in React Native. Your app can:

• Communicate with users through alerts
• Identify which platform it’s running on
• Adapt its code and styles to each platform
• Detect and respond to light/dark theme changes
• Copy and paste text like a pro

Remember: These APIs are your app’s utility belt. Use them wisely, and your app will feel right at home on any device!

Pro Tip: Always clean up listeners when components unmount. It’s like turning off the lights when you leave a room — good manners for your app’s memory!