Multi-step personalization quiz — progress bar with step counter, selectable option cards (single + multi), animated question transitions, and a pinned continue button
import { useState } from "react";
import { View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Button, Icon, Progress, Text, type IconName } from "@lumioui/ui";
import { AnimatedPressable, cn, useHaptic, usePressAnimation, type ColorTokens, } from "@lumioui/core";
import { BLOCK_STAGGER, Mount, StickyBottomBar, World } from "../shared";
export interface QuizOption {
id: string;
label: string;
icon?: IconName;
hint?: string;
}
export interface QuizStep {
id: string;
question: string;
accent?: string;
detail?: string;
options: QuizOption[];
/** Allow multiple selections; default single. */
multi?: boolean;
}
export interface QuizScreenProps {
steps?: QuizStep[];
/** Fires on every selection change — (stepId, selected option ids). */
onAnswer?: (stepId: string, optionIds: string[]) => void;
/** Last step's Continue — gets the full answers map. */
onComplete?: (answers: Record<string, string[]>) => void;
onSkip?: () => void;
onBack?: () => void;
/** Preselected answers (stepId → option ids) for demos/previews —
* production hosts omit it so the quiz starts unanswered. */
defaultAnswers?: Record<string, string[]>;
}
const DEFAULT_STEPS: QuizStep[] = [
{
id: "goal",
question: "What are you building?",
accent: "building",
detail: "We'll tailor the component suggestions to your app.",
options: [
{ id: "consumer", label: "Consumer app", icon: "users" },
{ id: "commerce", label: "Store or marketplace", icon: "shopping-cart" },
{ id: "saas", label: "SaaS or internal tool", icon: "briefcase" },
{ id: "side", label: "Side project", icon: "zap" },
],
},
{
id: "interests",
question: "Which areas matter most?",
accent: "areas",
detail: "Pick as many as you like.",
multi: true,
options: [
{ id: "gestures", label: "Gestures", icon: "pointer", hint: "Swipes, drags, sheets" },
{ id: "motion", label: "Motion", icon: "repeat", hint: "Springs and choreography" },
{ id: "forms", label: "Forms", icon: "file-text", hint: "Inputs, pickers, masks" },
{ id: "overlays", label: "Overlays", icon: "grid", hint: "Sheets, menus, toasts" },
],
},
{
id: "experience",
question: "How deep is your React Native?",
accent: "React Native",
options: [
{ id: "new", label: "Just getting started" },
{ id: "comfortable", label: "Shipped an app or two" },
{ id: "deep", label: "I live in Reanimated" },
],
},
];
/** Selectable option row — icon, label, hint, radio/checkbox ring that
* matches the step's single/multi mode. */
function OptionCard({
option,
selected,
multi,
tint,
onToggle,
}: {
option: QuizOption;
selected: boolean;
multi: boolean;
tint: { bg: string; fg: keyof ColorTokens };
onToggle: (id: string) => void;
}) {
const haptics = useHaptic();
const press = usePressAnimation({ pressedScale: 0.98, fast: true });
return (
<AnimatedPressable
style={press.animatedStyle}
onPressIn={press.onPressIn}
onPressOut={press.onPressOut}
onPress={() => {
haptics.selection();
onToggle(option.id);
}}
accessibilityRole={multi ? "checkbox" : "radio"}
accessibilityState={{ selected }}
accessibilityLabel={`${option.label}${option.hint ? `, ${option.hint}` : ""}`}
className={cn(
"min-h-14 flex-row items-center gap-3 overflow-hidden rounded-3xl border-2 px-4 py-4",
selected ? "border-[#65A30D] bg-[#EDF8C4] dark:bg-white/10" : "border-transparent bg-white dark:bg-[#1A1A20]"
)}
>
{option.icon ? (
<View
className={cn(
"h-9 w-9 items-center justify-center rounded-xl",
selected ? "bg-[#65A30D]/15" : tint.bg
)}
>
<Icon
name={option.icon}
size="md"
color={selected ? "primary" : tint.fg}
/>
</View>
) : null}
<View className="flex-1">
<Text variant="small" className="font-semibold">
{option.label}
</Text>
{option.hint ? (
<Text variant="muted" className="text-xs">
{option.hint}
</Text>
) : null}
</View>
<View
className={cn(
"h-5 w-5 items-center justify-center border-2",
multi ? "rounded-md" : "rounded-full",
selected ? "border-[#65A30D] bg-[#65A30D]" : "border-border"
)}
>
{selected ? <Icon name="check" size="sm" color="primaryForeground" /> : null}
</View>
</AnimatedPressable>
);
}
OptionCard.displayName = "OptionCard";
// Rotating soft tints so each option's icon tile reads as its own thing.
const OPTION_TINTS = [
{ bg: "bg-[#EDF8C4]", fg: "primary" as const },
{ bg: "bg-success/15", fg: "success" as const },
{ bg: "bg-warning/15", fg: "warning" as const },
{ bg: "bg-chart-3/15", fg: "chart3" as const },
];
/** OnboardingQuiz — the Finch/Duolingo/Noom pattern: one question per
* step, progress bar up top, option cards, continue pinned at the
* bottom. Answers feed personalization before the paywall lands. */
export function QuizScreen({
steps = DEFAULT_STEPS,
onAnswer,
onComplete,
onSkip,
onBack,
defaultAnswers,
}: QuizScreenProps) {
const haptics = useHaptic();
const [index, setIndex] = useState(0);
const [answers, setAnswers] = useState<Record<string, string[]>>(defaultAnswers ?? {});
const step = steps[index];
const last = index === steps.length - 1;
const selected = step ? (answers[step.id] ?? []) : [];
const canContinue = selected.length > 0;
const toggle = (optionId: string) => {
if (!step) return;
const next = step.multi
? selected.includes(optionId)
? selected.filter((o) => o !== optionId)
: [...selected, optionId]
: [optionId];
const nextAnswers = { ...answers, [step.id]: next };
setAnswers(nextAnswers);
onAnswer?.(step.id, next);
};
const advance = () => {
haptics.light();
if (last) {
onComplete?.(answers);
} else {
setIndex((i) => i + 1);
}
};
const retreat = () => {
if (index > 0) {
haptics.light();
setIndex((i) => i - 1);
} else {
onBack?.();
}
};
return (
<World primary="#65A30D">
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
{/* Header — back, progress, step counter, skip. */}
<Mount>
<View className="flex-row items-center gap-2 px-4 pb-2 pt-2">
<Button
variant="ghost"
size="icon"
haptic={false}
onPress={retreat}
accessibilityLabel={index > 0 ? "Previous question" : "Go back"}
>
<Icon name="chevron-left" size="md" color="foreground" />
</Button>
<View className="flex-1">
<Progress value={((index + 1) / Math.max(steps.length, 1)) * 100} />
</View>
<Text variant="muted" className="w-10 text-center text-xs tabular-nums">
{index + 1}/{steps.length}
</Text>
{onSkip ? (
<Button
variant="ghost"
size="sm"
haptic={false}
onPress={onSkip}
accessibilityLabel="Skip personalization"
>
Skip
</Button>
) : null}
</View>
</Mount>
{step ? (
// key={step.id} remounts the Mount on every step change, replaying
// the rise+fade so each question assembles the same way.
<Mount key={step.id} delay={BLOCK_STAGGER} className="flex-1 gap-6 px-6 pb-28 pt-6">
<View className="gap-2">
<Text variant="h2" accessibilityRole="header">
{step.accent && step.question.includes(step.accent)
? step.question.split(step.accent).map((part, i, arr) => (
<Text key={i} variant="h2">
{part}
{i < arr.length - 1 ? (
<Text variant="h2" className="text-primary">{step.accent}</Text>
) : null}
</Text>
))
: step.question}
</Text>
{step.detail ? <Text variant="muted">{step.detail}</Text> : null}
{step.multi ? (
<View className="flex-row items-center gap-1.5">
<Icon name="check-circle" size="sm" color="mutedForeground" />
<Text variant="muted" className="text-xs font-medium uppercase tracking-widest">
Select all that apply
</Text>
</View>
) : null}
</View>
<View className="gap-3">
{step.options.map((o, i) => (
<OptionCard
key={o.id}
option={o}
selected={selected.includes(o.id)}
multi={!!step.multi}
tint={OPTION_TINTS[i % OPTION_TINTS.length]!}
onToggle={toggle}
/>
))}
</View>
</Mount>
) : null}
<Mount delay={BLOCK_STAGGER * 2}>
<StickyBottomBar>
<Button
size="lg"
haptic="medium"
disabled={!canContinue}
accessibilityState={{ disabled: !canContinue }}
onPress={advance}
accessibilityLabel={last ? "Finish personalization" : "Next question"}
className="bg-[#65A30D]">
{last ? "Get started" : "Continue"}
</Button>
</StickyBottomBar>
</Mount>
</SafeAreaView>
</World>
);
}
QuizScreen.displayName = "QuizScreen";
Recreate the "Onboarding Quiz Screen" screen in React Native using LumioUI.
Goal: Multi-step personalization quiz — progress bar with step counter, selectable option cards (single + multi), animated question transitions, and a pinned continue button Match the reference implementation's layout, behavior, and motion exactly — this is a production screen, not a mockup.
## Setup
Fastest path — install the screen plus its component deps:
```bash
npx lumioui add auth-quiz
```
Or pull just the components: `npx lumioui add button icon progress text`
Native packages:
- @lumioui/ui@latest
- @lumioui/core@latest
- react-native-safe-area-context@*
- react-native-reanimated@*
- react-native-svg@*
- nativewind@*
Stack assumptions: Expo SDK 54 / RN 0.81, Reanimated 4, NativeWind v4, TypeScript strict, Expo Go compatible.
## Components — how, where, when
### `button` — Tactile pill button with press spring, ink wash and async loading.
- `<Button>` ×3
### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×4
### `progress` — Animated fill bar with indeterminate sweep mode.
- `<Progress>` ×1
### `text` — Themed type scale from caption to display.
- `<Text>` ×8
## Conventions (non-negotiable)
- Styling via NativeWind `className` with semantic tokens only: `bg-background`, `text-foreground`, `bg-card`, `text-card-foreground`, `bg-secondary`, `bg-muted`, `text-muted-foreground`, `bg-accent`, `bg-destructive`, `border-border`. Hard-coded colors only inside media overlays (`text-white`, `bg-black/N`).
- Motion via the token presets from `@lumioui/core` (`spring.press`, `spring.surface`, `spring.glide`, `timing.fast`, `timing.slow`, …) — no bespoke spring configs or durations.
- Gate transform motion behind `useReducedMotion()`; keep opacity/color feedback, drop travel and overshoot.
- Haptics via `useHaptic()`: `light` on press, `selection` on toggle/select, `warning` on invalid input. Never import expo-haptics directly.
- Press feedback via `usePressAnimation()` (~0.97 scale), not `activeOpacity` tricks.
- a11y: `accessibilityRole` + `accessibilityLabel` on every control, touch targets ≥44pt.
- Entrance choreography: staggered `Mount` wrappers (delay 0/60/120…) so regions land in sequence instead of popping in at once.
- Wrap the screen in `SafeAreaView`; keep dark mode working via the semantic tokens.
## Deliverable
One file: `screens/auth/quiz.tsx` exporting QuizScreen. Preserve the props interface — the host app wires the callbacks (navigation, submit handlers) through them.
## Reference implementation
The LumioUI source for this screen — reproduce it faithfully:
```tsx
import { useState } from "react";
import { View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Button, Icon, Progress, Text, type IconName } from "@lumioui/ui";
import { AnimatedPressable, cn, useHaptic, usePressAnimation, type ColorTokens, } from "@lumioui/core";
import { BLOCK_STAGGER, Mount, StickyBottomBar, World } from "../shared";
export interface QuizOption {
id: string;
label: string;
icon?: IconName;
hint?: string;
}
export interface QuizStep {
id: string;
question: string;
accent?: string;
detail?: string;
options: QuizOption[];
/** Allow multiple selections; default single. */
multi?: boolean;
}
export interface QuizScreenProps {
steps?: QuizStep[];
/** Fires on every selection change — (stepId, selected option ids). */
onAnswer?: (stepId: string, optionIds: string[]) => void;
/** Last step's Continue — gets the full answers map. */
onComplete?: (answers: Record<string, string[]>) => void;
onSkip?: () => void;
onBack?: () => void;
/** Preselected answers (stepId → option ids) for demos/previews —
* production hosts omit it so the quiz starts unanswered. */
defaultAnswers?: Record<string, string[]>;
}
const DEFAULT_STEPS: QuizStep[] = [
{
id: "goal",
question: "What are you building?",
accent: "building",
detail: "We'll tailor the component suggestions to your app.",
options: [
{ id: "consumer", label: "Consumer app", icon: "users" },
{ id: "commerce", label: "Store or marketplace", icon: "shopping-cart" },
{ id: "saas", label: "SaaS or internal tool", icon: "briefcase" },
{ id: "side", label: "Side project", icon: "zap" },
],
},
{
id: "interests",
question: "Which areas matter most?",
accent: "areas",
detail: "Pick as many as you like.",
multi: true,
options: [
{ id: "gestures", label: "Gestures", icon: "pointer", hint: "Swipes, drags, sheets" },
{ id: "motion", label: "Motion", icon: "repeat", hint: "Springs and choreography" },
{ id: "forms", label: "Forms", icon: "file-text", hint: "Inputs, pickers, masks" },
{ id: "overlays", label: "Overlays", icon: "grid", hint: "Sheets, menus, toasts" },
],
},
{
id: "experience",
question: "How deep is your React Native?",
accent: "React Native",
options: [
{ id: "new", label: "Just getting started" },
{ id: "comfortable", label: "Shipped an app or two" },
{ id: "deep", label: "I live in Reanimated" },
],
},
];
/** Selectable option row — icon, label, hint, radio/checkbox ring that
* matches the step's single/multi mode. */
function OptionCard({
option,
selected,
multi,
tint,
onToggle,
}: {
option: QuizOption;
selected: boolean;
multi: boolean;
tint: { bg: string; fg: keyof ColorTokens };
onToggle: (id: string) => void;
}) {
const haptics = useHaptic();
const press = usePressAnimation({ pressedScale: 0.98, fast: true });
return (
<AnimatedPressable
style={press.animatedStyle}
onPressIn={press.onPressIn}
onPressOut={press.onPressOut}
onPress={() => {
haptics.selection();
onToggle(option.id);
}}
accessibilityRole={multi ? "checkbox" : "radio"}
accessibilityState={{ selected }}
accessibilityLabel={`${option.label}${option.hint ? `, ${option.hint}` : ""}`}
className={cn(
"min-h-14 flex-row items-center gap-3 overflow-hidden rounded-3xl border-2 px-4 py-4",
selected ? "border-[#65A30D] bg-[#EDF8C4] dark:bg-white/10" : "border-transparent bg-white dark:bg-[#1A1A20]"
)}
>
{option.icon ? (
<View
className={cn(
"h-9 w-9 items-center justify-center rounded-xl",
selected ? "bg-[#65A30D]/15" : tint.bg
)}
>
<Icon
name={option.icon}
size="md"
color={selected ? "primary" : tint.fg}
/>
</View>
) : null}
<View className="flex-1">
<Text variant="small" className="font-semibold">
{option.label}
</Text>
{option.hint ? (
<Text variant="muted" className="text-xs">
{option.hint}
</Text>
) : null}
</View>
<View
className={cn(
"h-5 w-5 items-center justify-center border-2",
multi ? "rounded-md" : "rounded-full",
selected ? "border-[#65A30D] bg-[#65A30D]" : "border-border"
)}
>
{selected ? <Icon name="check" size="sm" color="primaryForeground" /> : null}
</View>
</AnimatedPressable>
);
}
OptionCard.displayName = "OptionCard";
// Rotating soft tints so each option's icon tile reads as its own thing.
const OPTION_TINTS = [
{ bg: "bg-[#EDF8C4]", fg: "primary" as const },
{ bg: "bg-success/15", fg: "success" as const },
{ bg: "bg-warning/15", fg: "warning" as const },
{ bg: "bg-chart-3/15", fg: "chart3" as const },
];
/** OnboardingQuiz — the Finch/Duolingo/Noom pattern: one question per
* step, progress bar up top, option cards, continue pinned at the
* bottom. Answers feed personalization before the paywall lands. */
export function QuizScreen({
steps = DEFAULT_STEPS,
onAnswer,
onComplete,
onSkip,
onBack,
defaultAnswers,
}: QuizScreenProps) {
const haptics = useHaptic();
const [index, setIndex] = useState(0);
const [answers, setAnswers] = useState<Record<string, string[]>>(defaultAnswers ?? {});
const step = steps[index];
const last = index === steps.length - 1;
const selected = step ? (answers[step.id] ?? []) : [];
const canContinue = selected.length > 0;
const toggle = (optionId: string) => {
if (!step) return;
const next = step.multi
? selected.includes(optionId)
? selected.filter((o) => o !== optionId)
: [...selected, optionId]
: [optionId];
const nextAnswers = { ...answers, [step.id]: next };
setAnswers(nextAnswers);
onAnswer?.(step.id, next);
};
const advance = () => {
haptics.light();
if (last) {
onComplete?.(answers);
} else {
setIndex((i) => i + 1);
}
};
const retreat = () => {
if (index > 0) {
haptics.light();
setIndex((i) => i - 1);
} else {
onBack?.();
}
};
return (
<World primary="#65A30D">
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
{/* Header — back, progress, step counter, skip. */}
<Mount>
<View className="flex-row items-center gap-2 px-4 pb-2 pt-2">
<Button
variant="ghost"
size="icon"
haptic={false}
onPress={retreat}
accessibilityLabel={index > 0 ? "Previous question" : "Go back"}
>
<Icon name="chevron-left" size="md" color="foreground" />
</Button>
<View className="flex-1">
<Progress value={((index + 1) / Math.max(steps.length, 1)) * 100} />
</View>
<Text variant="muted" className="w-10 text-center text-xs tabular-nums">
{index + 1}/{steps.length}
</Text>
{onSkip ? (
<Button
variant="ghost"
size="sm"
haptic={false}
onPress={onSkip}
accessibilityLabel="Skip personalization"
>
Skip
</Button>
) : null}
</View>
</Mount>
{step ? (
// key={step.id} remounts the Mount on every step change, replaying
// the rise+fade so each question assembles the same way.
<Mount key={step.id} delay={BLOCK_STAGGER} className="flex-1 gap-6 px-6 pb-28 pt-6">
<View className="gap-2">
<Text variant="h2" accessibilityRole="header">
{step.accent && step.question.includes(step.accent)
? step.question.split(step.accent).map((part, i, arr) => (
<Text key={i} variant="h2">
{part}
{i < arr.length - 1 ? (
<Text variant="h2" className="text-primary">{step.accent}</Text>
) : null}
</Text>
))
: step.question}
</Text>
{step.detail ? <Text variant="muted">{step.detail}</Text> : null}
{step.multi ? (
<View className="flex-row items-center gap-1.5">
<Icon name="check-circle" size="sm" color="mutedForeground" />
<Text variant="muted" className="text-xs font-medium uppercase tracking-widest">
Select all that apply
</Text>
</View>
) : null}
</View>
<View className="gap-3">
{step.options.map((o, i) => (
<OptionCard
key={o.id}
option={o}
selected={selected.includes(o.id)}
multi={!!step.multi}
tint={OPTION_TINTS[i % OPTION_TINTS.length]!}
onToggle={toggle}
/>
))}
</View>
</Mount>
) : null}
<Mount delay={BLOCK_STAGGER * 2}>
<StickyBottomBar>
<Button
size="lg"
haptic="medium"
disabled={!canContinue}
accessibilityState={{ disabled: !canContinue }}
onPress={advance}
accessibilityLabel={last ? "Finish personalization" : "Next question"}
className="bg-[#65A30D]">
{last ? "Get started" : "Continue"}
</Button>
</StickyBottomBar>
</Mount>
</SafeAreaView>
</World>
);
}
QuizScreen.displayName = "QuizScreen";
```
Screen: https://lumioui.dev/screens/auth-quiz