Credits meter

Free · MITReact Native · Expo

A balance pill for an app bar whose digits roll when the balance changes and which turns warning colored when low, plus CreditsCost, a live price line that says what a job costs and what is left after it.

View as Markdown

Look

Try it on your phone

Scan to open this demo in your phone's browser and use it with your fingers.

Installation

$ npx shadcn@latest add https://goodui.dev/native/r/credits-meter.json

Then run npx expo install --fix so react-native-reanimated, react-native-svg match your Expo SDK. Files land in components/goodui-native/credits-meter.

Usage

import { CreditsCost, CreditsMeter } from "@/components/goodui-native/credits-meter/credits-meter";

<CreditsMeter balance={credits.balance} lowAt={10} total={40} onPress={() => router.push("/paywall")} />
<CreditsCost cost={quality === "high" ? 8 : 4} balance={credits.balance} />

When to use

Use it for

Apps where actions spend a balance, such as generations or scans.
Showing the price of a job before it starts, as options change.

Reach for something else

Money balances: use rolling-number with a currency format.
Plain usage limits with no balance: use a progress ring.

API reference

CreditsMeter

Prop	Type	Default
balance* Credits left. Changes roll the digits; a drop gives the pill a small kick.	number	—
lowAt At or below this the pill turns warning colored.	number	10
total Plan allowance. When set, a thin bar under the number shows the share left.	number	—
onPress Opens the store.	() => void	—
labels	Partial<CreditsMeterLabels>	—
style Style for the outer container.	StyleProp<ViewStyle>	—
testID Identifier for end-to-end tests.	string	—

CreditsCost

Prop	Type	Default
cost* What the current options cost. Rolls live as they change.	number	—
balance* Current balance, for the "left after" line.	number	—
labels	Partial<CreditsCostLabels>	—
style Style for the outer container.	StyleProp<ViewStyle>	—
testID Identifier for end-to-end tests.	string	—

Motion and haptics

Digits roll on every change, and the pill gives a small kick when the balance drops.
The thin allowance bar springs to its new width.
Reduced motion: no kick, and the bar jumps to its width.

Haptic: Pressing the pill uses the tap cue.

Built on RollingNumber. Changes run on the UI thread.

The pill is read as one element with the balance in words, or as a button with a hint when onPress is set.
CreditsCost is a polite live region, so changes to the price are announced.

Notes for AI

Show the server's balance. Pair with useCredits from ai-provider while mocking.
CreditsCost warns when cost is above balance; disable the action yourself in that case.
CreditBolt is exported for use beside prices elsewhere in the app.

AI provider

The logic layer behind the AI components, with no UI: a typed provider adapter with an offline mock, a credit ledger that keeps subscription and bought credits apart, and a generation queue that charges, refunds and retries.

Rolling number

A number whose digits roll in the direction of change, with digits that open and close in place and currency signs that glide instead of jumping.

AI paywall screen

A paywall for AI apps with weekly and yearly plans that each carry a credit allowance. The billed amount is always the largest price, weekly math stays in small text, the auto-renew line sits next to the buy button, and Terms, Privacy and Restore are always shown. check-kit fails if a price variant breaks this.

Generation queue

Cards for long AI jobs: each one shows its status, a fill and a light sweep while running, a rolling percentage, and cancel, retry and open actions.