react-native-device-info

Device Information for React Native

Install

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

RN > 0.47 use 0.11 or higher

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

• 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)

Permissions

Add the appropriate, optional permissions to your AndroidManifest.xml:

...
<uses-permission android:name="android.permission.BLUETOOTH"/>         <!-- for Device Name -->
<uses-permission android:name="android.permission.READ_PHONE_STATE"/>  <!-- for Phone Number -->

Release Notes

See CHANGELOG.md

Example

var DeviceInfo = require('react-native-device-info');
// or import DeviceInfo from 'react-native-device-info';

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 to the returned bridge function in your javascript:

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