Generation queue

Free · MITReact Native · Expo

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.

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/generation-queue.json

Then run npx expo install --fix so react-native-reanimated match your Expo SDK. Files land in components/goodui-native/generation-queue.

Usage

import { useGenerationQueue } from "@/components/goodui-native/ai-provider/ai-provider";
import { GenerationQueue } from "@/components/goodui-native/generation-queue/generation-queue";

const queue = useGenerationQueue({ provider });

<GenerationQueue
  jobs={queue.jobs}
  onOpen={(id) => router.push(`/result/${id}`)}
  onCancel={queue.cancel}
  onRetry={queue.retry}
/>

When to use

Use it for

Jobs that take seconds to minutes and let the person keep using the app.
A short history of recent generations with their results.

Reach for something else

Short tasks under a second or two: use a button's own loading state.
Long lists of finished work: use masonry-grid or a list.

API reference

Prop	Type	Default
jobs*	GenerationItem[]	—
onOpen	(id: string) => void	—
onCancel	(id: string) => void	—
onRetry	(id: string) => void	—
labels	Partial<GenerationQueueLabels>	—
style Style for the outer container.	StyleProp<ViewStyle>	—
testID Identifier for end-to-end tests.	string	—

Motion and haptics

Cards spring in, shift with a layout transition and fade out.
While a job runs, the fill springs to the progress and a light sweeps across the card.
A finished card gives a small pop.
Reduced motion: cards fade, with no sweep, layout transition or pop.

Haptic: The success cue fires when a job finishes.

Each running card has one repeating animation on the UI thread. The list is not virtualized, so keep it to recent jobs.

A finished card is a button with an open hint; other cards are disabled and read their title and status.
Cancel and Try again are separate labeled buttons.

Notes for AI

Takes the same job shape as useGenerationQueue, plus an optional thumbnail. Map jobs to add one.
The default failed label says credits were returned. Refund in onRefund, or override the label if you do not refund.
`stage` is shown as it is, so translate it first.

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.

Credits meter

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.

Blur reveal

Shows a result arriving: a scan line wipes down a blurred picture and leaves it sharp, then the frame settles with a spring and an unlock cue.