Battery Meter

A battery gauge. The fill slides to the charge level and turns red below 20 percent, amber while charging, and green otherwise. While charging a bolt pulses over the cell. The level is read out with whether it is charging. 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 battery-meter

Manual

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

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

Usage

import { BatteryMeter } from "@/components/ui/battery-meter";

export default function Example() {
  return <BatteryMeter level={0.64} charging />;
}

Props