Rx Scan

import { useEffect, useState } from "react";
import { View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Button, Icon, Text } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import Animated, { runOnJS, useAnimatedProps, useSharedValue, withTiming } from "react-native-reanimated";
import Svg, { Circle } from "react-native-svg";
import { Mount, Press, SERIF } from "../shared";

const AnimatedCircle = Animated.createAnimatedComponent(Circle);
const R = 34;
const CIRC = 2 * Math.PI * R;

export interface RxScanScreenProps {
  onNext?: () => void;
}

export function RxScanScreen({ onNext }: RxScanScreenProps) {
  const haptics = useHaptic();
  const progress = useSharedValue(0);
  const [done, setDone] = useState(false);
  useEffect(() => {
    progress.value = withTiming(1, { duration: 2600 }, (f) => {
      if (f) runOnJS(setDone)(true);
    });
  }, [progress]);
  const arcProps = useAnimatedProps(() => ({ strokeDashoffset: CIRC * (1 - progress.value) }));
  const restart = () => {
    haptics.light();
    setDone(false);
    progress.value = 0;
    progress.value = withTiming(1, { duration: 2600 }, (f) => {
      if (f) runOnJS(setDone)(true);
    });
  };
  return (
    <View className="flex-1 bg-[#F4F5F9]">
      <SafeAreaView className="flex-1" edges={["top"]}>
        <Mount className="flex-row items-center justify-between px-6 pt-2" delay={40}>
          <Press
            accessibilityRole="button" accessibilityLabel="Back"
            onPress={() => haptics.light()}
            className="h-11 w-11 items-center justify-center rounded-full bg-white"
          >
            <Icon name="chevron-left" size="md" color="#1C1C1E" />
          </Press>
          <Text className="text-[17px] font-semibold text-[#1C1C1E]">Lumio</Text>
          <Press
            accessibilityRole="button" accessibilityLabel="More"
            onPress={() => haptics.light()}
            className="h-11 w-11 items-center justify-center rounded-full bg-white"
          >
            <Icon name="ellipsis" size="md" color="#1C1C1E" />
          </Press>
        </Mount>
        <Mount delay={140} className="mx-6 mt-9">
          <View className="items-center rounded-[24px] bg-[#FDFDF8] px-6 pb-8 pt-6">
            <Text className="text-[14px] font-semibold text-[#1C1C1E]">
              PRESCRIPTION:
            </Text>
            <Text className={`mt-4 ${SERIF} text-[19px] italic text-[#3A3A3C]`}>
              {"Patient's concern:"}
            </Text>
            <Text className={`${SERIF} text-[24px] italic text-[#1C1C1E]`}>
              Headache
            </Text>
            <View className="mt-4 w-full rounded-[16px] bg-[#EDF8C4] px-5 py-4">
              <Text className={`${SERIF} text-[18px] italic text-[#3A3A3C]`}>
                Recommendation:
              </Text>
              <Text className={`${SERIF} text-[26px] italic text-[#1C1C1E] underline`}>
                Yakapsule!
              </Text>
              <Text className={`${SERIF} text-[17px] italic text-[#3A3A3C]`}>
                3x a day!
              </Text>
            </View>
            <View className="absolute -left-1 top-6 h-9 w-9 rounded-tl-[18px] border-l-[3px] border-t-[3px] border-[#65A30D]" />
            <View className="absolute -right-1 top-6 h-9 w-9 rounded-tr-[18px] border-r-[3px] border-t-[3px] border-[#65A30D]" />
            <View className="absolute -left-1 bottom-6 h-9 w-9 rounded-bl-[18px] border-b-[3px] border-l-[3px] border-[#65A30D]" />
            <View className="absolute -right-1 bottom-6 h-9 w-9 rounded-br-[18px] border-b-[3px] border-r-[3px] border-[#65A30D]" />
          </View>
        </Mount>
        <Mount key={done ? "done" : "scanning"} delay={220} className="mt-8 items-center px-10">
          <Text className="text-[15px] text-center leading-6 text-[#6B6B70]">
            {done
              ? "Analysis complete — 3 medicines found for your prescription."
              : "Please wait a few seconds. We are analyzing your prescription..."}
          </Text>
        </Mount>
        <View className="flex-1" />
        <Mount delay={300} className="flex-row items-center justify-center gap-8 pb-12">
          <Press
            accessibilityRole="button" accessibilityLabel="Gallery"
            onPress={restart}
            className="h-12 w-12 items-center justify-center rounded-full bg-white"
          >
            <Icon name="copy" size="md" color="#1C1C1E" />
          </Press>
          <Press accessibilityRole="button" accessibilityLabel="Analyzing" onPress={restart} className="h-20 w-20 items-center justify-center">
            <Svg width={80} height={80} className="absolute">
              <Circle cx={40} cy={40} r={R} stroke="#E3E4EA" strokeWidth={5} fill="#1C1C1E" />
              <AnimatedCircle
                cx={40}
                cy={40}
                r={R}
                stroke="#FFFFFF"
                strokeWidth={5}
                strokeLinecap="round"
                fill="none"
                strokeDasharray={CIRC}
                animatedProps={arcProps}
                rotation={-90}
                origin="40,40"
              />
            </Svg>
            {done ? (
              <Icon name="check" size="lg" color="#FFFFFF" />
            ) : (
              <Text className="text-[15px] font-bold text-[#FFFFFF]">75%</Text>
            )}
          </Press>
          <Press
            accessibilityRole="button" accessibilityLabel="Flash"
            onPress={() => haptics.light()}
            className="h-12 w-12 items-center justify-center rounded-full bg-white"
          >
            <Icon name="zap" size="md" color="#1C1C1E" />
          </Press>
        </Mount>
        <View className="px-6 pb-6">
          <Button size="lg" tone="inverse" onPress={() => { haptics.success(); onNext?.(); }} className="w-full">Done</Button>
        </View>
      </SafeAreaView>
    </View>
  );
}

Recreate the "Rx Scan" screen in React Native using LumioUI.

Goal: Rx Scan screen. 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 health-rx-scan
```

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

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

## 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/health/rx-scan.tsx` exporting RxScanScreen. 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 { useEffect, useState } from "react";
import { View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Button, Icon, Text } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import Animated, { runOnJS, useAnimatedProps, useSharedValue, withTiming } from "react-native-reanimated";
import Svg, { Circle } from "react-native-svg";
import { Mount, Press, SERIF } from "../shared";

const AnimatedCircle = Animated.createAnimatedComponent(Circle);
const R = 34;
const CIRC = 2 * Math.PI * R;

export interface RxScanScreenProps {
  onNext?: () => void;
}

export function RxScanScreen({ onNext }: RxScanScreenProps) {
  const haptics = useHaptic();
  const progress = useSharedValue(0);
  const [done, setDone] = useState(false);
  useEffect(() => {
    progress.value = withTiming(1, { duration: 2600 }, (f) => {
      if (f) runOnJS(setDone)(true);
    });
  }, [progress]);
  const arcProps = useAnimatedProps(() => ({ strokeDashoffset: CIRC * (1 - progress.value) }));
  const restart = () => {
    haptics.light();
    setDone(false);
    progress.value = 0;
    progress.value = withTiming(1, { duration: 2600 }, (f) => {
      if (f) runOnJS(setDone)(true);
    });
  };
  return (
    <View className="flex-1 bg-[#F4F5F9]">
      <SafeAreaView className="flex-1" edges={["top"]}>
        <Mount className="flex-row items-center justify-between px-6 pt-2" delay={40}>
          <Press
            accessibilityRole="button" accessibilityLabel="Back"
            onPress={() => haptics.light()}
            className="h-11 w-11 items-center justify-center rounded-full bg-white"
          >
            <Icon name="chevron-left" size="md" color="#1C1C1E" />
          </Press>
          <Text className="text-[17px] font-semibold text-[#1C1C1E]">Lumio</Text>
          <Press
            accessibilityRole="button" accessibilityLabel="More"
            onPress={() => haptics.light()}
            className="h-11 w-11 items-center justify-center rounded-full bg-white"
          >
            <Icon name="ellipsis" size="md" color="#1C1C1E" />
          </Press>
        </Mount>
        <Mount delay={140} className="mx-6 mt-9">
          <View className="items-center rounded-[24px] bg-[#FDFDF8] px-6 pb-8 pt-6">
            <Text className="text-[14px] font-semibold text-[#1C1C1E]">
              PRESCRIPTION:
            </Text>
            <Text className={`mt-4 ${SERIF} text-[19px] italic text-[#3A3A3C]`}>
              {"Patient's concern:"}
            </Text>
            <Text className={`${SERIF} text-[24px] italic text-[#1C1C1E]`}>
              Headache
            </Text>
            <View className="mt-4 w-full rounded-[16px] bg-[#EDF8C4] px-5 py-4">
              <Text className={`${SERIF} text-[18px] italic text-[#3A3A3C]`}>
                Recommendation:
              </Text>
              <Text className={`${SERIF} text-[26px] italic text-[#1C1C1E] underline`}>
                Yakapsule!
              </Text>
              <Text className={`${SERIF} text-[17px] italic text-[#3A3A3C]`}>
                3x a day!
              </Text>
            </View>
            <View className="absolute -left-1 top-6 h-9 w-9 rounded-tl-[18px] border-l-[3px] border-t-[3px] border-[#65A30D]" />
            <View className="absolute -right-1 top-6 h-9 w-9 rounded-tr-[18px] border-r-[3px] border-t-[3px] border-[#65A30D]" />
            <View className="absolute -left-1 bottom-6 h-9 w-9 rounded-bl-[18px] border-b-[3px] border-l-[3px] border-[#65A30D]" />
            <View className="absolute -right-1 bottom-6 h-9 w-9 rounded-br-[18px] border-b-[3px] border-r-[3px] border-[#65A30D]" />
          </View>
        </Mount>
        <Mount key={done ? "done" : "scanning"} delay={220} className="mt-8 items-center px-10">
          <Text className="text-[15px] text-center leading-6 text-[#6B6B70]">
            {done
              ? "Analysis complete — 3 medicines found for your prescription."
              : "Please wait a few seconds. We are analyzing your prescription..."}
          </Text>
        </Mount>
        <View className="flex-1" />
        <Mount delay={300} className="flex-row items-center justify-center gap-8 pb-12">
          <Press
            accessibilityRole="button" accessibilityLabel="Gallery"
            onPress={restart}
            className="h-12 w-12 items-center justify-center rounded-full bg-white"
          >
            <Icon name="copy" size="md" color="#1C1C1E" />
          </Press>
          <Press accessibilityRole="button" accessibilityLabel="Analyzing" onPress={restart} className="h-20 w-20 items-center justify-center">
            <Svg width={80} height={80} className="absolute">
              <Circle cx={40} cy={40} r={R} stroke="#E3E4EA" strokeWidth={5} fill="#1C1C1E" />
              <AnimatedCircle
                cx={40}
                cy={40}
                r={R}
                stroke="#FFFFFF"
                strokeWidth={5}
                strokeLinecap="round"
                fill="none"
                strokeDasharray={CIRC}
                animatedProps={arcProps}
                rotation={-90}
                origin="40,40"
              />
            </Svg>
            {done ? (
              <Icon name="check" size="lg" color="#FFFFFF" />
            ) : (
              <Text className="text-[15px] font-bold text-[#FFFFFF]">75%</Text>
            )}
          </Press>
          <Press
            accessibilityRole="button" accessibilityLabel="Flash"
            onPress={() => haptics.light()}
            className="h-12 w-12 items-center justify-center rounded-full bg-white"
          >
            <Icon name="zap" size="md" color="#1C1C1E" />
          </Press>
        </Mount>
        <View className="px-6 pb-6">
          <Button size="lg" tone="inverse" onPress={() => { haptics.success(); onNext?.(); }} className="w-full">Done</Button>
        </View>
      </SafeAreaView>
    </View>
  );
}
```

Screen: https://lumioui.dev/screens/health-rx-scan