nativerepo.com

react-native-device-info

npm version

Device Information for React Native

Install

npm install --save react-native-device-info

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

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

  • in android/app/build.gradle:
dependencies {
    ...
    compile "com.facebook.react:react-native:+"  // From node_modules
+   compile project(':react-native-device-info')
}
  • in android/settings.gradle:
...
include ':app'
+ include ':react-native-device-info'
+ project(':react-native-device-info').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-device-info/android')

With React Native 0.29+

  • in MainApplication.java:
+ 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:

  • in MainActivity.java:
+ 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)

Windows

  • Open the solution in Visual Studio for your Windows apps
  • right click your in the Explorer and click Add > Existing Project...
  • Navigate to ./<app-name>/node_modules/react-native-device-info/windows/RNDeviceInfo and add RNDeviceInfo.csproj
  • this time right click on your React Native Windows app under your solutions directory and click Add > Reference...
  • check the RNDeviceInfo you just added and press ok
  • open up MainPage.cs for your app and edit the file like so:
+ using RNDeviceInfo;
......
            get
            {
                return new List<IReactPackage>
                {
                    new MainReactPackage(),
+                   new RNDeviceInfoPackage(),
                };
            }

(Thanks to @josephan 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');
// or import DeviceInfo from 'react-native-device-info';
NameMethodReturnNotes
Device Unique IDgetUniqueID()FCDBD8EF-62FC-4ECB-B2F5-92C9E79AC7F9This is IDFV on iOS so it will change if all apps from the current apps vendor have been previously uninstalled.
Device ManufacturergetManufacturer()Apple
Device BrandgetBrand()Apple / htc / Xiaomi
Device ModelgetModel()iPhone 6
Device IDgetDeviceId()iPhone7,2Or the board on Android e.g. goldfish
System NamegetSystemName()iPhone OS
System VersiongetSystemVersion()9.0
Bundle IDgetBundleId()com.learnium.mobile
Build NumbergetBuildNumber()89
App VersiongetVersion()1.1.0
App Version (Readable)getReadableVersion()1.1.0.89
Device NamegetDeviceName()Becca's iPhone 6
User AgentgetUserAgent()Dalvik/2.1.0 (Linux; U; Android 5.1; Google Nexus 4 - 5.1.0 - API 22 - 768x1280 Build/LMY47D)
Device LocalegetDeviceLocale()en-US
Device CountrygetDeviceCountry()US
TimezonegetTimezone()America/Mexico_City
App Instance IDgetInstanceID()ANDROID ONLY - see https://developers.google.com/instance-id/
App is running in emulatorisEmulator()trueif app is running in emulator return true
App is running on a tabletisTablet()trueif app is running on a tablet return true
PIN or fingerprint setisPinOrFingerprintSet(callback)Only supported in Android and iOS 9.0 and above

Since the device setting for PIN/Fingerprint can be modified while the app is still open, this is available via callback instead of as a constant. To use, pass a callback function in your javascript:

RNDeviceInfo.isPinOrFingerprintSet(isPinOrFingerprintSet => {
  if (!isPinOrFingerprintSet) {
    ...
  }
}

Comments
Details
Added at: 2017/03/06
Owner: rebeccahughes
Category: system
Homepage: https://github.com/rebeccahughes/react-native-device-info#readme
Downloads last month: 61610
Version: 0.10.2
Compatibility
  •  
  •  

Add to your project

npm i --save react-native-device-info