Native loading indicators for React Native. Every indicator is a small JSON spec rendered by LoaderKit, the same engine on iOS and Android, so an indicator looks and moves the same on both platforms. You can tweak the built-in indicators with params, write your own (experimental), and control playback (speed, pause, a frozen frame, reduced motion). LoaderKitProgress shows the progress of a task in 50 designs across 10 types, from linear and circular bars to gauges, liquid, batteries and an hourglass.

Documentation: maitrungduc1410.github.io/loader-kit/platforms/react-native

Requirements

| Version | React Native | Architecture | Maintained on | | --- | --- | --- | --- | | 5.x | 0.76 or newer | New Architecture only | master, npm latest | | 4.x | see the v4 README | New and old architecture | v4 branch, npm v4-lts |

Version 5 needs the New Architecture (the default since React Native 0.76). An app built with newArchEnabled=false (Android) or RCT_NEW_ARCH_ENABLED=0 (iOS) fails at build time with a message pointing to version 4, which you install with npm install react-native-loader-kit@v4-lts.

Upgrading from version 4? See Migrating from version 4.

Installation

npm install react-native-loader-kit
# or
yarn add react-native-loader-kit

iOS:

cd ios && pod install

Expo: run npx expo prebuild, then restart the project. Expo Go is not supported.

Usage

import { LoaderKitView, LoaderKitProgress } from 'react-native-loader-kit';

// One of the 50 built-in indicators
<LoaderKitView name="BallPulse" color="#7c3aed" style={{ width: 50, height: 50 }} />

// The progress of a task, from 0 to 1 (null for indeterminate)
<LoaderKitProgress value={progress} />

Documentation

The React Native page covers every prop of LoaderKitView and LoaderKitProgress, custom specs and troubleshooting. The rest of the site applies as is:

• Built-in indicators: the 50 names and their params, with a live gallery that copies React Native code.
• Progress indicators: the 10 types and 50 designs.
• Customizing and Playback: colors, size, speed, stopping and reduced motion.
• Custom indicators: the spec format (experimental).

Demo

A fully working demo is located in the example folder.

Thanks

The indicators of version 4 reproduce the work of NVActivityIndicatorView and loaders.css; ChasingDots and SquareGridWave reproduce SpinKit. Version 4 used AVLoadingIndicatorView on Android.