18.9. Handling Platform-Specific Code with Platform Module: Handling Platform-Specific Permissions

When developing cross-platform applications with React Native, one of the critical challenges developers face is handling platform-specific code. While React Native provides a unified API for most needs, there are scenarios where you need to write platform-specific code, especially when dealing with permissions that differ between iOS and Android. The Platform module in React Native is an essential tool for managing these differences effectively.

The Platform module allows you to conditionally implement code based on the platform your application is running on. This capability is particularly useful when handling permissions, as iOS and Android have distinct permission models and requirements. Understanding how to navigate these differences is crucial for creating a seamless user experience across platforms.

Understanding Platform Differences in Permissions

Permissions are an essential part of mobile applications, allowing apps to access sensitive data or device features. However, the process for requesting and handling permissions can vary significantly between iOS and Android:

• iOS: Permissions are declared in the Info.plist file, and the system prompts users the first time an app attempts to access a protected resource. The user can grant or deny permission, and the app can check the status using the appropriate APIs.
• Android: Permissions are declared in the AndroidManifest.xml file. For permissions classified as "dangerous," Android requires runtime permission requests, meaning the app must explicitly ask the user for permission while the app is running.

Given these differences, it is crucial to handle permissions in a way that respects the conventions and requirements of each platform.

Using the Platform Module

The Platform module in React Native provides a simple API to help you determine the platform your app is running on. Here's a basic example:

import { Platform } from 'react-native';

if (Platform.OS === 'ios') {
  // iOS-specific code
} else if (Platform.OS === 'android') {
  // Android-specific code
}

This conditional logic allows you to write code that is executed only on the specific platform, making it easier to handle platform-specific permissions.

Handling Platform-Specific Permissions

Let's explore how to handle platform-specific permissions using a practical example: accessing the device's location. For this example, we'll need to manage different permission requests and checks for iOS and Android.

iOS Location Permission

On iOS, you must declare the required location permissions in the Info.plist file. You can choose between NSLocationWhenInUseUsageDescription and NSLocationAlwaysUsageDescription, depending on whether your app needs access to location data only while in use or at all times.

Here's an example entry for the Info.plist file:

<key>NSLocationWhenInUseUsageDescription</key>
<string>This app requires access to your location while in use.</string>

Once declared, you can use a library like react-native-geolocation to request and check the permission status in your app:

import Geolocation from '@react-native-community/geolocation';

Geolocation.requestAuthorization('whenInUse').then((response) => {
  if (response === 'granted') {
    // Permission granted, proceed with accessing location
  } else {
    // Permission denied, handle accordingly
  }
});

Android Location Permission

On Android, you must declare the location permissions in the AndroidManifest.xml file. Here are the entries for fine and coarse location permissions:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

For runtime permission requests, you can use the react-native-permissions library to handle the permission request and status check:

import { check, request, PERMISSIONS, RESULTS } from 'react-native-permissions';

check(PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION).then((result) => {
  switch (result) {
    case RESULTS.UNAVAILABLE:
      console.log('This feature is not available (on this device / in this context)');
      break;
    case RESULTS.DENIED:
      console.log('The permission has not been requested / is denied but requestable');
      request(PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION).then((result) => {
        if (result === RESULTS.GRANTED) {
          // Permission granted, proceed with accessing location
        } else {
          // Permission denied, handle accordingly
        }
      });
      break;
    case RESULTS.GRANTED:
      console.log('The permission is granted');
      // Permission granted, proceed with accessing location
      break;
    case RESULTS.BLOCKED:
      console.log('The permission is denied and not requestable anymore');
      break;
  }
});

Combining Platform-Specific Code

Using the Platform module, you can combine the above approaches to handle permissions in a cross-platform manner. Here's a comprehensive example:

import { Platform } from 'react-native';
import Geolocation from '@react-native-community/geolocation';
import { check, request, PERMISSIONS, RESULTS } from 'react-native-permissions';

function requestLocationPermission() {
  if (Platform.OS === 'ios') {
    Geolocation.requestAuthorization('whenInUse').then((response) => {
      if (response === 'granted') {
        // Permission granted, proceed with accessing location
      } else {
        // Permission denied, handle accordingly
      }
    });
  } else if (Platform.OS === 'android') {
    check(PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION).then((result) => {
      switch (result) {
        case RESULTS.UNAVAILABLE:
          console.log('This feature is not available (on this device / in this context)');
          break;
        case RESULTS.DENIED:
          console.log('The permission has not been requested / is denied but requestable');
          request(PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION).then((result) => {
            if (result === RESULTS.GRANTED) {
              // Permission granted, proceed with accessing location
            } else {
              // Permission denied, handle accordingly
            }
          });
          break;
        case RESULTS.GRANTED:
          console.log('The permission is granted');
          // Permission granted, proceed with accessing location
          break;
        case RESULTS.BLOCKED:
          console.log('The permission is denied and not requestable anymore');
          break;
      }
    });
  }
}

By using the Platform module, you can ensure that your app handles permissions appropriately for each platform, providing a consistent user experience.

Best Practices for Handling Permissions

When dealing with permissions in a cross-platform app, consider the following best practices:

• Clearly Communicate: Always inform users why your app requires specific permissions. This can help build trust and increase the likelihood of users granting permissions.
• Request Permissions Just-in-Time: Instead of requesting all permissions at launch, request them when needed. This approach minimizes user friction and aligns with user expectations.
• Handle Denials Gracefully: Be prepared for users to deny permissions. Provide alternative functionality or inform users how to enable permissions later if needed.
• Test on Both Platforms: Ensure you test your permission handling code on both iOS and Android devices to verify that it behaves as expected on each platform.

By following these practices and leveraging the Platform module, you can effectively manage platform-specific permissions in your React Native applications, ensuring a smooth and consistent user experience across devices.