Codecademy Logo

Platform-Specific Considerations

Related learning

  • Free course

    Learn React Native

    Build mobile apps with TypeScript and React, using Expo and React Native
    • Intermediate.
      12 hours

Platform in React Native

The Platform module in React Native allows the developer to determine the operating system the application is running on. This module is used for implementing OS-specific functionality, such as styles or actions, in small code segments.

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


const styles = StyleSheet.create({
  height: Platform.OS === 'android' ? 200 : 100,
});

Platform-Specific Module Resolution in React Native

React Native leverages its module resolution system to load platform-specific files. React Native automatically picks the appropriate file based on the operating system using platform-specific file extensions such as Component.ios.tsx or Component.android.tsx. This ensures that whenever <Component> is called, the appropriate version is used depending on the platform.

For example:

Button/
├── Button.ios.tsx
└── Button.android.tsx


import Button from './components/Button/Button';  // Module resolution will know which one to use

React Native Platform.OS

The Platform.OS in React Native identifies the operating system—ios, android, macos, windows, web, or native—that the applicatonn is running on. This is useful for conditional rendering and platform-specific logic in small code sections.

import { Platform } from 'react-native';


const platform = Platform.OS;
console.log(`App is running on: ${platform}`);


if (platform === 'ios') {
  console.log("We're on iOS!");
} else if (platform === 'android') {
  console.log("We're on Android!");
} else if (platform === 'web') {
  console.log("We're on web!");
}

React Native Platform Select

Platform.select() allows defining platform-specific values using an object with keys like ios, android, web, native, and default. It automatically returns the value that matches the current platform, making it perfect for conditional styling, components, or logic across different devices.

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


const backgroundColor = Platform.select({
  ios: 'blue',
  android: 'green',
  default: 'grey', // for other platforms like web, windows, etc.
});


const MyComponent = () => (
  <View style={{ backgroundColor }}>
    <Text>Hello, Platform!</Text>
  </View>
);

React Native Platform-Specific Files

React Native supports platform-specific file extensions like .ios.ts and .android.ts. When a component requires unique platform behavior, files can be split into versions specific to iOS and Android. React Native automatically selects the appropriate file based on the platform during runtime. For instance, when importing BigButton, React Native uses BigButton.ios.ts or BigButton.android.ts depending on the device.

import BigButton from './BigButton'; // Automatically picks platform-specific file


// Usage example:
<BigButton />; // Will render iOS or Android version accordingly.

iOS vs Android Native UI

When designing native UIs for iOS and Android, several styling differences become apparent. iOS favors a minimalistic approach with the “Human Design Guidelines”: smaller fonts, subtle shadows, and rounder corners. Android, influenced by Material Design, leverages vibrant colors, bold typography, and distinct shadows to convey depth. Understanding these differences is crucial for creating applications that have a native look and feel.

Platform-Specific Component Styling

React Native’s core components automatically match platform appearance, but custom components and third-party libraries only provide functionality without platform styling.

To create native-looking apps, developers must implement platform-specific styling using separate files like Component.ios.tsx and Component.android.tsx, Platform.OS for conditional styling, or Platform.select() for platform-specific values.

This matters because while React Native handles functionality, visual appearance requires deliberate styling to match each platform’s design patterns.

Application Safe Areas in React Native

Safe areas define screen regions free from hardware obstructions like notches, rounded corners, and home indicators. By positioning content within these safe boundaries, developers ensure the user interface remains fully visible and accessible across all device types and orientations.

Using safe areas prevents layout disruption and maintains a consistent user experience regardless of device-specific screen variations.

<SafeAreaView> in React Native

The <SafeAreaView> component wraps content to ensure it renders within the device’s safe zones, automatically adding padding to avoid hardware obstructions like notches, rounded corners, and system indicators. This prevents content from being hidden or cut off, maintaining proper visibility and accessibility across different device types and screen configurations without requiring device-specific adjustments.

import React from 'react';
import { SafeAreaView, Text } from 'react-native';


const SafeAreaExample = () => {
  return (
    <SafeAreaView>
      <Text>Content is within SafeArea!</Text>
    </SafeAreaView>
  );
};


export default SafeAreaExample;

Tracking App State in React Native

The AppState API tracks the application’s lifecycle state, whether it’s active (foreground and focused), inactive (transitioning or interrupted), or in the background. It can be used to check the current state with AppState.currentState and monitor state changes with addEventListener(). This enables triggering appropriate actions like pausing media playback, saving data, or stopping location tracking when the app loses focus, ensuring optimal performance and user experience across state transitions.

import React, { useEffect } from 'react';
import { AppState, Text } from 'react-native';


const AppStateExample = () => {
  useEffect(() => {
    const handleAppStateChange = (nextAppState: string) => {
      if (AppState.currentState === 'background' && nextAppState === 'active') {
        console.log('App returned to foreground!');
      }
    };


    const subscription = AppState.addEventListener('change', handleAppStateChange);


    return () => subscription?.remove();
  }, []);


  return <Text>Monitoring app state changes</Text>;
};


export default AppStateExample;

Safe Areas across Platforms

iOS and Android devices implement safe areas differently due to distinct hardware and design approaches. iOS devices feature notches, Dynamic Island, or rounded corners that create specific safe zone requirements, while Android devices use various navigation bar styles, punch-hole cameras, curved edges, and different status bar treatments.

These platform-specific variations mean safe area implementations must account for each operating system’s unique screen characteristics to ensure consistent UI positioning and visibility across different device types and manufacturers.

Learn more on Codecademy

  • Free course

    Learn React Native

    Build mobile apps with TypeScript and React, using Expo and React Native
    • Intermediate.
      12 hours
Previous