How to Get Platform Information in React Native

Last updated on November 26, 2021 The Plumber Loading... Post a comment

In this article, we will explore how to retrieve information about the platform your React Native is running on. This information includes OS, OS version, and many more helpful things. At first, we will have a look at the Platform API then we will examine a complete example of using it in practice. Without any further ado, let’s get started.

Overview

To use Platform, we need to import it into our code:

import { Platform } from 'react-native';

Platform returns an object with several constants. You can simply use it as follows:

console.log(Platform.OS);

This table lists the most used properties:

PropertyTypeDescription
OSenum(‘android’, ‘ios’)Determines whether the current OS is Android or iOS
Versionnumber (on Android), string (on iOS)Returns the version of the OS
isTVbooleanDetermines whether the device is a TV or not
isIpadbooleanDetermines whether the device is an iPad or not
constantsobjectAn object which contains some detailed information about the platform
isTestingbooleanDetermines whether the app is in development mode with a testing flat set

These are some useful properties of the Platform.constants object:

  • Serial (Android-only): The hardware serial number of the device
  • Model (Android-only): The end-user name of the device
  • Manufacture (Android-only): The company that makes the device
  • Brand (Android-only): The brand of the device
  • uiMode (Android-only): This can be ‘car’, ‘desk’, ‘normal’, ‘tv’, ‘watch’, and ‘unknown’.
  • interfaceIdiom (iOS-only): The interface type for the device.
  • rectNativeVersion: Helps you programatically retrieves the information about the version of React Native is being used.

The Complete Example

App Preview

The sample app we are going to build not only displays the OS name, OS version but also has a different background color on iOS and Android:

The Final Code

The full source code with explanations in App.js:

// App.js
import React, { useState, useEffect } from "react";
import { Platform, Text, StyleSheet, View } from "react-native";

export default function App() {
  return (
    <View
      style={{
        ...styles.container,
        backgroundColor: Platform.OS === "android" ? "#3f51b5" : "#e91e63",
      }}
    >
      <Text style={styles.text}>OS: {Platform.OS}</Text>
      <Text style={styles.text}>OS Version: {Platform.Version}</Text>
      {Platform.OS === "android" ? (
        <Text style={styles.text}>
          Manufacturer: {Platform.constants.Manufacturer}
        </Text>
      ) : null}
    </View>
  );
}

// Kindacode.com
// Just some styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column",
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    fontSize: 30,
    fontWeight: "bold",
    fontStyle: "italic",
    color: "#fff",
  },
});

Conclusion

This article equipped you with some knowledge and some practical skills to make use of the Platform API in React Native. From this point, you can implement some specific functionalities for your app to bring to your users a native-like experience. If you’d like to discover more new and awesome stuff about modern React Native, take a look at the following articles:

You can also check our React topic page and React Native topic page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles