img-background

The Easiest Way to Get React Native Device Information

A step by step guide to retrieve device information in a React Native application using react-native-device-info plugin with code snippets in each step

The Easiest Way to Get React Native Device Information

This post is structured as follows.

Building a great React Native app more likely requires retrieving the mobile device details like the operating system, version, bundle ID and much more. You probably would need this information to compare versions, or perhaps check if the current operating system is Android or iOS, and so on.

In this post, the easiest way to get the device information in React Native will be illustrated easily and step by step. React Native does not provide all the required device details out-of-the-box, that's why a plugin is needed to retrieve this information.

React Native Device Info Demo Example


The plugin used is react-native-device-info.


Installing React-Native-Device-Info Plugin in your React Native project

To start off, add the React Native device info plugin in your app by running the following command.

The previous command will add react-native-device-info plugin to your app and also install the required Cocoa pods using the pod file in the iOS project directory. Starting with React Native version 0.60.5 (which is the latest version by the time of this writing), you are not required to link any libraries, linking is done automatically, but you have to install Cocoa pods.

To migrate your React Native to version 0.60.5, we recommend that you read this post.


Importing the plugin

The next step is to start using the plugin by importing it in your component. To do so, place the following import line of code among your import statements


Calling the React Native Device Info Plugin

To start reading the device info, you can call any of the following plugin APIs based on what you need to do in your app.

  1. DeviceInfo.getUniqueID() - to get the device unique ID. This ID will change if the app is uninstalled.
  2. DeviceInfo.getManufacturer() - to get the device manufacturer, for example: Apple.
  3. DeviceInfo.getModel() - to get the device model, for example, iPhone X.
  4. DeviceInfo.getSystemVersion() - to get the system version, for example, 12.0 or 9.0.
  5. DeviceInfo.getBundleId() - to get the bundle ID, for example, com.myapp.ReactNativeDeviceInfo
  6. DeviceInfo.getBuildNumber() - to get the build number.
  7. DeviceInfo.getVersion() - to get the app version, for example, 1.0.0.
  8. DeviceInfo.getDeviceName() - to get the device name, for example, John's iPhone.
  9. DeviceInfo.getUserAgent() - to get the user agent, check the app screenshot above.
  10. DeviceInfo.getDeviceLocale() - to get the device locale, for example, en, to display some content that matches device language.
  11. DeviceInfo.getDeviceCountry() - to get the country, for example, US.

Note: Not all the APIs are compatible with iOS or Android. We recommend that you check the plugin documentation for more details about the platform incompatibilities.

The react-native-device-info provides more information than what was mentioned earlier, we recommend that you check this documentation for more information that you can retrieve in your app.

If you found any problems or issues, please feel free to share them in the comments and I will gladly provide help.

img-background
Fady Soliman
Fady SolimanMember since
Jun 22, 2013
Loading...
Did you find this helpful?
2 Comments
Loading...
Leave your Comment
Loading...