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:

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

Then, use the component in your project:

import React from "react";
import { View } from "react-native";
import { Status } from "react-native-status-ring";

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Status
        numberOfStatus={5}
        indexOfSeenStatus={3}
        radius={80}
        spacing={10}
        strokeWidth={5}
        padding={10}
        seenColor="#25D366"
        unSeenColor="#808080"
        source={{ uri: "https://example.com/profile.jpg" }}
      />
    </View>
  );
}

🧩 Props