Understanding Platform-Specific Components and APIs in React Native

Course: React Native Training

Topic: Understanding Platform-Specific Components and APIs

Course Link: React Native Training Course

Demo Link: Register for a Free Course Demo

Training Institute: JustAcademy

1. Introduction to Platform-Specific Components and APIs

React Native allows developers to build mobile applications for Android and iOS using JavaScript or TypeScript and a shared codebase. However, Android and iOS have different operating-system features, user-interface conventions, permissions, navigation patterns, and native APIs.

Platform-specific development means adjusting a component, style, behavior, or API implementation to suit the operating system on which the application runs. React Native provides tools such as the Platform module, Platform.select(), and platform-specific file extensions to support these differences.

1.1 What Are Platform-Specific Components?

Platform-specific components are user-interface elements whose appearance or behavior differs depending on the operating system. A shared component may be sufficient for most screens, while a particular screen or control may require a separate Android or iOS implementation.

Examples include:

• Different navigation headers or back-button behavior.
• Platform-specific shadows and elevation.
• Different date and time picker implementations.
• Permission flows for the camera, location, and notifications.
• Native sharing, haptic feedback, and status-bar behavior.
• Platform-specific keyboard and safe-area handling.

1.2 What Are Platform-Specific APIs?

Platform-specific APIs are interfaces that allow an application to access operating-system features. Some APIs are available through React Native itself, while others require a separate library or native module.

For example, the Platform module identifies the current platform, while a camera library may provide access to the device camera after the appropriate permissions are granted.

1.3 Learning Objectives

• Understand differences between Android and iOS development.
• Use Platform.OS to identify the current platform.
• Use Platform.select() for platform-dependent values and styles.
• Organize code with .android.js and .ios.js file extensions.
• Understand platform-specific UI components and APIs.
• Handle permissions and native feature availability safely.
• Test platform-specific behavior on Android and iOS.

2. Understanding Android and iOS Differences

Although React Native shares much of the application code, the underlying operating systems remain different. Developers must understand these differences before deciding which parts of the code should be shared and which should be platform-specific.

Important: These are general differences rather than absolute rules. The appropriate implementation depends on the application design, React Native version, operating-system version, and libraries being used.

3. Introduction to the Platform Module

The Platform module is built into React Native. It helps developers identify the current operating system and select appropriate values or implementations.

3.1 Importing the Platform Module

import { Platform } from 'react-native';

After importing the module, you can use properties such as Platform.OS and Platform.Version, as well as the Platform.select() method.

3.2 Understanding Platform.OS

Platform.OS returns a string identifying the operating system. In standard React Native Android and iOS applications, its value is typically either "android" or "ios". Other platforms provided by additional React Native implementations may expose other values.

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

export default function PlatformInfo() {
  return (
    <View>
      <Text>Current platform: {Platform.OS}</Text>
    </View>
  );
}

Explanation:

• Platform.OS checks the platform on which the application is running.
• The Text component displays the detected value.
• The same component can run on both Android and iOS.

3.3 Using Conditional Logic with Platform.OS

Use conditional logic when a small part of the component needs different behavior on different platforms.

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

export default function WelcomeMessage() {
  let message = 'Welcome to the application';

  if (Platform.OS === 'android') {
    message = 'Welcome to the Android application';
  } else if (Platform.OS === 'ios') {
    message = 'Welcome to the iOS application';
  }

  return (
    <View>
      <Text>{message}</Text>
    </View>
  );
}

This example demonstrates a basic platform check. Use conditional logic sparingly so the component remains easy to read and maintain.

3.4 When Should You Use Platform.OS?

• When changing a small part of the user interface.
• When applying a platform-dependent style or value.
• When selecting a supported implementation for a small feature.
• When adjusting behavior based on a known platform difference.

4. Using Platform.select()

Platform.select() chooses a value based on the current platform. It is useful when selecting styles, labels, configuration values, or component implementations without writing multiple conditional statements.

4.1 Basic Syntax

Platform.select({
  ios: valueForIOS,
  android: valueForAndroid,
  native: valueForNative,
  default: fallbackValue
});

The method checks for the current platform's matching key first. If no matching key is available, it can use the native or default fallback, as appropriate. The native key can be useful for shared native platforms, while default provides a general fallback.

4.2 Selecting Platform-Specific Text

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

export default function PlatformGreeting() {
  const greeting = Platform.select({
    ios: 'Hello, iOS user!',
    android: 'Hello, Android user!',
    default: 'Hello, user!'
  });

  return (
    <View>
      <Text>{greeting}</Text>
    </View>
  );
}

4.3 Platform-Specific Styling

Platform.select() is particularly useful when a shared component needs different visual properties on Android and iOS.

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

export default function PlatformCard() {
  return (
    <View style={styles.card}>
      <Text>Platform-aware card</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    padding: 20,
    margin: 16,
    borderRadius: 12,
    backgroundColor: '#FFFFFF',
    ...Platform.select({
      ios: {
        shadowColor: '#000000',
        shadowOffset: { width: 0, height: 3 },
        shadowOpacity: 0.15,
        shadowRadius: 5
      },
      android: {
        elevation: 4
      },
      default: {}
    })
  }
});

Explanation:

• Common properties such as padding and borderRadius are shared.
• iOS receives shadow-related properties.
• Android receives elevation.
• The default object provides a fallback for other supported environments.

4.4 Selecting a Component Implementation

Platform.select() can also return a component or a component reference. For example, an application might use different header implementations for iOS and Android.

import { Platform } from 'react-native';
import IOSHeader from './IOSHeader';
import AndroidHeader from './AndroidHeader';
import DefaultHeader from './DefaultHeader';

const Header = Platform.select({
  ios: IOSHeader,
  android: AndroidHeader,
  default: DefaultHeader
});

export default Header;

In this example, the selected component can be rendered elsewhere using <Header />. All imported files must exist, and the selected implementations should follow a compatible component interface.

4.5 Platform.OS vs Platform.select()

5. Platform-Specific File Extensions

When a component requires significantly different implementations for Android and iOS, separate files can be easier to maintain than a large collection of conditional statements. React Native's bundler, Metro, can resolve platform-specific file extensions automatically.

5.1 Common File Naming Conventions

src/
  components/
    CustomButton.android.js
    CustomButton.ios.js
    CustomButton.js
  screens/
    HomeScreen.js

When both platform-specific files are present, an ordinary import such as import CustomButton from './components/CustomButton'; can resolve to the matching implementation for the current platform. A generic fallback file may be useful where the project requires one, but its exact role depends on the available files and bundler configuration.

5.2 Creating an Android Component

File: CustomButton.android.js

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

export default function CustomButton({ title, onPress }) {
  return (
    <Pressable style={styles.button} onPress={onPress}>
      <Text style={styles.text}>{title}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#1565C0',
    padding: 14,
    borderRadius: 6,
    elevation: 3
  },
  text: {
    color: '#FFFFFF',
    textAlign: 'center',
    fontWeight: '600'
  }
});

5.3 Creating an iOS Component

File: CustomButton.ios.js

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

export default function CustomButton({ title, onPress }) {
  return (
    <Pressable style={styles.button} onPress={onPress}>
      <Text style={styles.text}>{title}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#1565C0',
    padding: 14,
    borderRadius: 12,
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.15,
    shadowRadius: 3
  },
  text: {
    color: '#FFFFFF',
    textAlign: 'center',
    fontWeight: '600'
  }
});

5.4 Using the Platform-Specific Component

File: HomeScreen.js

import React from 'react';
import { View, Alert } from 'react-native';
import CustomButton from '../components/CustomButton';

export default function HomeScreen() {
  return (
    <View>
      <CustomButton
        title="Continue"
        onPress={() => Alert.alert('Continue', 'Button pressed')}
      />
    </View>
  );
}

The importing screen does not need to know which implementation was selected. Both components accept the same props and provide the same core functionality.

5.5 Benefits of Platform-Specific Files

• Keeps complicated platform differences out of shared components.
• Makes each implementation easier to read and test.
• Allows platform-specific dependencies to remain in their relevant files.
• Helps teams work on platform-specific behavior independently.
• Supports a consistent public component interface.

5.6 When to Avoid Separate Files

Do not create separate files merely to change one color, margin, or small property. For minor differences, Platform.select() or a short Platform.OS check is generally simpler.

6. Understanding Native Components in React Native

React Native provides core components that render using native platform capabilities. These components allow developers to create cross-platform interfaces without manually writing a separate native implementation for every screen.

6.1 Understanding Platform-Specific Props

Some React Native component properties work only on certain platforms. Always check the official documentation for the component and property before using it.

For example, the elevation style property is primarily used for Android shadows. iOS generally uses properties such as shadowColor, shadowOffset, shadowOpacity, and shadowRadius.

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

const styles = StyleSheet.create({
  panel: {
    padding: 16,
    backgroundColor: '#FFFFFF',
    ...Platform.select({
      android: {
        elevation: 5
      },
      ios: {
        shadowColor: '#000000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.2,
        shadowRadius: 4
      },
      default: {}
    })
  }
});

Testing is essential because a property being accepted by JavaScript does not guarantee identical visual output on every platform.

7. Working with Platform-Specific APIs

Platform-specific APIs let an application interact with operating-system functionality. The implementation may be available through React Native core, an Expo module, a third-party React Native library, or custom native code.

7.1 Common Categories of Platform APIs

• Device APIs: Camera, microphone, location, sensors, and device information.
• System UI APIs: Status bar, navigation bar, system dialogs, and screen orientation.
• Interaction APIs: Haptic feedback, keyboard handling, and native gestures.
• Connectivity APIs: Network status and supported communication features.
• Storage APIs: Secure storage, local files, and other persistence mechanisms.
• Notifications APIs: Local notifications and push notifications.
• Sharing APIs: Native share sheets and supported file-sharing actions.

7.2 Core API vs Third-Party API vs Native Module

Before choosing an API, verify its maintenance status, supported React Native versions, platform coverage, required permissions, and installation instructions.

7.3 Using the Alert API

The Alert API displays native-style alert dialogs. The exact appearance and available behavior depend on the operating system.

import React from 'react';
import { View, Button, Alert } from 'react-native';

export default function AlertExample() {
  const showMessage = () => {
    Alert.alert(
      'Confirmation',
      'Do you want to continue?',
      [
        { text: 'Cancel', style: 'cancel' },
        {
          text: 'Continue',
          onPress: () => console.log('User continued')
        }
      ]
    );
  };

  return (
    <View>
      <Button title="Show Alert" onPress={showMessage} />
    </View>
  );
}

Use platform-specific behavior only when required. For many simple alerts, React Native's shared API is sufficient.

7.4 Using the Linking API

The Linking API opens supported URLs and can interact with external applications. A URL may open a browser, a supported app, or another system handler, depending on the device and configuration.

import React from 'react';
import { View, Button, Linking, Alert } from 'react-native';

export default function WebsiteLink() {
  const openWebsite = async () => {
    const url = 'https://www.justacademy.co/';

    try {
      await Linking.openURL(url);
    } catch (error) {
      Alert.alert('Unable to open link', 'Please try again later.');
    }
  };

  return (
    <View>
      <Button title="Visit JustAcademy" onPress={openWebsite} />
    </View>
  );
}

For externally supplied or user-generated URLs, validate the URL and restrict supported schemes as appropriate for your application.

7.5 Using the Share API

The Share API opens the platform's native sharing interface for supported content.

import React from 'react';
import { View, Button, Share } from 'react-native';

export default function ShareExample() {
  const shareContent = async () => {
    try {
      await Share.share({
        message: 'Learn React Native with JustAcademy: https://www.justacademy.co/'
      });
    } catch (error) {
      console.error('Unable to share content', error);
    }
  };

  return (
    <View>
      <Button title="Share Course" onPress={shareContent} />
    </View>
  );
}

Native sharing interfaces are not guaranteed to look or behave identically on Android and iOS. Test the experience on both platforms.

8. Handling Platform.Version

Platform.Version provides operating-system version information. Its type and meaning differ by platform: on Android it represents the Android API level, while on iOS it is a version string.

8.1 Reading the Platform Version

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

export default function VersionInfo() {
  return (
    <View>
      <Text>Platform: {Platform.OS}</Text>
      <Text>Version: {String(Platform.Version)}</Text>
    </View>
  );
}

8.2 Why Version Checks Require Care

Do not compare Platform.Version as if it had the same type and meaning on Android and iOS. An Android value such as an API level is numeric, whereas an iOS value is a version string.

If you must check the major iOS version, parse the string deliberately:

import { Platform } from 'react-native';

if (Platform.OS === 'ios') {
  const iosMajorVersion = Number.parseInt(
    String(Platform.Version),
    10
  );

  if (Number.isFinite(iosMajorVersion)) {
    console.log('iOS major version:', iosMajorVersion);
  }
}

Prefer feature detection or a library's documented capability checks when available. A version number alone does not always prove that a particular API is usable.

9. Creating a Platform-Aware UI Component

A platform-aware component keeps shared behavior together while adapting visual details to the current operating system.

9.1 Example: Platform-Aware Information Panel

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

export default function InformationPanel() {
  const platformLabel = Platform.select({
    ios: 'Designed for iOS',
    android: 'Designed for Android',
    default: 'Cross-platform interface'
  });

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Platform Information</Text>
      <Text style={styles.description}>
        {platformLabel}
      </Text>
      <Text>Detected: {Platform.OS}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
    margin: 16,
    borderRadius: 12,
    backgroundColor: '#FFFFFF',
    ...Platform.select({
      ios: {
        shadowColor: '#000000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.15,
        shadowRadius: 4
      },
      android: {
        elevation: 4
      },
      default: {}
    })
  },
  title: {
    fontSize: 20,
    fontWeight: '700',
    marginBottom: 8
  },
  description: {
    fontSize: 16,
    marginBottom: 6
  }
});

9.2 Why This Approach Works

• The component shares its layout and content structure.
• Platform.select() chooses the platform-dependent label.
• Platform-specific style properties are applied only where appropriate.
• The component remains reusable across multiple screens.

10. Handling Permissions for Platform-Specific Features

Many native APIs require permission before an application can access sensitive device capabilities. Camera, microphone, location, photos, and notifications may require platform-specific configuration and runtime authorization.

10.1 Android Permissions

Depending on the feature and Android version, an application may need a permission declaration in its Android manifest and a runtime permission request. Permission requirements differ by capability and can change across Android versions.

10.2 iOS Permissions

For protected capabilities, iOS commonly requires an appropriate usage-description key in the application's Info.plist and a runtime authorization request through the native API or library.

10.3 Permission-Handling Workflow

1. Identify the native feature required by the application.
2. Choose a library or API that supports both target platforms.
3. Read the library's installation and permission instructions.
4. Configure required Android and iOS project settings.
5. Request permission at an appropriate point in the user journey.
6. Handle granted, denied, restricted, and unavailable states where applicable.
7. Explain why the feature needs access when appropriate.
8. Test permission prompts and recovery flows on physical devices.

10.4 Permission Best Practices

• Request only the permissions needed for the feature.
• Ask when the user understands why access is needed.
• Do not assume that permission will always be granted.
• Provide a helpful message when a feature cannot be used.
• Follow current platform rules and the selected library's documentation.
• Never treat a JavaScript platform check as a replacement for actual permission handling.

11. Integrating Third-Party Libraries and Native Modules

Some features are not directly available through React Native core. A compatible library can provide the native implementation and a JavaScript or TypeScript interface.

11.1 Before Installing a Library

• Confirm Android and iOS support.
• Check compatibility with your React Native and Expo setup.
• Review required native configuration and permissions.
• Check whether the package requires a development build or native project changes.
• Read known issues, maintenance information, and migration instructions.
• Verify whether the library supports the application's architecture and build process.

11.2 General Integration Workflow

1. Identify the required native feature.
2. Select a compatible library.
3. Install the package using its documented instructions.
4. Configure Android and iOS as required.
5. Import the documented JavaScript or TypeScript API.
6. Handle permissions and unavailable states.
7. Test the feature on both platforms.
8. Document platform limitations for future maintenance.

The exact installation commands and configuration files depend on the chosen library. Avoid copying configuration from an unrelated package or an older tutorial without checking its current documentation.

11.3 When Is a Custom Native Module Needed?

A custom native module may be necessary when an application must integrate a proprietary SDK or operating-system capability that no suitable maintained library exposes.

Developers may implement native code using Kotlin or Java on Android and Swift or Objective-C on iOS, then expose the required functionality through the supported React Native native-module approach. This is an advanced task that requires knowledge of the project's native build system.

12. Platform-Specific Navigation and Interaction

Navigation and interaction conventions can differ across platforms. For example, Android applications often need to respond to system back navigation, while iOS navigation commonly includes navigation-stack controls and swipe-back gestures.

12.1 Back Navigation Considerations

• Use the navigation library's documented APIs for screen transitions.
• Handle Android system back behavior where required by the navigation setup.
• Preserve expected iOS navigation gestures where supported.
• Confirm that dialogs, forms, and unsaved changes behave correctly.
• Avoid implementing a second, conflicting back-navigation system.

12.2 Keyboard Behavior

Text input and keyboard behavior may differ between Android and iOS. Pay attention to keyboard appearance, input types, focus behavior, screen resizing, and the placement of buttons when the keyboard is visible.

Use React Native components such as TextInput and KeyboardAvoidingView where suitable, and test the result on both platforms. The correct configuration depends on the screen layout and navigation structure.

12.3 Safe Areas and System UI

Device notches, status bars, home indicators, and system navigation areas affect available screen space. Use appropriate safe-area handling and verify that important content is not obscured by system UI.

13. Testing Platform-Specific Components and APIs

Platform-specific code must be tested on the operating systems it supports. A component that looks correct in one emulator may behave differently on a physical device or on the other platform.

13.1 Android Testing

• Run the application in an Android emulator or physical device.
• Check layout, elevation, status-bar behavior, and navigation.
• Test runtime permissions and denied-permission states.
• Test keyboard handling and device back navigation.
• Review native build errors and relevant device logs.

13.2 iOS Testing

• Run the application in an iOS simulator or physical Apple device.
• Check safe areas, shadows, navigation behavior, and text layout.
• Test authorization prompts and system dialogs.
• Verify keyboard behavior and swipe gestures where applicable.
• Review Xcode build output and device logs.

13.3 Cross-Platform Test Checklist

14. Common Errors and Troubleshooting

14.1 Incorrect Platform Check

Problem: A component always uses the same platform-specific behavior.

Possible cause: The condition uses the wrong string or checks an assumption that is not true in the target environment.

Solution: Log Platform.OS, confirm the expected platform value, and test the application on the intended target.

14.2 Platform-Specific File Is Not Resolved

Problem: Metro cannot find the correct component file.

Possible causes: Incorrect filename extension, incorrect import path, filename capitalization mismatch, or a bundler configuration issue.

Solution: Verify the .ios.js and .android.js names, check that the files exist, and confirm that both files export compatible components. Restart the bundler or clear its cache only when necessary.

14.3 Styling Works on One Platform Only

Problem: A shadow or visual effect appears on Android but not on iOS, or vice versa.

Possible cause: The selected style property is not supported in the same way on both platforms.

Solution: Use Platform.select() to apply appropriate styles for each platform and test the result on real targets.

14.4 Native API Is Unavailable

Problem: A device feature does not work even though the JavaScript code executes.

Possible causes: Missing permissions, missing native configuration, unsupported device capability, or an incompatible library.

Solution: Verify installation instructions, native configuration, permissions, library compatibility, and device support.

14.5 Permission Denied

Problem: Camera, location, or another protected feature cannot be accessed.

Solution: Check the authorization state, explain the feature's requirements to the user, and provide a recovery path when appropriate. Do not assume the user will grant access.

14.6 Version Comparison Fails

Problem: A condition based on Platform.Version does not behave as expected.

Possible cause: Android uses an API-level number, while iOS returns a version string.

Solution: Use platform-aware parsing and compare versions only after confirming the intended semantics.

15. Best Practices for Platform-Specific Development

1. Reuse shared code: Keep business logic, data processing, and common layouts in shared components whenever possible.
2. Separate complex differences: Use platform-specific files when the implementation differs substantially.
3. Prefer readable conditions: Use Platform.select() for choosing among platform-dependent values and short Platform.OS checks for simple branches.
4. Keep component interfaces consistent: Platform-specific implementations should accept the same expected props and callbacks.
5. Check documentation: Confirm platform support for every API and component property you use.
6. Handle failure states: Account for denied permissions, unsupported devices, missing applications, and unavailable features.
7. Test both platforms: Do not assume that a successful Android test proves that iOS behavior is correct.
8. Avoid unnecessary duplication: Create separate implementations only when the difference justifies the maintenance cost.
9. Use feature detection when possible: Prefer checking actual capability over assuming support from an operating-system version.
10. Document limitations: Record known differences and configuration requirements for teammates.
11. Maintain accessibility: Keep labels, touch targets, text scaling, and focus behavior usable across platforms.
12. Keep dependencies current: Review compatibility and migration instructions before upgrading React Native or native libraries.

16. Practical Project: Build a Platform-Aware Profile Screen

Project Objective: Create a simple profile screen that displays the current platform, uses platform-specific styling, and provides a native alert when the user presses a button.

16.1 Project Requirements

• Display a profile heading and short description.
• Show the current operating-system name.
• Apply platform-specific shadow styling.
• Display a button that opens a confirmation alert.
• Use shared code for the screen structure.
• Test the result on Android and iOS.

16.2 Example Implementation

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

export default function ProfileScreen() {
  const showProfileMessage = () => {
    Alert.alert(
      'Profile',
      `This screen is running on ${Platform.OS}.`
    );
  };

  return (
    <View style={styles.screen}>
      <View style={styles.card}>
        <Text style={styles.title}>My Profile</Text>
        <Text style={styles.description}>
          Welcome to your profile.
        </Text>
        <Text style={styles.platform}>
          Platform: {Platform.OS}
        </Text>
        <Button
          title="Show Profile Message"
          onPress={showProfileMessage}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
    backgroundColor: '#F2F4F7'
  },
  card: {
    padding: 20,
    borderRadius: 12,
    backgroundColor: '#FFFFFF',
    ...Platform.select({
      ios: {
        shadowColor: '#000000',
        shadowOffset: { width: 0, height: 3 },
        shadowOpacity: 0.15,
        shadowRadius: 5
      },
      android: {
        elevation: 5
      },
      default: {}
    })
  },
  title: {
    fontSize: 24,
    fontWeight: '700',
    marginBottom: 10
  },
  description: {
    fontSize: 16,
    marginBottom: 10
  },
  platform: {
    fontSize: 14,
    marginBottom: 16,
    textTransform: 'capitalize'
  }
});

16.3 Project Explanation

• The screen uses common React Native components for its structure.
• Platform.OS identifies the current platform.
• Platform.select() chooses the appropriate shadow properties.
• Alert.alert() displays a native-style message.
• The same screen can be used for both Android and iOS.

16.4 Project Extension Tasks

1. Create separate Android and iOS header components.
2. Add a platform-specific button style.
3. Open a website using the Linking API.
4. Add a sharing action using the Share API.
5. Document the permission requirements for a camera or location feature.
6. Test all interactions and write down the differences observed on each platform.

17. Practice Exercises

Beginner Exercises

1. Create a component that displays the value of Platform.OS.
2. Use Platform.select() to display a different greeting on Android and iOS.
3. Apply different background colors for Android and iOS.
4. Create a card that uses elevation on Android and shadow properties on iOS.
5. Display a native alert when a button is pressed.

Intermediate Exercises

1. Create CustomHeader.android.js and CustomHeader.ios.js files.
2. Import the header through a shared import path.
3. Build a screen that opens a URL with Linking.
4. Use the Share API to share a course link.
5. Handle a denied permission state for a selected native feature.

Advanced Exercises

1. Integrate a compatible native library and document its Android and iOS configuration.
2. Build a reusable component that supports a shared API but uses different platform-specific implementations.
3. Create a testing checklist for platform-specific navigation, permissions, and UI behavior.
4. Investigate a feature that is not available on one platform and implement a safe fallback.

18. Interview Questions and Answers

Q1. What is platform-specific development in React Native?

Answer: It is the practice of adapting an application's UI, behavior, or native API implementation to the operating system while sharing as much code as practical.

Q2. What is the Platform module?

Answer: It is a React Native module that exposes platform information and provides utilities for selecting platform-dependent values or implementations.

Q3. What does Platform.OS return?

Answer: In standard Android and iOS React Native applications, it typically returns "android" or "ios", respectively.

Q4. What is Platform.select() used for?

Answer: It selects a value, style configuration, or component implementation based on the current platform, with optional fallback keys.

Q5. What is the difference between Platform.OS and Platform.select()?

Answer: Platform.OS identifies the current platform and is useful in conditional logic. Platform.select() selects a matching value from an object of platform-specific alternatives.

Q6. What are platform-specific file extensions?

Answer: Extensions such as .android.js and .ios.js let Metro resolve the appropriate implementation when a component is imported without the platform suffix.

Q7. When should separate platform files be used?

Answer: They are useful when an entire component or module needs substantially different platform-specific logic. Small styling differences are usually better handled with Platform.select().

Q8. Why can shadows look different across platforms?

Answer: Android commonly uses elevation, while iOS uses shadow-related style properties. Their rendering behavior is not identical.

Q9. What is a native module?

Answer: A native module exposes functionality implemented using platform-native code to React Native JavaScript or TypeScript.

Q10. Why are permissions important?

Answer: Sensitive capabilities such as camera and location access require appropriate platform configuration and authorization. Applications must handle denial and unavailable states safely.

Q11. What is Platform.Version?

Answer: It provides operating-system version information. On Android it represents the API level; on iOS it is a version string.

Q12. How do you test platform-specific behavior?

Answer: Test the application on Android and iOS targets, verify platform-specific UI and native features, and check permission, navigation, and failure states.

Q13. What is the risk of excessive platform-specific code?

Answer: Too many separate implementations increase duplication and maintenance costs. Shared code should remain the default unless a platform difference justifies separation.

Q14. Does Platform.OS replace permission checks?

Answer: No. It only identifies the platform. Permission state and API availability must be checked through the appropriate API or library.

Q15. What is the main goal of platform-aware components?

Answer: To provide a reliable, usable, and platform-appropriate experience while preserving code reuse and maintainability.

19. Quick Revision Checklist

• Understand why Android and iOS may need different implementations.
• Know how to import and use Platform.
• Understand Platform.OS and Platform.Version.
• Use Platform.select() for platform-specific values and styles.
• Know when to use .android.js and .ios.js files.
• Keep shared component interfaces consistent.
• Understand the difference between core APIs, third-party libraries, and native modules.
• Configure and handle native permissions correctly.
• Test navigation, layout, accessibility, and native features on both platforms.
• Provide fallbacks when a capability is unsupported or unavailable.
• Consult the official documentation before using platform-specific properties.

20. Official Documentation and Learning Resources

• React Native: Platform-Specific Code — learn about the Platform module and platform-specific file extensions.
• React Native: Platform API — reference for Platform.OS, Platform.Version, and Platform.select().
• React Native: Native Platform — understand platform-related React Native concepts.
• React Native: Linking API — learn how to open supported URLs and external applications.
• React Native: Alert API — learn how to display native-style alert dialogs.
• React Native: Share API — learn how to open the native sharing interface.
• React Native: PermissionsAndroid — review Android runtime permission handling.
• Expo Documentation — explore Expo modules and their platform requirements.
• React Native Training at JustAcademy — explore the course details.
• Register for a JustAcademy Course Demo — access the demo registration page.
• JustAcademy Official Website — explore additional courses and learning resources.

21. Conclusion

Understanding platform-specific components and APIs is an important part of building production-ready React Native applications. Developers should know how to detect the current platform, choose platform-dependent values, organize separate component implementations, and integrate native capabilities safely.

The recommended approach is to reuse shared code wherever practical and introduce platform-specific logic only when it improves compatibility, usability, or the user experience. Always verify API support, handle permissions and errors, and test the application on both Android and iOS.

To continue learning, explore the React Native Training Course at JustAcademy and use the course demo registration page to learn more about the training.