What is react-native-device-info?
The react-native-device-info package provides device information and system details for React Native applications. It allows developers to access a wide range of device-specific information, such as device ID, system version, and more.
What are react-native-device-info's main functionalities?
Get Device ID
This feature allows you to retrieve the unique device ID of the device running the application.
import DeviceInfo from 'react-native-device-info';
const deviceId = DeviceInfo.getDeviceId();
console.log(deviceId);
Get System Version
This feature allows you to get the operating system version of the device.
import DeviceInfo from 'react-native-device-info';
const systemVersion = DeviceInfo.getSystemVersion();
console.log(systemVersion);
Get Application Version
This feature allows you to retrieve the version of the application currently running on the device.
import DeviceInfo from 'react-native-device-info';
const appVersion = DeviceInfo.getVersion();
console.log(appVersion);
Get Battery Level
This feature allows you to get the current battery level of the device.
import DeviceInfo from 'react-native-device-info';
DeviceInfo.getBatteryLevel().then(batteryLevel => {
console.log(batteryLevel);
});
Get Device Name
This feature allows you to retrieve the name of the device.
import DeviceInfo from 'react-native-device-info';
DeviceInfo.getDeviceName().then(deviceName => {
console.log(deviceName);
});
Other packages similar to react-native-device-info
react-native-device
The react-native-device package offers basic device information like device ID and system version. It is simpler and may not provide as extensive information as react-native-device-info.
react-native-battery
The react-native-battery package focuses specifically on battery-related information, such as battery level and charging status. It is more specialized compared to the broader scope of react-native-device-info.
react-native-device-info
Device Information for React Native
Install
npm install --save react-native-device-info
Automatically link
With React Native 0.27+
react-native link react-native-device-info
With older versions of React Native
You need rnpm
(npm install -g rnpm
)
rnpm link react-native-device-info
Manually link
iOS (via Cocoa Pods)
Add the following line to your build targets in your Podfile
pod 'RNDeviceInfo', :path => '../node_modules/react-native-device-info'
Then run pod install
iOS (without Cocoa Pods)
In XCode, in the project navigator:
- Right click Libraries
- Add Files to [your project's name]
- Go to
node_modules/react-native-device-info
- Add the
.xcodeproj
file
In XCode, in the project navigator, select your project.
- Add the
libRNDeviceInfo.a
from the deviceinfo project to your project's Build Phases ➜ Link Binary With Libraries - Click
.xcodeproj
file you added before in the project navigator and go the Build Settings tab. Make sure All is toggled on (instead of Basic). - Look for Header Search Paths and make sure it contains both
$(SRCROOT)/../react-native/React
and $(SRCROOT)/../../React
- Mark both as recursive (should be OK by default).
Run your project (Cmd+R)
(Thanks to @brysgo for writing the instructions)
Android
With React Native 0.29+
+ import com.learnium.RNDeviceInfo.RNDeviceInfo;
public class MainApplication extends Application implements ReactApplication {
//......
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
+ new RNDeviceInfo(),
new MainReactPackage()
);
}
......
}
With older versions of React Native:
+ import com.learnium.RNDeviceInfo.RNDeviceInfo;
public class MainActivity extends ReactActivity {
......
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
+ new RNDeviceInfo(),
new MainReactPackage()
);
}
}
(Thanks to @chirag04 for writing the instructions)
Device Name
If you want to get the device name in Android add this to your AndroidManifest.xml
(optional):
...
<uses-permission android:name="android.permission.BLUETOOTH"/>
Release Notes
See CHANGELOG.md
Example
var DeviceInfo = require('react-native-device-info');
console.log("Device Unique ID", DeviceInfo.getUniqueID());
console.log("Device Manufacturer", DeviceInfo.getManufacturer());
console.log("Device Brand", DeviceInfo.getBrand());
console.log("Device Model", DeviceInfo.getModel());
console.log("Device ID", DeviceInfo.getDeviceId());
console.log("System Name", DeviceInfo.getSystemName());
console.log("System Version", DeviceInfo.getSystemVersion());
console.log("Bundle ID", DeviceInfo.getBundleId());
console.log("Build Number", DeviceInfo.getBuildNumber());
console.log("App Version", DeviceInfo.getVersion());
console.log("App Version (Readable)", DeviceInfo.getReadableVersion());
console.log("Device Name", DeviceInfo.getDeviceName());
console.log("User Agent", DeviceInfo.getUserAgent());
console.log("Device Locale", DeviceInfo.getDeviceLocale());
console.log("Device Country", DeviceInfo.getDeviceCountry());
console.log("App Instance ID", DeviceInfo.getInstanceID());