react-native-device-information v0.0.1

react-native-device-information

Device Information for React Native

Note this is a folk of react-native-device-info. Full credit to them. With the modification that it doesnt require the depency for

    compile 'com.google.android.gms:play-services-gcm:+'

so that it doesnt conflict with firebase.

Also it was fun for me to get stuck into a react native module and make some changes :)

I havent tested on windows or ios...

Install

npm install --save react-native-device-information

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-information

Manually link

iOS (via Cocoa Pods)

Add the following line to your build targets in your Podfile

pod 'RNDeviceInformation', :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 libRNDeviceInformation.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-information')
}

• in android/settings.gradle:

...
include ':app'
+ include ':react-native-device-information'
+ project(':react-native-device-information').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-device-information/android')

With React Native 0.29+

• in MainApplication.java:

+ import net.gen10.RNDeviceInformation.RNDeviceInformation;

  public class MainApplication extends Application implements ReactApplication {
    //......

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
+         new RNDeviceInformation(),
          new MainReactPackage()
      );
    }

    ......
  }

With older versions of React Native:

• in MainActivity.java:

+ import com.learnium.RNDeviceInformation.RNDeviceInfo;

  public class MainActivity extends ReactActivity {
    ......

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
+       new RNDeviceInformation(),
        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/RNDeviceInformation and add RNDeviceInformation.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 RNDeviceInformation;
......
            get
            {
                return new List<IReactPackage>
                {
                    new MainReactPackage(),
+                   new RNDeviceInformationPackage(),
                };
            }

(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 DeviceInformation = require('react-native-device-information');
// 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 in your javascript:

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