React Native Loader Kit

The 50 built-in indicators and the 50 progress designs, the same on Android and iOS. Try them in the indicator gallery and the progress gallery, and copy the React Native code.

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.