Working with Device Information and Platform APIs in React Native

Course: React Native Training

Topic: Working with Device Information and Platform APIs

Course Link: React Native Training at JustAcademy

Demo Link: Register for a Free Course Demo

Learning Level: Beginner to Intermediate

1. Introduction to Device Information and Platform APIs

React Native allows developers to create mobile applications for Android and iOS using JavaScript or TypeScript and React. Although much of the application code can be shared, each mobile operating system has its own hardware, software features, permissions, settings, and APIs.

Device information refers to details about the device and its operating environment, such as the manufacturer, model, operating system version, screen dimensions, and device capabilities. Platform APIs provide access to operating-system-specific functionality, including sharing, opening URLs, accessing settings, and adapting application behavior to Android or iOS.

Understanding device information and platform APIs helps developers create applications that are compatible, responsive, secure, and appropriate for different devices.

Examples of Device Information

• Device manufacturer, brand, and model.
• Operating system name and version.
• Screen width, height, and pixel density.
• Application version and build number.
• Available hardware and system features.
• Device type, such as a physical device or emulator, when supported by the library.

Examples of Platform APIs

• Detecting whether an application runs on Android or iOS.
• Opening a website, email link, telephone link, or supported application URL.
• Sharing text or links with other applications.
• Adapting layouts to screen size and orientation.
• Displaying platform-specific user interface elements.
• Checking whether a feature is supported before using it.

2. Learning Objectives

After completing this topic, learners should be able to:

• Understand the role of device information in React Native applications.
• Identify the differences between Android, iOS, and web environments.
• Use the built-in Platform API to detect the current operating system.
• Retrieve screen dimensions using the Dimensions API.
• Use the useWindowDimensions hook for responsive layouts.
• Retrieve device details using Expo Device or react-native-device-info.
• Open external links with the Linking API.
• Share content through the Share API.
• Handle unsupported features, errors, and platform differences.
• Apply privacy, performance, and testing best practices.

3. Understanding the React Native Platform API

The Platform API is a built-in React Native module that helps determine which operating system or platform is currently running the application. Developers can use it to adjust behavior or styling when Android and iOS require different implementations.

3.1 Importing the Platform API

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

3.2 Detecting Android and iOS

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

export default function App() {
  return (
    <View>
      <Text>Current platform: {Platform.OS}</Text>
      <Text>
        {Platform.OS === 'android'
          ? 'Running on Android'
          : Platform.OS === 'ios'
          ? 'Running on iOS'
          : 'Running on another platform'}
      </Text>
    </View>
  );
}

Explanation:

• Platform.OS returns a platform identifier such as android, ios, or web where applicable.
• The conditional expression displays a message based on the current platform.
• This technique is useful when a feature or user interface differs between operating systems.

3.3 Using Platform.select()

Platform.select() selects a value based on the active platform. It is useful for choosing styles, configuration values, or platform-specific implementation options.

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

const styles = StyleSheet.create({
  container: {
    padding: Platform.select({
      ios: 20,
      android: 16,
      default: 12
    }),
    backgroundColor: Platform.select({
      ios: '#E8F0FE',
      android: '#E8F5E9',
      default: '#F5F5F5'
    })
  }
});

In this example, padding and background color are selected according to the platform. The default option provides a fallback for platforms not explicitly listed.

3.4 Platform.Version

Platform.Version exposes platform version information. Its exact representation depends on the platform, so developers should not assume that it is always a semantic version string.

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

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

Use version checks only when necessary. Prefer feature detection or supported APIs over version comparisons whenever possible, because devices may have different capabilities even when they use similar operating-system versions.

4. Accessing Detailed Device Information

The built-in Platform API identifies the platform but does not provide every device detail. Libraries such as expo-device and react-native-device-info provide additional information about the hardware and software environment.

4.1 Using Expo Device

The Expo Device library is useful for applications built with Expo. It exposes device properties such as manufacturer, brand, model name, operating-system version, and device type when available.

Installation:

npx expo install expo-device

Example:

import React from 'react';
import { View, Text } from 'react-native';
import * as Device from 'expo-device';

export default function DeviceDetails() {
  return (
    <View>
      <Text>Brand: {Device.brand ?? 'Unavailable'}</Text>
      <Text>Manufacturer: {Device.manufacturer ?? 'Unavailable'}</Text>
      <Text>Model: {Device.modelName ?? 'Unavailable'}</Text>
      <Text>Operating System: {Device.osName ?? 'Unavailable'}</Text>
      <Text>OS Version: {Device.osVersion ?? 'Unavailable'}</Text>
      <Text>Device Name: {Device.deviceName ?? 'Unavailable'}</Text>
    </View>
  );
}

Explanation:

• Device.brand provides the device brand when supported.
• Device.manufacturer identifies the hardware manufacturer when available.
• Device.modelName provides a human-readable model name.
• Device.osName and Device.osVersion describe the operating system.
• Device.deviceName may be unavailable or generic depending on the platform and privacy restrictions.

Device properties can return null or differ across platforms. Always handle missing information instead of assuming every property is available. Check the official API reference for the exact properties supported by the installed library version.

4.2 Using react-native-device-info

react-native-device-info is another popular library for retrieving device and application information in React Native projects. It is particularly useful in projects that need a broad collection of device information APIs.

Installation:

npm install react-native-device-info

For iOS projects, install or update CocoaPods dependencies when required by the library version:

cd ios
pod install
cd ..

Example:

import React, { useEffect, useState } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import DeviceInfo from 'react-native-device-info';

export default function DeviceInformation() {
  const [details, setDetails] = useState(null);
  const [error, setError] = useState('');

  useEffect(() => {
    let active = true;

    async function loadDetails() {
      try {
        const [brand, model, system, version, appVersion] =
          await Promise.all([
            DeviceInfo.getBrand(),
            DeviceInfo.getModel(),
            DeviceInfo.getSystemName(),
            DeviceInfo.getSystemVersion(),
            DeviceInfo.getVersion()
          ]);

        if (active) {
          setDetails({
            brand,
            model,
            system,
            version,
            appVersion
          });
        }
      } catch (e) {
        if (active) {
          setError('Unable to load device information.');
        }
      }
    }

    loadDetails();

    return () => {
      active = false;
    };
  }, []);

  if (error) {
    return <Text>{error}</Text>;
  }

  if (!details) {
    return <ActivityIndicator />;
  }

  return (
    <View>
      <Text>Brand: {details.brand}</Text>
      <Text>Model: {details.model}</Text>
      <Text>System: {details.system}</Text>
      <Text>System Version: {details.version}</Text>
      <Text>App Version: {details.appVersion}</Text>
    </View>
  );
}

Important: This library contains both synchronous and asynchronous APIs, and support varies by platform. Consult the library documentation for each method's return type and platform compatibility. If a method is synchronous, do not treat its return value as a Promise.

4.3 Expo Device vs. react-native-device-info

5. Understanding Screen Dimensions

Screen dimensions help developers create responsive interfaces for different mobile devices. Phones and tablets have different screen sizes, and the available application window may change when a device rotates, a keyboard opens, or the window is resized.

5.1 Using Dimensions

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

export default function ScreenInformation() {
  const { width, height, scale, fontScale } =
    Dimensions.get('window');

  return (
    <View>
      <Text>Window Width: {width}</Text>
      <Text>Window Height: {height}</Text>
      <Text>Pixel Scale: {scale}</Text>
      <Text>Font Scale: {fontScale}</Text>
    </View>
  );
}

Explanation:

• width is the available window width in React Native layout units.
• height is the available window height in React Native layout units.
• scale indicates the screen pixel density scale.
• fontScale indicates the user's font scaling preference.

React Native layout dimensions are generally expressed in density-independent units, not raw physical pixels.

5.2 Using useWindowDimensions

useWindowDimensions() is generally preferred for responsive components because it automatically updates when the window dimensions or font scale change.

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

export default function ResponsiveLayout() {
  const { width } = useWindowDimensions();
  const isTabletLayout = width >= 768;

  return (
    <View style={{ padding: 16 }}>
      <Text>
        Layout: {isTabletLayout ? 'Wide screen' : 'Compact screen'}
      </Text>
      <Text>Available width: {Math.round(width)}</Text>
    </View>
  );
}

This approach allows the application to adapt its layout when the available window width changes. The threshold of 768 units is only an example; select breakpoints according to your design requirements.

6. Using Platform-Specific Code

React Native supports shared application code and platform-specific implementations. Choose the simplest technique that meets the requirements.

6.1 Conditional Rendering

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

export default function PlatformMessage() {
  return (
    <View>
      {Platform.OS === 'ios' ? (
        <Text>Welcome to the iOS experience.</Text>
      ) : (
        <Text>Welcome to the Android experience.</Text>
      )}
    </View>
  );
}

6.2 Platform-Specific Files

When the implementations differ substantially, React Native can select files according to platform extensions.

• DeviceCard.ios.js contains the iOS implementation.
• DeviceCard.android.js contains the Android implementation.
• DeviceCard.js can provide a shared or fallback implementation.

Example component usage:

import DeviceCard from './DeviceCard';

export default function App() {
  return <DeviceCard />;
}

The bundler resolves the appropriate platform-specific file. Follow the project's JavaScript or TypeScript conventions when choosing extensions.

6.3 When to Use Platform-Specific Code

• When a native feature is supported on one platform but not another.
• When platform-specific design conventions require different components.
• When native permissions or configuration differ.
• When a library requires separate platform integrations.
• When shared code becomes difficult to maintain because of many platform conditions.

7. Working with the Linking API

The React Native Linking API provides methods for opening supported URLs and handling incoming links. It can open web pages, email applications, telephone links, and other URLs supported by the device.

7.1 Opening a Website

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

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

    try {
      await Linking.openURL(url);
    } catch (error) {
      Alert.alert('Error', 'Unable to open the website.');
    }
  };

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

7.2 Opening an Email Application

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

async function sendEmail() {
  const url = 'mailto:[email protected]?subject=Course%20Enquiry';

  try {
    await Linking.openURL(url);
  } catch (error) {
    Alert.alert('Error', 'Unable to open an email application.');
  }
}

The example address is a placeholder. Replace it with a real, intended recipient in your application.

7.3 Opening a Telephone Link

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

async function makeCall() {
  const url = 'tel:+911234567890';

  try {
    await Linking.openURL(url);
  } catch (error) {
    Alert.alert('Error', 'Calling is not supported on this device.');
  }
}

Telephone-link behavior depends on the device, operating system, and available applications. The code opens the supported phone interface; it does not automatically place a call in every environment.

7.4 Checking Whether a URL Can Be Opened

import { Linking } from 'react-native';

async function canOpenWebsite() {
  const url = 'https://www.justacademy.co/';
  const supported = await Linking.canOpenURL(url);

  if (supported) {
    await Linking.openURL(url);
  } else {
    console.log('No supported handler is available.');
  }
}

For certain URL schemes, operating-system configuration may affect the result of canOpenURL(). Always handle rejected promises and test on the target platform.

8. Using the Share API

The Share API allows users to send text or links through applications available on their devices, such as messaging applications, email clients, and other compatible services.

8.1 Sharing Text and a Link

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

export default function ShareCourse() {
  const shareContent = async () => {
    try {
      await Share.share({
        message:
          'Explore React Native Training at JustAcademy: ' +
          'https://www.justacademy.co/course-detail/react-native-training',
        title: 'React Native Training'
      });
    } catch (error) {
      Alert.alert('Error', 'Unable to share the content.');
    }
  };

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

Key points:

• Share.share() opens the platform's sharing interface where supported.
• message contains the text or URL to share.
• title can provide a title for the sharing interface where supported.
• Sharing behavior and the returned result can differ between platforms.

9. Application Information and Version Management

Device information libraries can expose application details such as version numbers, build numbers, and application identifiers. These values are useful for support screens, diagnostics, and update guidance.

9.1 Displaying Application Version

import React from 'react';
import { View, Text } from 'react-native';
import DeviceInfo from 'react-native-device-info';

export default function AppVersion() {
  const version = DeviceInfo.getVersion();
  const buildNumber = DeviceInfo.getBuildNumber();

  return (
    <View>
      <Text>Application Version: {version}</Text>
      <Text>Build Number: {buildNumber}</Text>
    </View>
  );
}

These methods are synchronous in the library API shown here. Check the installed library's documentation if you use a different version or another library.

9.2 Version vs. Build Number

10. Checking Device Capabilities

Not all devices provide the same hardware or system features. Before relying on a capability, determine whether the relevant API or library supports checking it and handle unavailable features gracefully.

Examples of capabilities that may vary include:

• Camera and microphone availability.
• GPS and location-provider availability.
• Biometric authentication support.
• Bluetooth and NFC hardware.
• Sensor availability.
• Available storage and battery information.

Capability detection and permission checking are different tasks. A device may contain a camera while the application lacks permission to use it. Likewise, a feature may exist but be disabled by the user or restricted by the operating system.

10.1 Example: Checking Platform Features with Expo Device

import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';
import * as Device from 'expo-device';

export default function PlatformFeatures() {
  const [features, setFeatures] = useState([]);
  const [message, setMessage] = useState('Loading features...');

  useEffect(() => {
    let active = true;

    async function loadFeatures() {
      try {
        const result = await Device.getPlatformFeaturesAsync();

        if (active) {
          setFeatures(result);
          setMessage(
            result.length
              ? 'Available platform features'
              : 'No feature list is available on this platform'
          );
        }
      } catch (error) {
        if (active) {
          setMessage('Unable to retrieve platform features.');
        }
      }
    }

    loadFeatures();

    return () => {
      active = false;
    };
  }, []);

  return (
    <View>
      <Text>{message}</Text>
      {features.map((feature) => (
        <Text key={feature}>{feature}</Text>
      ))}
    </View>
  );
}

Note: The feature-list API is platform-specific. For example, Expo Device documents Android platform features and returns an empty list on platforms where this information is not implemented. An empty list does not necessarily prove that the device has no hardware capabilities.

11. Handling Platform Differences and Unsupported Values

Device APIs may return different values across platforms, device models, and operating-system versions. Some information may be unavailable because of privacy controls or missing platform support.

11.1 Handle Missing Values

const modelName = Device.modelName ?? 'Unknown model';
const osVersion = Device.osVersion ?? 'Unknown version';

The nullish coalescing operator (??) provides a fallback only when the value is null or undefined.

11.2 Handle Errors in Asynchronous APIs

async function loadDeviceData() {
  try {
    const deviceName = await Device.getDeviceTypeAsync();
    return deviceName;
  } catch (error) {
    console.error('Could not load device data:', error);
    return null;
  }
}

This example demonstrates error handling around an asynchronous device API. The returned device type is an enum-like value rather than a device-name string, so name the variable according to the actual return type in production code.

11.3 Avoid Fragile Version Checks

Version-based conditions can become difficult to maintain when multiple operating-system versions and devices are supported. Prefer checking whether a feature or API is available. If a version check is necessary, use the documented version format and test it across supported devices.

12. Permissions and Privacy Considerations

Some device information is available without requesting a permission, while other capabilities require user consent, platform configuration, or special entitlements. Requirements depend on the API and the operating system.

12.1 Follow the Principle of Minimum Access

• Collect only the information required for a clear application purpose.
• Explain why sensitive information is needed before requesting access.
• Do not assume that device identifiers are harmless or suitable for tracking.
• Avoid collecting personal device names or persistent identifiers unless necessary.
• Store device data securely when it must be retained.
• Do not expose detailed device information in public logs or analytics without a valid reason.
• Provide graceful behavior when permission is denied or information is unavailable.

12.2 Device Information and Permissions

13. Debugging and Troubleshooting

Device information and platform APIs can behave differently on simulators, emulators, and physical devices. The following troubleshooting steps help identify common problems.

13.1 Useful Debugging Practices

• Check the installed package version and its official documentation.
• Log non-sensitive values during development to confirm API behavior.
• Test on Android and iOS instead of relying on a single simulator.
• Verify permissions and native configuration when using hardware capabilities.
• Test with unavailable or null values to ensure the interface remains usable.
• Remove unnecessary diagnostic logging before releasing the application.

14. Best Practices for Device and Platform APIs

1. Prefer built-in APIs: Use React Native's Platform, Dimensions, Linking, and Share APIs for supported common functionality.
2. Choose the appropriate device library: Use Expo Device for suitable Expo projects or react-native-device-info when its wider API set is required.
3. Keep shared code reusable: Avoid duplicating entire screens when only a small platform-specific detail differs.
4. Use responsive layouts: Avoid fixed screen dimensions when a flexible layout can achieve the same result.
5. Handle missing information: Treat null, unsupported, and fallback values as normal conditions.
6. Handle asynchronous operations: Use loading states, error handling, and cleanup where appropriate.
7. Protect user privacy: Do not collect device details without a legitimate application requirement.
8. Test real devices: Some APIs return different values on emulators and physical devices.
9. Check library compatibility: Review requirements for the React Native version, Expo SDK, Android, and iOS.
10. Document platform-specific behavior: Make differences clear for future developers maintaining the application.

15. Practical Project: Device Information Dashboard

Build a simple React Native application that displays basic device information and offers actions to open a website and share a course link.

15.1 Project Requirements

• Display the current platform.
• Show the device brand, manufacturer, and model when available.
• Display the operating-system name and version.
• Display the current application version.
• Show the available window dimensions.
• Provide a button to open the JustAcademy website.
• Provide a button to share the React Native course link.
• Handle missing information and failed actions gracefully.

15.2 Install Dependencies

For an Expo project, install the device package:

npx expo install expo-device

For a project using react-native-device-info instead, install that library and complete its native setup as described in its documentation.

15.3 Example Dashboard Using Expo Device

import React from 'react';
import {
  View,
  Text,
  Button,
  Platform,
  Linking,
  Share,
  Alert,
  useWindowDimensions
} from 'react-native';
import * as Device from 'expo-device';

export default function DeviceDashboard() {
  const { width, height } = useWindowDimensions();

  const openWebsite = async () => {
    try {
      await Linking.openURL('https://www.justacademy.co/');
    } catch (error) {
      Alert.alert('Error', 'Unable to open the website.');
    }
  };

  const shareCourse = async () => {
    try {
      await Share.share({
        message:
          'React Native Training: ' +
          'https://www.justacademy.co/course-detail/react-native-training',
        title: 'React Native Training'
      });
    } catch (error) {
      Alert.alert('Error', 'Unable to share the course link.');
    }
  };

  return (
    <View style={{ padding: 20, gap: 12 }}>
      <Text>Device Information Dashboard</Text>
      <Text>Platform: {Platform.OS}</Text>
      <Text>Brand: {Device.brand ?? 'Unavailable'}</Text>
      <Text>Manufacturer: {Device.manufacturer ?? 'Unavailable'}</Text>
      <Text>Model: {Device.modelName ?? 'Unavailable'}</Text>
      <Text>OS: {Device.osName ?? Platform.OS}</Text>
      <Text>OS Version: {Device.osVersion ?? 'Unavailable'}</Text>
      <Text>Window Width: {Math.round(width)}</Text>
      <Text>Window Height: {Math.round(height)}</Text>
      <Button title="Open JustAcademy" onPress={openWebsite} />
      <Button title="Share React Native Course" onPress={shareCourse} />
    </View>
  );
}

Project notes: The example uses Expo Device for device properties and React Native's built-in APIs for platform detection, responsive dimensions, opening URLs, and sharing. It does not require location or other sensitive permissions. Test it on both Android and iOS, and adjust the user interface to suit the application's design system.

15.4 Expected Outcome

The dashboard displays the information available on the current device. If a property is unsupported, the application shows a fallback message. Users can open the JustAcademy website or share the React Native training link using the platform's supported interface.

16. Practice Exercises

1. Create a component that displays whether the application is running on Android or iOS.
2. Use Platform.select() to apply different padding values on Android and iOS.
3. Display the screen width and height using useWindowDimensions().
4. Install Expo Device and display the manufacturer and model name.
5. Display the operating-system version while safely handling unavailable values.
6. Use react-native-device-info to display the application version and build number.
7. Create a button that opens a website using the Linking API.
8. Create a button that shares text and a course URL using the Share API.
9. Test your application on an Android emulator and an iOS simulator or physical device.
10. Update the dashboard to handle errors and unavailable device information.

17. Interview Questions and Answers

Q1. What is device information in React Native?

Device information includes details about the device and its operating environment, such as the manufacturer, model, operating-system version, screen dimensions, and supported system features.

Q2. What is the Platform API?

The Platform API is a built-in React Native module used to identify the current platform and select platform-specific values or behavior.

Q3. What does Platform.OS return?

It returns a platform identifier such as android, ios, or web, depending on the environment.

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

It selects a value based on the current platform, which is useful for styles, configuration, and platform-specific implementation choices.

Q5. What is the difference between Platform and a device information library?

Platform provides built-in platform detection and related properties. Device information libraries expose additional details about the hardware, operating system, and application.

Q6. What is Expo Device?

Expo Device is a library that provides device-related information, including properties such as manufacturer, brand, model name, and operating-system version where supported.

Q7. What is react-native-device-info?

It is a React Native library that provides APIs for retrieving various device and application details, with support depending on the API and platform.

Q8. What is the difference between Dimensions and useWindowDimensions?

Dimensions provides access to window or screen dimensions. The useWindowDimensions hook updates a component when relevant window dimensions or font scaling change, making it useful for responsive interfaces.

Q9. What is the Linking API?

Linking enables an application to open supported URLs and work with incoming links. It can be used for websites, email links, telephone links, and other supported URL schemes.

Q10. What is the Share API?

The Share API opens a platform sharing interface that allows users to share text or links with compatible applications.

Q11. Why should device information be checked for null values?

Some properties are unsupported, unavailable, or restricted on particular platforms. Fallback values prevent the application from failing when data is missing.

Q12. Why might device information differ between Android and iOS?

The operating systems expose different APIs and apply different permissions, privacy protections, and hardware conventions.

Q13. What is platform-specific code?

Platform-specific code is an implementation intended for a particular operating system. React Native supports conditional platform logic and platform-specific file extensions.

Q14. Why should an application avoid unnecessary device identifiers?

Persistent identifiers can create privacy risks and may be subject to platform restrictions. Applications should collect only the information required for a legitimate purpose.

Q15. How do you test platform APIs?

Test on Android and iOS, use emulators or simulators for initial checks, verify behavior on physical devices where necessary, and cover unsupported features, permissions, and error conditions.

18. Quick Revision Checklist

• Understand device information and platform API concepts.
• Use Platform.OS and Platform.select().
• Retrieve device details with Expo Device or react-native-device-info.
• Understand the difference between application version and operating-system version.
• Use Dimensions or useWindowDimensions for responsive layouts.
• Use Linking to open supported URLs.
• Use Share to share text and links.
• Check platform compatibility and handle missing values.
• Handle asynchronous calls and errors correctly.
• Follow privacy principles and test on multiple platforms.

19. Conclusion

Working with device information and platform APIs is an important part of building reliable React Native applications. The Platform API helps developers detect the current operating system, while libraries such as Expo Device and react-native-device-info provide additional information about the device and application.

React Native's Dimensions, useWindowDimensions, Linking, and Share APIs help developers build responsive interfaces and integrate useful device-level actions. By understanding platform differences, handling unavailable data, respecting privacy, and testing on Android and iOS, developers can create mobile applications that behave consistently across supported devices.

20. Official Documentation and Learning Resources

• JustAcademy – React Native Training Course
• JustAcademy – Register for Course Demo
• JustAcademy – Official Website
• React Native – Platform
• React Native – Dimensions
• React Native – useWindowDimensions
• React Native – Linking
• React Native – Share
• Expo – Device Documentation
• react-native-device-info – Official Repository and API Reference