# Goal quiz

> 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.

- Type: Component (navigation)
- Access: Free, open source (MIT)
- Page: https://goodui.dev/native/components/goal-quiz
- Markdown: https://goodui.dev/native/components/goal-quiz.md
- Registry item: https://goodui.dev/native/r/goal-quiz.json
- Dependencies: react-native-reanimated
- Keywords: react native onboarding quiz, survey onboarding, personalized plan quiz, multi step form, web to app funnel quiz

## When to use

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

## When not to use

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

## Installation

With the shadcn CLI (needs a components.json in the Expo app), then `npx expo install --fix` so native dependencies match your Expo SDK. The foundation comes along the first time.

```bash
npx shadcn@latest add https://goodui.dev/native/r/goal-quiz.json
npx expo install --fix
```

The component lands in `components/goodui-native/goal-quiz/` and imports the foundation from `components/goodui-native/foundation/` with relative paths; it also installs button, locale, rolling-number, slider.

Built-in strings follow `<GooduiLocaleProvider>` (one [language pack](https://goodui.dev/native/r/locale-tr.json) translates the whole kit); the `labels` prop overrides them for one instance.

## Usage

```tsx
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()} />
```

## API reference

### GoalQuiz

`import { GoalQuiz } from "@/components/goodui-native/goal-quiz/goal-quiz";`

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

## Accessibility

- 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.

## Motion

- 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.

## Haptics

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

## Performance

- Only the current page is mounted.

## 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.

## Related

- [Plan chart](https://goodui.dev/native/components/plan-chart.md): 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](https://goodui.dev/native/components/page-dots-onboarding.md): 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](https://goodui.dev/native/components/ai-paywall-screen.md): 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](https://goodui.dev/native/components/slider.md): 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.

## Guidance for AI tools

Goal quiz: 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. Use only the documented props. Keep accessibility, reduced motion and both color schemes intact when adapting it.

Full library index: https://goodui.dev/native/llms.txt