RN Animated Loader Kit

A beautiful collection of loading animations for React Native. Smooth, customizable, and easy to use.

Features

• 🎨 20 Beautiful Animations - A wide variety of loading animations to choose from
• ⚡ Smooth Performance - Uses native driver for optimal performance
• 🎯 TypeScript Support - Fully typed for better development experience
• 📦 Lightweight - No external dependencies except React Native
• 🎨 Customizable - Control colors and sizes easily
• 📱 Cross-platform - Works on both iOS and Android
• 🔒 Overlay Support - Built-in overlay component to block user interaction while loading

Installation

npm install rn-animated-loader-kit

or

yarn add rn-animated-loader-kit

Usage

Basic Usage

import React from 'react';
import { View } from 'react-native';
import LoadingAnimation from 'rn-animated-loader-kit';

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <LoadingAnimation.WaveDots color="#4A90E2" size={100} />
    </View>
  );
};

export default App;

Using Named Imports

import { WaveDots, TwistingDots } from 'rn-animated-loader-kit';

// Use the components
<WaveDots color="#4A90E2" size={100} />
<TwistingDots
  leftDotColor="#1A1A3F"
  rightDotColor="#EA3799"
  size={100}
/>

Using LoaderOverlay (Full Screen Loading)

The LoaderOverlay component provides a full-screen overlay with customizable background that blocks user interaction while loading.

import React, { useState } from 'react';
import { View, Button } from 'react-native';
import LoadingAnimation, { LoaderOverlay } from 'rn-animated-loader-kit';

const App = () => {
  const [loading, setLoading] = useState(false);

  const handleLogin = async () => {
    setLoading(true);
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 3000));
    setLoading(false);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Login" onPress={handleLogin} />

      <LoaderOverlay visible={loading}>
        <LoadingAnimation.WaveDots color="#FFFFFF" size={100} />
      </LoaderOverlay>
    </View>
  );
};

LoaderOverlay Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | visible | boolean | - | Controls overlay visibility | | children | ReactNode | - | The loading animation component to display | | backgroundColor | string | '#000000' | Background color of the overlay (supports hex, rgb, rgba) | | opacity | number | 0.7 | Opacity of the overlay (0 to 1) | | dismissible | boolean | false | Allow users to dismiss by tapping outside | | onDismiss | () => void | - | Callback when overlay is dismissed (requires dismissible: true) |

Custom Background Examples

// Light background
<LoaderOverlay
  visible={loading}
  backgroundColor="#FFFFFF"
  opacity={0.9}
>
  <LoadingAnimation.Beat color="#000000" size={100} />
</LoaderOverlay>

// Semi-transparent dark background (default)
<LoaderOverlay visible={loading}>
  <LoadingAnimation.WaveDots color="#FFFFFF" size={100} />
</LoaderOverlay>

// Dismissible overlay
<LoaderOverlay
  visible={loading}
  dismissible={true}
  onDismiss={() => setLoading(false)}
>
  <LoadingAnimation.InkDrop color="#FFFFFF" size={100} />
</LoaderOverlay>

// Custom RGBA background
<LoaderOverlay
  visible={loading}
  backgroundColor="rgba(25, 118, 210, 0.8)"
>
  <LoadingAnimation.ThreeRotatingDots color="#FFFFFF" size={100} />
</LoaderOverlay>

Available Animations

Single Color Animations

All animations accept color and size props:

WaveDots

Three dots moving in a wave pattern up and down.

<LoadingAnimation.WaveDots color="#FFFFFF" size={100} />

BouncingBall

A ball that falls and bounces back up.

<LoadingAnimation.BouncingBall color="#FFFFFF" size={100} />

StaggeredDotsWave

Five dots that expand one after another in a wave pattern.

<LoadingAnimation.StaggeredDotsWave color="#FFFFFF" size={100} />

ThreeRotatingDots

Three dots positioned in a triangle that rotate and scale.

<LoadingAnimation.ThreeRotatingDots color="#FFFFFF" size={100} />

FourRotatingDots

Four dots that shrink to center while rotating.

<LoadingAnimation.FourRotatingDots color="#FFFFFF" size={100} />

ProgressiveDots

Four dots in a row that progressively scale down.

<LoadingAnimation.ProgressiveDots color="#FFFFFF" size={100} />

InkDrop

A dot falls and expands into a circle.

<LoadingAnimation.InkDrop color="#FFFFFF" size={100} />

FallingDot

A ball falls inside a rotating ring.

<LoadingAnimation.FallingDot color="#FFFFFF" size={100} />

ThreeArchedCircle

Three arcs shrink while rotating.

<LoadingAnimation.ThreeArchedCircle color="#FFFFFF" size={100} />

HexagonDots

Six dots appear at hexagon vertices while rotating.

<LoadingAnimation.HexagonDots color="#FFFFFF" size={100} />

Beat

Inner ring expands to outer ring with pulse effect.

<LoadingAnimation.Beat color="#FFFFFF" size={100} />

TwoRotatingArc

Two arcs rotate while shrinking to dots.

<LoadingAnimation.TwoRotatingArc color="#FFFFFF" size={100} />

HorizontalRotatingDots

Three dots rotate in a horizontal plane.

<LoadingAnimation.HorizontalRotatingDots color="#FFFFFF" size={100} />

NewtonCradle

Four balls swing like Newton's cradle.

<LoadingAnimation.NewtonCradle color="#FFFFFF" size={200} />

StretchedDots

Five dots stretch up and down alternately.

<LoadingAnimation.StretchedDots color="#FFFFFF" size={100} />

HalfTriangleDot

A dot moves along two sides of a rotating triangle.

<LoadingAnimation.HalfTriangleDot color="#FFFFFF" size={100} />

DotsTriangle

Three dots move between triangle vertices.

<LoadingAnimation.DotsTriangle color="#FFFFFF" size={100} />

Multi-Color Animations

DiscreteCircle

Expanding rings with multiple colors (supports 3 colors).

<LoadingAnimation.DiscreteCircle
  color="#FFFFFF"
  size={100}
  secondRingColor="#00BCD4"
  thirdRingColor="#FF9800"
/>

Two Color Animations

These animations require leftDotColor, rightDotColor, and size props:

TwistingDots

Two dots that twist and rotate around each other.

<LoadingAnimation.TwistingDots
  leftDotColor="#1A1A3F"
  rightDotColor="#EA3799"
  size={100}
/>

Flickr

Two dots that swap positions (inspired by Flickr's loading animation).

<LoadingAnimation.Flickr
  leftDotColor="#0063DC"
  rightDotColor="#FF0084"
  size={100}
/>

API Reference

Props

Single Color Animation Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | color | string | Yes | The color of the animation (supports hex, rgb, rgba) | | size | number | Yes | The size of the animation container in pixels |

Two Color Animation Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | leftDotColor | string | Yes | The color of the left dot | | rightDotColor | string | Yes | The color of the right dot | | size | number | Yes | The size of the animation container in pixels |

Example Project

Check out the example folder for a complete working example with all animations.

To run the example:

cd example
npm install
npm run ios # or npm run android

Performance

All animations use the native driver (useNativeDriver: true) for optimal performance. The animations run at 60fps on most devices.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT

Inspiration

This library is inspired by the excellent loading_animation_widget Flutter package.

Support

If you like this package, please give it a ⭐️ on GitHub!