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.

What You Should Read Next

The following articles are related to the easiest way to get react native device information.

Reactjs is becoming popular to build seamless and scalable websites. The article explains why use react js for web development.

The ultimate guide to React Native swiper plugins including swipeable lists, swipeout style examples and swipe a list item to delete.

A guide to show a React Native Modal box in full screen, bottom-half screen, transparent background, close on click outside with style examples

A step-by-step thorough guide that will use both React Native video and player plugins into one single demo app with code attached

The ultimate guide to adding a react native background image to your application with two straightforward different approaches

The simplest and unique guide to upgrade your react native app to version 0.60.5 and handle all the common errors gracefully and step by step

The simplest and straight forward guide to adding a react native dropdown select menu to a react native project in 3 steps

The ultimate and simplest guide to run "react native run android" on mac in 3 easy steps with screenshots and commands.

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

Very informative post, detailed and to the point getting the react native device data. Thank you

Than for the useful information am so happy now.

Leave your Comment
Loading...
Contact us now!
Loading...