Welcome, Guest Blogger
This post is structured as follows.
- Installing React-Native-Device-Info Plugin in your React Native project
- Importing the plugin
- Calling the React Native Device Info Plugin
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.
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.
- DeviceInfo.getUniqueID() - to get the device unique ID. This ID will change if the app is uninstalled.
- DeviceInfo.getManufacturer() - to get the device manufacturer, for example: Apple.
- DeviceInfo.getModel() - to get the device model, for example, iPhone X.
- DeviceInfo.getSystemVersion() - to get the system version, for example, 12.0 or 9.0.
- DeviceInfo.getBundleId() - to get the bundle ID, for example, com.myapp.ReactNativeDeviceInfo
- DeviceInfo.getBuildNumber() - to get the build number.
- DeviceInfo.getVersion() - to get the app version, for example, 1.0.0.
- DeviceInfo.getDeviceName() - to get the device name, for example, John's iPhone.
- DeviceInfo.getUserAgent() - to get the user agent, check the app screenshot above.
- DeviceInfo.getDeviceLocale() - to get the device locale, for example, en, to display some content that matches device language.
- 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.
Very informative post, detailed and to the point getting the react native device data. Thank you
Reply to Daniel Craig
Than for the useful information am so happy now.
Reply to craid downey