react-native-device-info

Device Information for React Native

Install

npm install --save react-native-loading-progressbar

RN > 0.47 use 0.11 or higher

Automatically link

With React Native 0.27+

react-native link react-native-loading-progressbar

With older versions of React Native

You need rnpm (npm install -g rnpm)

rnpm link react-native-loading-progressbar

Manually link

iOS (via Cocoa Pods)

Add the following line to your build targets in your Podfile

pod 'RNreact-native-loading-progressbar', :path => '../node_modules/react-native-loading-progressbar'

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-react-native-loading-progressbar
• Add the .xcodeproj file

In XCode, in the project navigator, select your project.

• Add the libRNreact-native-loading-progressbar.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-loading-progressbar')
}

• in android/settings.gradle:

...
include ':app'
+ include ':react-native-loading-progressbar'
+ project(':react-native-loading-progressbar').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-loading-progressbar/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 ProgressbarPackage(),
          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 ProgressbarPackage(),
        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-loading-progressbar/windows/react-native-loading-progressbarPackage and add RNDeviceInfo.csproj
• this time right click on your React Native Windows app under your solutions directory and click Add > Reference...
• check the react-native-loading-progressbarPackage 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 ProgressbarPackage(),
                };
            }

(Thanks to @josephan for writing the instructions)