react-native-status-ring

A lightweight and customizable React Native component for displaying a circular image with status indicator arcs (like WhatsApp/Instagram stories). Each arc can represent a "seen" or "unseen" status using solid colors or gradients.

---

✨ Features

• Displays a central circular image
• Adds status arcs around the image
• Supports multiple statuses
• Shows seen/unseen distinction
• Supports gradient or solid colors
• Fully customizable radius, spacing, stroke width, and padding

---

📦 Installation

Install the package along with its peer dependency react-native-svg:

1npm install react-native-status-ring react-native-svg

Then, use the component in your project:

1import React from "react";
2import { View } from "react-native";
3import { Status } from "react-native-status-ring";
4
5export default function App() {
6  return (
7    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
8      <Status
9        numberOfStatus={5}
10        indexOfSeenStatus={3}
11        radius={80}
12        spacing={10}
13        strokeWidth={5}
14        padding={10}
15        seenColor="#25D366"
16        unSeenColor="#808080"
17        source={{ uri: "https://example.com/profile.jpg" }}
18      />
19    </View>
20  );
21}

---

🧩 Props

Prop	Type	Default	Description
numberOfStatus	number	— (required)	Total number of arcs to display
indexOfSeenStatus	number	— (required)	Number of arcs that are marked as "seen"
source	ImageSourcePropType	— (required)	Source for the center image (URL or local file)
spacing	number	10	Degrees of gap between arcs
radius	number	80	Radius of the outer circle
padding	number	10	Padding between arcs and the center image
strokeWidth	number	5	Thickness of each arc
seenColor	string	#25D366	Solid color for arcs marked as "seen"
unSeenColor	string	#808080	Solid color for arcs marked as "unseen"
seenGradientColors	[string, string]	undefined	Gradient for "seen" arcs (overrides seenColor)
unSeenGradientColors	[string, string]	undefined	Gradient for "unseen" arcs (overrides unSeenColor)
containerStyle	StyleProp<ViewStyle>	undefined	Style for the outer container