Ring Meter

A circular progress ring built from plain views, with no SVG or gradient package. Two half rings, each a bordered circle clipped to one side, are turned by the same value: the right half sweeps first, then the left takes over, so the arc grows smoothly all the way round. The middle shows the percentage, or any content you put inside it. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add ring-meter

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/ring-meter.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { Text } from "react-native";
import { RingMeter } from "@/components/ui/ring-meter";

export default function Example() {
  return (
    <RingMeter value={0.74} size={160} thickness={14} label="Daily steps">
      <Text style={{ fontSize: 28, fontWeight: "800" }}>7,420</Text>
    </RingMeter>
  );
}

Props