Tired of reinventing the wheel?
I'm building a React Native component library - built with Tailwind CSS - designed to help developers build awesome apps in record time.
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:
Or to install with Yarn:
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:
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:
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.
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:
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:
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:
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.
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:
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:
Get the OS version in React Native (iOS/Android/Windows)
Get the operating system version of the device using the getSystemVersion function:
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.
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:
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:
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.
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.