Goal quiz

Free · MITReact Native · Expo

A one-question-a-page onboarding built from an array of steps: single and multi choice, picture grids, sliders, stat pages, a timed analysing page and custom pages, with a progress bar and back navigation.

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/goal-quiz.json

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

Usage

import { GoalQuiz, type QuizStep } from "@/components/goodui-native/goal-quiz/goal-quiz";

const steps: QuizStep[] = [
  {
    id: "goal",
    type: "single",
    title: "What is your main goal?",
    options: [
      { id: "lose", label: "Lose weight" },
      { id: "fit", label: "Get fitter" },
    ],
  },
  { id: "days", type: "slider", title: "Days a week?", min: 1, max: 7, initial: 3, unit: "days" },
  { id: "plan", type: "analysing", title: "Building your plan", items: ["Your goal", "Your schedule"] },
];

<GoalQuiz steps={steps} onComplete={(answers) => savePlan(answers)} onExit={() => router.back()} />

When to use

Use it for

Onboarding that tailors the app to the person's goal before a plan or paywall.
Short surveys with one question per page.

Reach for something else

Forms with typed fields and validation: use text fields on a normal screen.
Feature tours: use page-dots-onboarding.

API reference

Prop	Type	Default
steps*	QuizStep[]	—
onComplete* Every answer by step id.	(answers: QuizAnswers) => void	—
onStepChange Called on each step, for analytics or a live preview.	(index: number, answers: QuizAnswers) => void	—
onExit Leaves the quiz from the first step.	() => void	—
onSkip Shows Skip in the header.	() => void	—
labels	Partial<GoalQuizLabels>	—
style Style for the outer container.	StyleProp<ViewStyle>	—
testID Identifier for end-to-end tests.	string	—

Motion and haptics

Pages slide in by 36 pt in the direction of travel and mirror under RTL, while the progress bar springs forward.
Options stagger in, and stat numbers roll up.
Reduced motion: pages and options fade.

Haptic: Tap and select cues on options, confirm on finish, a tick for each analysing row, then success.

Only the current page is mounted.

Options are radios or checkboxes with their state, and the title of each page is a header.
The progress bar reads its step number, for example Step 2 of 5.
Sliders use the step title as their label.

Notes for AI

A single-choice step advances on its own. Multi, slider and stat steps get a Continue button. Back skips analysing steps.
The analysing step is a timer, not real work. Use it only if the next page really is built from the answers.
Stat pages need a real number and a source in `note`. Do not invent figures.
It is full-screen: render it in a route with the header hidden.
Pass translated text in the steps; only the buttons come from the language pack.

Plan chart

A plan reveal: a curve draws itself from today to the goal, then a goal flag pops with a success cue. It shows a labeled shape, not measured data.

Onboarding pager

A full-screen onboarding pager: pages follow the finger 1:1 with parallax on their content, the page dot stretches toward the next page like a worm, and the Next button grows with the swipe into a full-width Get started on the last page.

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.

Slider

Single and range sliders whose thumbs follow the finger 1:1 and settle onto the nearest step on release, with a value bubble that grows out of the thumb while dragging and optional step ticks that tick.