Liquid Gauge
Water intake, battery, savings: a circle or capsule filled with gently waving liquid. The text stays readable over both parts. Bars move and fade on the native UI thread, so they stay smooth on iOS and Android even while your app is busy.
<LiquidGauge />1 variantNew in 2.0.1
Live — the real React Native component rendered with react-native-web. Tap, drag and scrub it.
Installation
terminal
npx expo install expo-charts react-native-svgUsage
Import the component and pass your data. Width defaults to the parent, so it adapts to phones, tablets and rotation.
LiquidGauge.tsx
<LiquidGauge value={1250} max={2000} label="ml of 2,000" />Props
| Prop | Type | Default |
|---|---|---|
| value / max Fill level. | number | — / 100 |
| shape Circle or vertical capsule. | "circle" | "pill" | "circle" |
| size / color / trackColor Look. | number / string / string | parent (≤200) / theme / tinted |
| waveHeight 0 for a flat surface. | number | 6 |
| label / formatValue Centre text. | string / (v, max) => string | — / percent |
| animate / emptyText / accessibilityLabel Motion, empty state, screen-reader label. | boolean / string / string | true / "No data" / generated |
Did you like the content?