RN Premium Loaders

Elegant, modern, aesthetic loaders for React Native & Expo

rn-premium-loaders is a premium collection of handcrafted loading indicators designed for high-end applications, dashboards, onboarding screens, beauty apps, fintech apps, and any modern UI that requires beautiful micro-interactions.

Features

• 10 Animated Premium Loaders
• Full Dark Mode support
• Customizable color prop
• TypeScript type definitions
• Expo Snack Demo ready
• Examples folder for integration
• Lightweight (no dependencies!)
• 100% Expo compatible

Installation

Using npm

npm install rn-premium-loaders

Using yarn

yarn add rn-premium-loaders

Loaders Included

| Loader Name | Description | | -------------------- | --------------------------- | | FirecrackerLoader | Pulse explosion shimmer | | LuxeGlowLoader | Luxury soft glow | | PulseRingLoader | Subtle expanding ring | | LiquidDropLoader | Bouncy liquid droplet | | NeonFlickerLoader | Cyber neon blinking light | | WaveDotsLoader | 3-dot typing wave | | AuroraFadeLoader | Smooth aurora fade | | BreatheCircleLoader | Meditation breathing effect | | DiamondShimmerLoader | Rotating diamond shimmer | | SparkleRotateLoader | Sparkle glowing rotation |

Props

Every loader accepts the same props:

| Prop | Type | Default | Description | | ---------- | --------- | --------------- | ----------------------------------- | | size | number | varies | Controls width/height of the loader | | color | string | internal preset | Custom animation color | | darkMode | boolean | false | Enables dark mode theme | | style | ViewStyle | — | Optional wrapper style |

Usage Examples

Basic Usage

import React from "react";
import { FirecrackerLoader } from "rn-premium-loaders";

export default function App() {
  return <FirecrackerLoader size={80} />;
}

Dark Mode

import React from "react";
import { NeonFlickerLoader } from "rn-premium-loaders";

export default function App() {
  return <NeonFlickerLoader size={70} darkMode />;
}

Custom Color

import React from "react";
import { BreatheCircleLoader } from "rn-premium-loaders";

export default function App() {
  return <BreatheCircleLoader size={90} color="#FF69B4" />;
}

TypeScript Example

All loaders include full TypeScript support via index.d.ts:

import React from "react";
import { LuxeGlowLoader } from "rn-premium-loaders";

export default function Screen() {
  return <LuxeGlowLoader size={74} color="#A56CFF" />;
}

Examples Folder

The repository includes an examples/ folder with ready-to-use files:

• BasicUsage.js
• DarkModeExample.js
• CustomColorExample.js
• LoaderGallery.js

Use these as templates to integrate into your project or copy into Expo Snack for live demos.

Expo Snack Demo

Try all loaders directly in Expo Snack:
https://snack.expo.dev/@LindelwaHlawe/rn-premium-loaders

License

MIT © Lindelwa Hlawe