How to get device info in React Native with react-native-device-info

2/18/2022

Request, Deliver, Revise, Done

Get unlimited UI Design & React Development for a fixed monthly price

50% off your first month

Introduction

When writing React Native applications, you might need to access information about the device of your users - especially now that the framework is beginning to incorporate more platforms, such as Windows.

The easiest way to do this is using the react-native-device-info plugin. In this article, I'll show you how to get up and running with the module and how to use it, with some code examples.

Installing React Native Device Info

To install react-native-device-info, simply run the following command in your terminal to install via npm:

npm install react-native-device-info

Or to install with Yarn:

yarn add react-native-device-info

The package links automatically, so now further setup should be required. Let's see what it can do!

A note on platform support & full list of APIs

It's important to note that not all of the APIs available in react-native-device-info support all the different platforms in React Native. In each of the examples below I will list which platforms are supported in the title

I'm only highlighting a few of the main APIs available in this articcle - so for an exhaustive list of available APIs, and which devices they support, please checkout the react-native-device-info Github page.

Getting the battery level of the device in React Native (iOS/Android/Web/Windows)

You can get the current battery level of the users device using the getBatteryLevel function:

import { getBatteryLevel } from 'react-native-device-info';

async () => {
  const batteryLevel = await getBatteryLevel();

  console.log(batteryLevel); // 0.529999
};

Check if the device battery is charging in React Native (iOS/Android/Web/Windows)

To check whether the device's battery is currently being charged, use the isBatteryCharging function:

import { isBatteryCharging } from 'react-native-device-info';

async () => {
  const batteryCharging = await isBatteryCharging();

  console.log(batteryCharging); // true
};

Get the power state of a device in React Native (iOS/Android/Web/Windows)

You can also get the power state of a device using the getPowerState function - as well as giving you the current battery level, it will also show whether the device is plugged in or not and whether it's currently in low power mode.

import { getPowerState } from 'react-native-device-info';

async () => {
  const powerState = await getPowerState();

  console.log(powerState.batteryLevel); // 0.319999
  console.log(powerState.batteryState); // unplugged
  console.log(powerState.lowPowerMode); // false
};

Check if the current device is an emulator or physical device in React Native (iOS/Android/Windows)

To check if your app is currently running on an emulator or a physical device, use the isEmulator function:

import { isEmulator } from 'react-native-device-info';

async () => {
  const isAnEmulator = await isEmulator();

  console.log(isAnEmulator); // returns true if emulator, false if physical device
};

Get the time that an App was first installed with React Native (Android/Windows)

To get the time that an app was first installed on Android or Windows, use the getFirstInstallTime function:

import { getFirstInstallTime } from 'react-native-device-info';

async () => {
  const timeFirstInstalled = await getFirstInstallTime();

  console.log(timeFirstInstalled); // 1645132888187
};

Check if a device is in landscape or portrait mode with React Native (iOS/Android/Windows)

Sometimes you might need to adjust the app layout depending on whether the device is in landscape or portrait mode. To check this you can use the isLandscape function:

import { isLandscape } from 'react-native-device-info';

async () => {
  const isLandscapeMode = await isLandscape();

  console.log(isLandscapeMode); // true if landscape, false if portrait
};

Check if the device has location services enabled with React Native (iOS/Android/Web)

You can check whether the user has enabled location services on their device using the isLocationEnabled function.

Please note that this checks whether the user has enabled location services for their device as a whole - it does not tell you whether they have given permission for your app to access location services. You will need to prompt the user for location services permission seperately if you want to access it.

import { isLocationEnabled } from 'react-native-device-info';

async () => {
  const hasLocationEnabled = await isLocationEnabled();

  console.log(hasLocationEnabled); // true if enabled, false if disabled
};

Get device font scale in React Native (iOS/Android/Windows)

The font scale is the ratio of the current system font in relation to the base font size. For example, if the base size is 10px and the system font is set to 20px, the font scale would be 2.0.

Why is this important? Well, this essentially tells you if the accessibility settings have been changed on the users device. We want to respect this setting and also might need to adjust our views to accommodate the larger font size.

To get this information, we use the getFontScale function:

import { getFontScale } from 'react-native-device-info';

async () => {
  const fontScale = await getFontScale();

  console.log(fontScale); // 1.25
};

Get the time an app was last updated with React Native (Android)

To get the time that an app was updated on Android, use the getLastUpdateTime function:

import { getLastUpdateTime } from 'react-native-device-info';

async () => {
  const timeLastUpdated = await getLastUpdateTime();

  console.log(timeLastUpdated); // 1645132888187
};

Get the OS version in React Native (iOS/Android/Windows)

Get the operating system version of the device using the getSystemVersion function:

import { getSystemVersion } from 'react-native-device-info';

async () => {
  const systemVersion = await getSystemVersion();

  console.log(systemVersion); // "15.3.1"
};

Check if the device has a camera in React Native (Android/Windows)

Use the isCameraPresent function to check whether an Android or Windows device has a camera available. Note that this just tells you whether the device has a camera available - it doesn't give you permission to use it, and you will need to get permission if you want to actually use the device's camera.

import { isCameraPresent } from 'react-native-device-info';

async () => {
  try {
    const hasCamera = await isCameraPresent();
    console.log(hasCamera); // true
  } catch (e) {
    // error will be thrown if the camera could not be queried or opened by the CameraManager on Android
  }
};

Get the app version in React Native (iOS/Android)

To get the version number of the app that the user has installed on their device on iOS or Android, you can use the getVersion function:

import { getVersion } from 'react-native-device-info';

async () => {
  const version = await getVersion();
  console.log(version); // 1.0.0
};

Check if the device has a fingerprint or pin number set in React Native (iOS/Android/Windows)

To check whether the user has a pin number or biometric unlocking set on their device, use the isPinOrFingerprintSet function:

import { isPinOrFingerprintSet } from 'react-native-device-info';

async () => {
  const hasPinOrFingerprintSet = await isPinOrFingerprintSet();
  console.log(hasPinOrFingerprintSet); // true if set, false if not
};

Check if the device is a tablet in React Native (iOS/Android/Windows)

You can check if the device is a tablet or not using the isTablet boolean. This is handy if for example you want your layout to be slightly different for tablet devices, you can use this method to check.

import { isTablet } from 'react-native-device-info';

async () => {
  const isTabletDevice = await isTablet();
  console.log(isTabletDevice); // true if it's a tablet, false if not
};

Check if the device has a notch in React Native (iOS/Android/Windows)

You can check if the device has a notch using the hasNotch function. Please note that if you want to adjust your layout for the notch, you can use SafeAreaView.

import { hasNotch } from 'react-native-device-info';

async () => {
  const deviceHasNotch = await hasNotch();
  console.log(deviceHasNotch); // true if device has a notch, false if not
};