Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-native-status-ring

akshayambaliya151MIT1.0.1TypeScript support: included

React Native component for circular image status view with seen/unseen arcs

react-native, react-native-circular-progress, react-native-instagram-status, react-native-status-view, component

readme

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

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