Gauge Meter

A half-circle gauge. The arc sweeps round from the left to the value on a spring, with the percentage in the middle and an optional caption below it. The arc is built from clipped, rotated Views, so it needs no SVG package. It reads out as a progress bar. 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 gauge-meter

Manual

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

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

Usage

import { GaugeMeter } from "@/components/ui/gauge-meter";

export default function Example() {
  return <GaugeMeter value={0.62} caption="Storage used" />;
}

Props