How to read platform-specific values in React Native

How to get platform-specific data in React Native:

In react native, we can easily get platform-specific data. React native provides an API called Platform that provides different types of constants related to the current running platform.

In this post, we will learn about these constants and I will show you one example with different types of data printed on both Android and iOS.

How to use Platform API:

To use this API, we need to import it first:

import { Platform } from 'react-native';

Once it is imported, we can import the following properties.

Properties of Platform:

Following are the available properties of Platform:

isTesting [boolean]

It returns a boolean flag that defines if the app is running in developer mode with testing flag is set or not. It will return true if yes.

reactNativeVersion [object]

It returns the current react native version in key-value pairs. major, minor, patch and prerelease(optional) are keys and values are number.

isTV [boolean]

Returns one boolean to define if the current device is a TV or not.

OS [enum]

It returns if the current OS is android or iOS. It is of type enum(‘android’, ‘ios’)

Version [number for Android][string for iOS]:

Current version of Android or iOS

constants [object]

This is an object that holds different device specific information.

Android specific properties:

Following properties are available only for Android:

Release [string]

A string value

Serial [string]

Android device hardware serial number

Fingerprint [string]

A unique string to identify the current build

Model [string]

Android device name

Brand [string]

Consumer-visible brand with which the product/hardware will be associated.

Manufacturer [string]

The manufacturer of the Android device in string format

ServerHost [string]

server host info.

uiMode [string]

Android mode type. It can be car, desk, normal, tv, watch and unknown

iOS specific properties:

Following properties are available on iOS devices:

forceTouchAvailable [boolean]

This property indicates if 3D touch is available on a device or not.

interfaceIdiom [string]

The interface type of the device

osVersion [string]

OS version of the iOS

systemName [string]

iOS system name.

isPad [boolean]

Defines if the iOS device is an iPad or not.

Example program:

Let’s create an example React-native program with one screen:

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

const App = () => {
  const os = Platform.OS;
  const version = Platform.Version;

  const msg = `OS: ${os}, Version: ${version}`;

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.text}>{msg}</Text>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    ...Platform.select({
      android: {
        backgroundColor: 'orange',
      },
      ios: {
        backgroundColor: 'green',
      },
      default: {
        // for web
        backgroundColor: 'blue',
      },
    }),
  },
  text: {
    fontSize: 24,
    fontWeight: '600',
    textAlign: 'center',
  },
});

export default App;

We are building one string msg with different data from the Platform API. You can also see that the style, i.e. the background color is different for different platforms and this is decided by Platform.

CodeVsColor