Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including progress-hud with all npm packages installed. Try it out:

var progressHud = require("progress-hud")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

progress-hud v1.2.0

React Native wrapper for SVProgressHUD library on iOS and KProgressHUD library on Android.


Platform License

progress-hud is a Native Module for react-native that uses SVProgressHUD on iOS and KProgressHUD on Android.

Getting started

$ npm install progress-hud --save

Mostly automatic installation

$ react-native link progress-hud


  • if RN < 0.60 $ npm install progress-hud@1.1.0

Manual installation


  1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modulesprogress-hud and add RNProgressHud.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libRNProgressHud.a to your project's Build PhasesLink Binary With Libraries
  4. Run your project (Cmd+R)<


  1. Open up android/app/src/main/java/[...]/
  • Add import com.rnprogresshud.RNProgressHudPackage; to the imports at the top of the file
  • Add new RNProgressHudPackage() to the list returned by the getPackages() method
  1. Append the following lines to android/settings.gradle:
    include ':progress-hud'
    project(':progress-hud').projectDir = new File(rootProject.projectDir,  '../node_modules/react-native-progress-display/android')
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:
      implementation project(':progress-hud')

iOS Dependency Installation:

Important: This package depends on SVProgressHUD library. Please make sure you also install SVProgressHUD

  1. Go to
  2. Follow the installation instructions and install before trying to run your project with the progress-hud package installed.


import RNProgressHud from 'progress-hud';

Showing a loading spinner with message:

// Where you want to display the spinner

Showing a loading spinner with message and mask type:

// To use one of the pre-defined styles for background color:
const ProgressHUDMaskType = RNProgressHud.ProgressHUDMaskType;
RNProgressHud.showWithStatus("Loading...", ProgressHUDMaskType.Clear);

Show circular progress view:

// Input progress parameter must be a double or float with a range of 0.0 to 1.0 representing 0% and 100%.
// This will not automatically dismiss spinner unless progress reaches 100%. Otherwise, dismiss() must be called explicitly.

RNProgressHud.showProgressWithStatus(0.25, "Downloading data...");



Dismiss with a delay (in seconds):

RNProgressHud.dismissWithDelay(1.0); // Dismisses after one second.



RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free