Biometric Setup Screen

import * as React from "react";
import { View, ScrollView } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useEffect, useState } from "react";
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withRepeat,
  withTiming,
} from "react-native-reanimated";
import { Button, Glass, Icon, Switch, Text, type IconName } from "@lumioui/ui";
import { timing, useReducedMotion } from "@lumioui/core";
import { BLOCK_STAGGER, GlowSpot, Mount, Press, World } from "../shared";

export interface BiometricUseCase {
  key: string;
  label: string;
  enabled: boolean;
}

export interface BiometricSetupScreenProps {
  /** Sensor shown in copy — "face" renders Face ID, "fingerprint" Touch ID. */
  kind?: "face" | "fingerprint";
  /** What the biometric will gate — mirrors iOS Settings ▸ Face ID toggles. */
  uses?: BiometricUseCase[];
  onUseChange?: (key: string, enabled: boolean) => void;
  onEnable?: () => void;
  onSkip?: () => void;
  onBack?: () => void;
}

const DEFAULT_USES: BiometricUseCase[] = [
  { key: "signin", label: "App sign-in", enabled: true },
  { key: "purchases", label: "Approve purchases", enabled: true },
  { key: "autofill", label: "Password autofill", enabled: false },
];

/** Biometric setup — a scan-frame viewfinder (brackets + sweep line) over
 *  the iOS Face ID toggle idiom, enable and not-now actions. */
export function BiometricSetupScreen({
  kind = "face",
  uses = DEFAULT_USES,
  onUseChange,
  onEnable,
  onSkip,
  onBack,
}: BiometricSetupScreenProps) {
  const insets = useSafeAreaInsets();
  const [enabled, setEnabled] = useState<Record<string, boolean>>(() =>
    Object.fromEntries(uses.map((u) => [u.key, u.enabled]))
  );
  const [loading, setLoading] = useState(false);
  const label = kind === "face" ? "Face ID" : "Touch ID";

  const toggle = (key: string) => (value: boolean) => {
    setEnabled((prev) => ({ ...prev, [key]: value }));
    onUseChange?.(key, value);
  };

  const submit = () => {
    setLoading(true);
    onEnable?.();
    setTimeout(() => setLoading(false), 800);
  };

  return (
    <World primary="#65A30D">
    <View className="flex-1 bg-[#101012]">
      {/* Violet field the scan frame reads against — the glass rows pick
          the bloom up through their frost. */}
      <GlowSpot color="#BEF04C" size={340} className="left-1/2 top-[6%] -translate-x-1/2" />
      {/* Top bar — back affordance clears the status bar */}
      <View className="px-2" style={{ paddingTop: insets.top + 4 }}>
        <Press
          onPress={onBack}
          haptic="light"
          pressedScale={0.97}
          accessibilityRole="button"
          accessibilityLabel="Go back"
          hitSlop={8}
          className="h-11 flex-row items-center gap-1 self-start px-2"
        >
          <Icon name="chevron-left" size="sm" color="#A3E635" />
          <Text className="text-base text-[#A3E635]">Back</Text>
        </Press>
      </View>

      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerClassName="flex-grow px-6"
        contentContainerStyle={{ paddingTop: 8, paddingBottom: insets.bottom + 24 }}
      >
        {/* Scan frame — the enrollment viewfinder itself, not decoration */}
        <Mount delay={0}>
          <View className="items-center pt-4">
            <ScanFrame
              glyph={kind === "face" ? "scan-face" : "fingerprint"}
              accessibilityLabel={`${label} scanner`}
            />
          </View>
        </Mount>

        <Mount delay={BLOCK_STAGGER}>
          <View className="mt-7 items-center gap-3">
            <Text variant="h1" className="text-center tracking-tight text-white">
              Set up {label}
            </Text>
            <Text className="max-w-xs text-center text-base leading-relaxed text-white/60">
              Unlock and approve {kind === "face" ? "with a glance" : "with a touch"} — your
              biometric never leaves this device.
            </Text>
          </View>
        </Mount>

        {/* Use-case toggles — the real iOS Face ID settings idiom */}
        <Mount delay={BLOCK_STAGGER * 2}>
          <View className="mt-8">
            <Text variant="small" className="mb-2 px-1 font-medium uppercase tracking-widest text-white/50">
              Use {label} for
            </Text>
            <View className="overflow-hidden rounded-2xl bg-white/10">
              {uses.map((use, i) => (
                <View
                  key={use.key}
                  className={`flex-row items-center justify-between px-4 py-3.5 ${i > 0 ? "border-t border-white/10" : ""}`}
                >
                  <Press
                    onPress={() => toggle(use.key)(!(enabled[use.key] ?? false))}
                    haptic="light"
                    pressedScale={0.98}
                    accessibilityRole="button"
                    accessibilityState={{ checked: enabled[use.key] ?? false }}
                    className="flex-1"
                  >
                    <Text className="text-[15px] font-medium text-white">{use.label}</Text>
                  </Press>
                  <Switch
                    checked={enabled[use.key] ?? false}
                    onCheckedChange={toggle(use.key)}
                    accessibilityLabel={`${label} for ${use.label}`}
                  />
                </View>
              ))}
            </View>
          </View>
        </Mount>

        <Mount delay={BLOCK_STAGGER * 3} className="mt-auto">
          <View className="gap-1 pt-8">
            <Button
              size="lg"
              loading={loading}
              onPress={submit}
              haptic="medium"
              className="bg-[#65A30D] w-full"
              accessibilityLabel={`Set up ${label}`}
            >
              Set up {label}
            </Button>
            <Press
              onPress={onSkip}
              haptic="light"
              pressedScale={0.97}
              accessibilityRole="button"
              accessibilityLabel="Skip biometric setup"
              hitSlop={8}
              className="min-h-11 items-center justify-center px-2"
            >
              <Text variant="muted" className="text-sm">Not now</Text>
            </Press>
            <Text variant="muted" className="pb-1 text-center text-xs">
              You can change this anytime in Settings → Security.
            </Text>
          </View>
        </Mount>
      </ScrollView>
    </View>
    </World>
  );
}
BiometricSetupScreen.displayName = "BiometricSetupScreen";

const BRACKET = "absolute h-7 w-7 border-[#A3E635]";
const FRAME_SIZE = 176;

/** Enrollment viewfinder — four corner brackets around the sensor glyph with
 *  a scan line sweeping the frame, the same visual Face ID setup shows. */
function ScanFrame({ glyph, accessibilityLabel }: { glyph: IconName; accessibilityLabel: string }) {
  const reduce = useReducedMotion();
  const sweep = useSharedValue(0);

  useEffect(() => {
    if (reduce) {
      sweep.value = 0.5;
      return;
    }
    // timing.slow (600ms) reversed forever — the calm enrolled-scan pace.
    sweep.value = withRepeat(withTiming(1, timing.slow), -1, true);
  }, [reduce, sweep]);

  const lineStyle = useAnimatedStyle(() => ({
    transform: [{ translateY: sweep.value * (FRAME_SIZE - 24) }],
  }));

  return (
    <View
      className="items-center justify-center"
      style={{ width: FRAME_SIZE, height: FRAME_SIZE }}
      accessibilityLabel={accessibilityLabel}
      accessibilityRole="image"
    >
      <View className={`${BRACKET} left-0 top-0 rounded-tl-xl border-l-2 border-t-2`} />
      <View className={`${BRACKET} right-0 top-0 rounded-tr-xl border-r-2 border-t-2`} />
      <View className={`${BRACKET} bottom-0 left-0 rounded-bl-xl border-b-2 border-l-2`} />
      <View className={`${BRACKET} bottom-0 right-0 rounded-br-xl border-b-2 border-r-2`} />
      <Animated.View
        style={lineStyle}
        className="absolute left-5 right-5 top-3 h-0.5 rounded-full bg-[#A3E635]/70"
        accessibilityElementsHidden
        importantForAccessibility="no"
      />
      <Icon name={glyph} size="xl" color="#A3E635" />
    </View>
  );
}
ScanFrame.displayName = "ScanFrame";

Recreate the "Biometric Setup Screen" screen in React Native using LumioUI.

Goal: Face ID opt-in — scan-frame viewfinder with sweep line, iOS use-case toggles, enable and not-now actions 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-biometric-setup
```

Or pull just the components: `npx lumioui add button icon list switch 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>` ×1

### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×2

### `list` — Settings-style rows with separators and press feedback.
- imported but not rendered directly — likely used through a sibling or as a utility

### `switch` — iOS-size toggle with spring thumb and haptics.
- `<Switch>` ×1

### `text` — Themed type scale from caption to display.
- `<Text>` ×7

## 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/biometric-setup.tsx` exporting BiometricSetupScreen. 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 * as React from "react";
import { View, ScrollView } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useEffect, useState } from "react";
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withRepeat,
  withTiming,
} from "react-native-reanimated";
import { Button, Glass, Icon, Switch, Text, type IconName } from "@lumioui/ui";
import { timing, useReducedMotion } from "@lumioui/core";
import { BLOCK_STAGGER, GlowSpot, Mount, Press, World } from "../shared";

export interface BiometricUseCase {
  key: string;
  label: string;
  enabled: boolean;
}

export interface BiometricSetupScreenProps {
  /** Sensor shown in copy — "face" renders Face ID, "fingerprint" Touch ID. */
  kind?: "face" | "fingerprint";
  /** What the biometric will gate — mirrors iOS Settings ▸ Face ID toggles. */
  uses?: BiometricUseCase[];
  onUseChange?: (key: string, enabled: boolean) => void;
  onEnable?: () => void;
  onSkip?: () => void;
  onBack?: () => void;
}

const DEFAULT_USES: BiometricUseCase[] = [
  { key: "signin", label: "App sign-in", enabled: true },
  { key: "purchases", label: "Approve purchases", enabled: true },
  { key: "autofill", label: "Password autofill", enabled: false },
];

/** Biometric setup — a scan-frame viewfinder (brackets + sweep line) over
 *  the iOS Face ID toggle idiom, enable and not-now actions. */
export function BiometricSetupScreen({
  kind = "face",
  uses = DEFAULT_USES,
  onUseChange,
  onEnable,
  onSkip,
  onBack,
}: BiometricSetupScreenProps) {
  const insets = useSafeAreaInsets();
  const [enabled, setEnabled] = useState<Record<string, boolean>>(() =>
    Object.fromEntries(uses.map((u) => [u.key, u.enabled]))
  );
  const [loading, setLoading] = useState(false);
  const label = kind === "face" ? "Face ID" : "Touch ID";

  const toggle = (key: string) => (value: boolean) => {
    setEnabled((prev) => ({ ...prev, [key]: value }));
    onUseChange?.(key, value);
  };

  const submit = () => {
    setLoading(true);
    onEnable?.();
    setTimeout(() => setLoading(false), 800);
  };

  return (
    <World primary="#65A30D">
    <View className="flex-1 bg-[#101012]">
      {/* Violet field the scan frame reads against — the glass rows pick
          the bloom up through their frost. */}
      <GlowSpot color="#BEF04C" size={340} className="left-1/2 top-[6%] -translate-x-1/2" />
      {/* Top bar — back affordance clears the status bar */}
      <View className="px-2" style={{ paddingTop: insets.top + 4 }}>
        <Press
          onPress={onBack}
          haptic="light"
          pressedScale={0.97}
          accessibilityRole="button"
          accessibilityLabel="Go back"
          hitSlop={8}
          className="h-11 flex-row items-center gap-1 self-start px-2"
        >
          <Icon name="chevron-left" size="sm" color="#A3E635" />
          <Text className="text-base text-[#A3E635]">Back</Text>
        </Press>
      </View>

      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerClassName="flex-grow px-6"
        contentContainerStyle={{ paddingTop: 8, paddingBottom: insets.bottom + 24 }}
      >
        {/* Scan frame — the enrollment viewfinder itself, not decoration */}
        <Mount delay={0}>
          <View className="items-center pt-4">
            <ScanFrame
              glyph={kind === "face" ? "scan-face" : "fingerprint"}
              accessibilityLabel={`${label} scanner`}
            />
          </View>
        </Mount>

        <Mount delay={BLOCK_STAGGER}>
          <View className="mt-7 items-center gap-3">
            <Text variant="h1" className="text-center tracking-tight text-white">
              Set up {label}
            </Text>
            <Text className="max-w-xs text-center text-base leading-relaxed text-white/60">
              Unlock and approve {kind === "face" ? "with a glance" : "with a touch"} — your
              biometric never leaves this device.
            </Text>
          </View>
        </Mount>

        {/* Use-case toggles — the real iOS Face ID settings idiom */}
        <Mount delay={BLOCK_STAGGER * 2}>
          <View className="mt-8">
            <Text variant="small" className="mb-2 px-1 font-medium uppercase tracking-widest text-white/50">
              Use {label} for
            </Text>
            <View className="overflow-hidden rounded-2xl bg-white/10">
              {uses.map((use, i) => (
                <View
                  key={use.key}
                  className={`flex-row items-center justify-between px-4 py-3.5 ${i > 0 ? "border-t border-white/10" : ""}`}
                >
                  <Press
                    onPress={() => toggle(use.key)(!(enabled[use.key] ?? false))}
                    haptic="light"
                    pressedScale={0.98}
                    accessibilityRole="button"
                    accessibilityState={{ checked: enabled[use.key] ?? false }}
                    className="flex-1"
                  >
                    <Text className="text-[15px] font-medium text-white">{use.label}</Text>
                  </Press>
                  <Switch
                    checked={enabled[use.key] ?? false}
                    onCheckedChange={toggle(use.key)}
                    accessibilityLabel={`${label} for ${use.label}`}
                  />
                </View>
              ))}
            </View>
          </View>
        </Mount>

        <Mount delay={BLOCK_STAGGER * 3} className="mt-auto">
          <View className="gap-1 pt-8">
            <Button
              size="lg"
              loading={loading}
              onPress={submit}
              haptic="medium"
              className="bg-[#65A30D] w-full"
              accessibilityLabel={`Set up ${label}`}
            >
              Set up {label}
            </Button>
            <Press
              onPress={onSkip}
              haptic="light"
              pressedScale={0.97}
              accessibilityRole="button"
              accessibilityLabel="Skip biometric setup"
              hitSlop={8}
              className="min-h-11 items-center justify-center px-2"
            >
              <Text variant="muted" className="text-sm">Not now</Text>
            </Press>
            <Text variant="muted" className="pb-1 text-center text-xs">
              You can change this anytime in Settings → Security.
            </Text>
          </View>
        </Mount>
      </ScrollView>
    </View>
    </World>
  );
}
BiometricSetupScreen.displayName = "BiometricSetupScreen";

const BRACKET = "absolute h-7 w-7 border-[#A3E635]";
const FRAME_SIZE = 176;

/** Enrollment viewfinder — four corner brackets around the sensor glyph with
 *  a scan line sweeping the frame, the same visual Face ID setup shows. */
function ScanFrame({ glyph, accessibilityLabel }: { glyph: IconName; accessibilityLabel: string }) {
  const reduce = useReducedMotion();
  const sweep = useSharedValue(0);

  useEffect(() => {
    if (reduce) {
      sweep.value = 0.5;
      return;
    }
    // timing.slow (600ms) reversed forever — the calm enrolled-scan pace.
    sweep.value = withRepeat(withTiming(1, timing.slow), -1, true);
  }, [reduce, sweep]);

  const lineStyle = useAnimatedStyle(() => ({
    transform: [{ translateY: sweep.value * (FRAME_SIZE - 24) }],
  }));

  return (
    <View
      className="items-center justify-center"
      style={{ width: FRAME_SIZE, height: FRAME_SIZE }}
      accessibilityLabel={accessibilityLabel}
      accessibilityRole="image"
    >
      <View className={`${BRACKET} left-0 top-0 rounded-tl-xl border-l-2 border-t-2`} />
      <View className={`${BRACKET} right-0 top-0 rounded-tr-xl border-r-2 border-t-2`} />
      <View className={`${BRACKET} bottom-0 left-0 rounded-bl-xl border-b-2 border-l-2`} />
      <View className={`${BRACKET} bottom-0 right-0 rounded-br-xl border-b-2 border-r-2`} />
      <Animated.View
        style={lineStyle}
        className="absolute left-5 right-5 top-3 h-0.5 rounded-full bg-[#A3E635]/70"
        accessibilityElementsHidden
        importantForAccessibility="no"
      />
      <Icon name={glyph} size="xl" color="#A3E635" />
    </View>
  );
}
ScanFrame.displayName = "ScanFrame";
```

Screen: https://lumioui.dev/screens/auth-biometric-setup