rn-progress-kit

A lightweight, fully customizable circular and horizontal progress indicator for React Native — with an optional animated "Seal of Mastery" badge that appears on completion. Zero required config, fully themeable, written in TypeScript.

✨ Features

• 🔵 Circular and ▬ horizontal progress types in a single component
• 🎨 Fully customizable colors, sizes, and text — with sensible defaults out of the box
• 🏅 Optional animated completion badge (Seal of Mastery) at 100%
• 📦 Zero extra dependencies for any feature, including the seal
• 🧾 Full TypeScript support with exported types
• ⚡ Smooth built-in animations, no setup required

📸 Preview

Circular — Default	Circular — Customized

Horizontal — Default	Horizontal — Customized

📦 Installation

npm install rn-progress-kit

This package requires react-native-svg as a peer dependency:

npx expo install react-native-svg

That's it — no other dependencies needed for any feature, including the Seal of Mastery.

🚀 Usage

import { ProgressKit } from 'rn-progress-kit';

// Circular
<ProgressKit type="circular" progress={65} />

// Circular with completion badge
<ProgressKit type="circular" progress={100} showSealOnComplete={true} />

// Horizontal
<ProgressKit type="horizontal" progress={65} />

// Horizontal with fixed width
<ProgressKit type="horizontal" progress={65} width={250} />

⚙️ Props

Shared

Prop	Type	Default	Description
type	"circular" | "horizontal"	— (required)	Which style to render
progress	number	— (required)	Progress value, 0–100
trackColor	string	#E5E7EB	Background track color
fillColor	string	#C9A227	Progress fill color

Circular only

Prop	Type	Default	Description
size	number	64	Diameter of the circle
strokeWidth	number	3	Thickness of the ring
textColor	string	#1B1F27	Color of the percentage label
showText	boolean	true	Whether to show the percentage label
fontSize	number	auto-scaled from size and strokeWidth	Manual override for the percentage label's font size
showSealOnComplete	boolean	false	Show an animated badge instead of the ring at 100%
sealStrokeColor	string	#C9A227	Seal rim and tick mark color
sealFillColor	string	rgba(201,162,39,0.12)	Seal inner circle fill color
sealCheckColor	string	#C9A227	Seal checkmark color

Horizontal only

Prop	Type	Default	Description
width	number | string	fills parent container	Bar width — accepts a number or a percentage string like "80%"
height	number	6	Thickness of the bar
borderRadius	number	999	Corner radius of the bar

🧾 TypeScript

Types are exported directly from the package:

import type { ProgressKitProps, ProgressKitType } from 'rn-progress-kit';

📄 License

MIT © Ban-Space