Uwalk Umap Screen

import * as React from "react";
import { View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import Svg, { Ellipse, Path } from "react-native-svg";
import { Avatar, Icon, Text } from "@lumioui/ui";
import { cn } from "@lumioui/core";
import { Mount, Press, PulseRing } from "../shared";

/** Bay-area style map canvas — flat pale land, a water mass through the
 *  middle, thin roads, and city labels. Deliberately abstract (the refs use
 *  a real map tile; we fake it with shapes so it ships offline). */
function MapCanvas() {
  return (
    <View className="absolute inset-0 bg-[#E8F2E3]">
      <Svg width="100%" height="100%" viewBox="0 0 402 852" preserveAspectRatio="xMidYMid slice">
        {/* water */}
        <Ellipse cx={180} cy={430} rx={120} ry={260} fill="#BFE0F7" />
        <Ellipse cx={150} cy={600} rx={90} ry={180} fill="#BFE0F7" />
        {/* islands */}
        <Path d="M150 290 q20 -14 34 4 q-4 20 -26 18 q-14 -8 -8 -22" fill="#D6EBC9" />
        <Path d="M176 380 q16 -8 26 8 q-6 14 -22 10 q-8 -8 -4 -18" fill="#D6EBC9" />
        {/* roads */}
        <Path d="M40 620 Q 200 540 402 470" stroke="#FFFFFF" strokeWidth={3} fill="none" opacity={0.9} />
        <Path d="M320 210 L 300 852" stroke="#FFFFFF" strokeWidth={3} fill="none" opacity={0.9} />
        <Path d="M0 500 L 402 380" stroke="#FFFFFF" strokeWidth={2} fill="none" opacity={0.7} />
        <Path d="M60 300 L 60 852" stroke="#FFFFFF" strokeWidth={2} fill="none" opacity={0.7} />
        <Path d="M160 460 L 340 430" stroke="#FFFFFF" strokeWidth={2.5} fill="none" opacity={0.8} />
      </Svg>
      {/* labels */}
      <Text className="absolute left-[86px] top-[292px] text-[11px] font-medium text-[#7A8B6E]">Angel Island</Text>
      <Text className="absolute left-[168px] top-[370px] text-[11px] font-medium text-[#7A8B6E]">Treasure Island</Text>
      <Text className="absolute right-[26px] top-[268px] text-[13px] font-semibold text-[#4A5A42]">Berkeley</Text>
      <Text className="absolute right-[30px] top-[410px] text-[13px] font-semibold text-[#4A5A42]">Oakland</Text>
      <Text className="absolute right-[34px] top-[500px] text-[12px] font-medium text-[#7A8B6E]">Alameda</Text>
      <Text className="absolute left-[70px] top-[472px] text-[13px] font-semibold text-[#4A5A42]">San Francisco</Text>
      <Text className="absolute bottom-[128px] right-[32px] text-[12px] font-medium text-[#7A8B6E]">San Mateo</Text>
      {/* you-are-here marker — frosted disc with the step icon, pulsing */}
      <View className="absolute left-[222px] top-[368px] h-16 w-16 items-center justify-center">
        <PulseRing color="#FFFFFF" size={64} />
        <View className="h-16 w-16 items-center justify-center rounded-full bg-white/85 shadow-lg shadow-black/10">
          <Icon name="footprints" size="xl" color="#1C1C1E" />
        </View>
      </View>
    </View>
  );
}

/** Bottom segmented control — a floating frosted pill where the active
 *  section is a filled dark lozenge (the ref's steps/target/trophy nav). */
function MapNav() {
  const items = [
    { icon: "footprints" as const, active: true },
    { icon: "medal" as const, active: false },
    { icon: "trophy" as const, active: false },
  ];
  return (
    <View className="mx-16 flex-row items-center justify-between rounded-full bg-white/90 p-1.5 shadow-lg shadow-black/10">
      {items.map((it) => (
        <Press
          key={it.icon}
          accessibilityRole="button"
          className={cn(
            "h-11 flex-1 items-center justify-center rounded-full",
            it.active && "bg-[#1C1C1E]",
          )}
        >
          <Icon name={it.icon} size="md" color={it.active ? "#FFFFFF" : "#8E8E93"} />
        </Press>
      ))}
    </View>
  );
}

/** Walk map — the "you moved today" home: an illustrated map canvas with
 *  the day's recap headline, a marker where you are, a white stat card
 *  (7,050 steps / kcal / km / mins), and the floating segmented nav. */
export function WalkMapScreen({ onNotifications, onProfile }: { onNotifications?: () => void; onProfile?: () => void }) {
  return (
    <View className="flex-1 bg-[#E8F2E3]">
      <MapCanvas />

      <SafeAreaView className="flex-1" edges={["top", "bottom"]}>
        <View className="flex-row items-center justify-between px-4 pt-1">
          <Press onPress={onProfile} hitSlop={8} accessibilityRole="button" accessibilityLabel="Profile">
            <Avatar fallback="AK" size="md" source={{ uri: "https://i.pravatar.cc/150?img=32" }} />
          </Press>
          <Press
            onPress={onNotifications}
            hitSlop={8}
            accessibilityRole="button"
            accessibilityLabel="Notifications"
            className="h-11 w-11 items-center justify-center rounded-full bg-white/90"
          >
            <Icon name="bell" size="md" color="#1C1C1E" />
          </Press>
        </View>

        <Mount delay={80} className="px-5 pt-3">
          <Text className="text-[23px] font-bold leading-snug text-[#1C1C1E]">
            You've walked <Icon name="footprints" size="md" color="#1C1C1E" />
            8.4km, burned{"\n"}
            <Icon name="flame" size="md" color="#F97316" />
            582 calories, and collected{"\n"}
            <Icon name="crown" size="md" color="#1C1C1E" />
            3 new artifacts.
          </Text>
        </Mount>

        <View className="flex-1" />

        {/* stat card */}
        <Mount delay={140} className="px-5 pb-3">
          <View className="rounded-[28px] bg-white p-5 shadow-xl shadow-black/10">
            <View className="mb-1 h-9 w-9 items-center justify-center rounded-full bg-[#1C1C1E]/[0.06]">
              <Icon name="footprints" size="md" color="#1C1C1E" />
            </View>
            <Text className="text-[46px] font-bold tracking-tight text-[#1C1C1E]">7,050</Text>
            <View className="mt-3 flex-row">
              {[
                ["326", "kcal", "Calories"],
                ["3.8", "km", "Distance"],
                ["52", "mins", "Active time"],
              ].map(([v, u, l]) => (
                <View key={l} className="flex-1">
                  <View className="flex-row items-baseline gap-1">
                    <Text className="text-[18px] font-bold text-[#1C1C1E]">{v}</Text>
                    <Text className="text-[12px] text-[#1C1C1E]/45">{u}</Text>
                  </View>
                  <Text className="mt-0.5 text-[12px] text-[#1C1C1E]/45">{l}</Text>
                </View>
              ))}
            </View>
          </View>
        </Mount>

        <MapNav />
      </SafeAreaView>
    </View>
  );
}
WalkMapScreen.displayName = "WalkMapScreen";

Recreate the "Uwalk Umap Screen" screen in React Native using LumioUI.

Goal: Uwalk Umap 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-walk-map
```

Or pull just the components: `npx lumioui add button text icon avatar`

Native packages:
- @lumioui/ui@latest
- @lumioui/core@latest
- react-native-safe-area-context@*
- react-native-svg@*
- react-native-reanimated@*
- 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.
- imported but not rendered directly — likely used through a sibling or as a utility

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

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

### `avatar` — Circular user image with fallback initials and status dot.
- `<Avatar>` ×1

## 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/walk-map.tsx` exporting WalkMapScreen. 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 } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import Svg, { Ellipse, Path } from "react-native-svg";
import { Avatar, Icon, Text } from "@lumioui/ui";
import { cn } from "@lumioui/core";
import { Mount, Press, PulseRing } from "../shared";

/** Bay-area style map canvas — flat pale land, a water mass through the
 *  middle, thin roads, and city labels. Deliberately abstract (the refs use
 *  a real map tile; we fake it with shapes so it ships offline). */
function MapCanvas() {
  return (
    <View className="absolute inset-0 bg-[#E8F2E3]">
      <Svg width="100%" height="100%" viewBox="0 0 402 852" preserveAspectRatio="xMidYMid slice">
        {/* water */}
        <Ellipse cx={180} cy={430} rx={120} ry={260} fill="#BFE0F7" />
        <Ellipse cx={150} cy={600} rx={90} ry={180} fill="#BFE0F7" />
        {/* islands */}
        <Path d="M150 290 q20 -14 34 4 q-4 20 -26 18 q-14 -8 -8 -22" fill="#D6EBC9" />
        <Path d="M176 380 q16 -8 26 8 q-6 14 -22 10 q-8 -8 -4 -18" fill="#D6EBC9" />
        {/* roads */}
        <Path d="M40 620 Q 200 540 402 470" stroke="#FFFFFF" strokeWidth={3} fill="none" opacity={0.9} />
        <Path d="M320 210 L 300 852" stroke="#FFFFFF" strokeWidth={3} fill="none" opacity={0.9} />
        <Path d="M0 500 L 402 380" stroke="#FFFFFF" strokeWidth={2} fill="none" opacity={0.7} />
        <Path d="M60 300 L 60 852" stroke="#FFFFFF" strokeWidth={2} fill="none" opacity={0.7} />
        <Path d="M160 460 L 340 430" stroke="#FFFFFF" strokeWidth={2.5} fill="none" opacity={0.8} />
      </Svg>
      {/* labels */}
      <Text className="absolute left-[86px] top-[292px] text-[11px] font-medium text-[#7A8B6E]">Angel Island</Text>
      <Text className="absolute left-[168px] top-[370px] text-[11px] font-medium text-[#7A8B6E]">Treasure Island</Text>
      <Text className="absolute right-[26px] top-[268px] text-[13px] font-semibold text-[#4A5A42]">Berkeley</Text>
      <Text className="absolute right-[30px] top-[410px] text-[13px] font-semibold text-[#4A5A42]">Oakland</Text>
      <Text className="absolute right-[34px] top-[500px] text-[12px] font-medium text-[#7A8B6E]">Alameda</Text>
      <Text className="absolute left-[70px] top-[472px] text-[13px] font-semibold text-[#4A5A42]">San Francisco</Text>
      <Text className="absolute bottom-[128px] right-[32px] text-[12px] font-medium text-[#7A8B6E]">San Mateo</Text>
      {/* you-are-here marker — frosted disc with the step icon, pulsing */}
      <View className="absolute left-[222px] top-[368px] h-16 w-16 items-center justify-center">
        <PulseRing color="#FFFFFF" size={64} />
        <View className="h-16 w-16 items-center justify-center rounded-full bg-white/85 shadow-lg shadow-black/10">
          <Icon name="footprints" size="xl" color="#1C1C1E" />
        </View>
      </View>
    </View>
  );
}

/** Bottom segmented control — a floating frosted pill where the active
 *  section is a filled dark lozenge (the ref's steps/target/trophy nav). */
function MapNav() {
  const items = [
    { icon: "footprints" as const, active: true },
    { icon: "medal" as const, active: false },
    { icon: "trophy" as const, active: false },
  ];
  return (
    <View className="mx-16 flex-row items-center justify-between rounded-full bg-white/90 p-1.5 shadow-lg shadow-black/10">
      {items.map((it) => (
        <Press
          key={it.icon}
          accessibilityRole="button"
          className={cn(
            "h-11 flex-1 items-center justify-center rounded-full",
            it.active && "bg-[#1C1C1E]",
          )}
        >
          <Icon name={it.icon} size="md" color={it.active ? "#FFFFFF" : "#8E8E93"} />
        </Press>
      ))}
    </View>
  );
}

/** Walk map — the "you moved today" home: an illustrated map canvas with
 *  the day's recap headline, a marker where you are, a white stat card
 *  (7,050 steps / kcal / km / mins), and the floating segmented nav. */
export function WalkMapScreen({ onNotifications, onProfile }: { onNotifications?: () => void; onProfile?: () => void }) {
  return (
    <View className="flex-1 bg-[#E8F2E3]">
      <MapCanvas />

      <SafeAreaView className="flex-1" edges={["top", "bottom"]}>
        <View className="flex-row items-center justify-between px-4 pt-1">
          <Press onPress={onProfile} hitSlop={8} accessibilityRole="button" accessibilityLabel="Profile">
            <Avatar fallback="AK" size="md" source={{ uri: "https://i.pravatar.cc/150?img=32" }} />
          </Press>
          <Press
            onPress={onNotifications}
            hitSlop={8}
            accessibilityRole="button"
            accessibilityLabel="Notifications"
            className="h-11 w-11 items-center justify-center rounded-full bg-white/90"
          >
            <Icon name="bell" size="md" color="#1C1C1E" />
          </Press>
        </View>

        <Mount delay={80} className="px-5 pt-3">
          <Text className="text-[23px] font-bold leading-snug text-[#1C1C1E]">
            You've walked <Icon name="footprints" size="md" color="#1C1C1E" />
            8.4km, burned{"\n"}
            <Icon name="flame" size="md" color="#F97316" />
            582 calories, and collected{"\n"}
            <Icon name="crown" size="md" color="#1C1C1E" />
            3 new artifacts.
          </Text>
        </Mount>

        <View className="flex-1" />

        {/* stat card */}
        <Mount delay={140} className="px-5 pb-3">
          <View className="rounded-[28px] bg-white p-5 shadow-xl shadow-black/10">
            <View className="mb-1 h-9 w-9 items-center justify-center rounded-full bg-[#1C1C1E]/[0.06]">
              <Icon name="footprints" size="md" color="#1C1C1E" />
            </View>
            <Text className="text-[46px] font-bold tracking-tight text-[#1C1C1E]">7,050</Text>
            <View className="mt-3 flex-row">
              {[
                ["326", "kcal", "Calories"],
                ["3.8", "km", "Distance"],
                ["52", "mins", "Active time"],
              ].map(([v, u, l]) => (
                <View key={l} className="flex-1">
                  <View className="flex-row items-baseline gap-1">
                    <Text className="text-[18px] font-bold text-[#1C1C1E]">{v}</Text>
                    <Text className="text-[12px] text-[#1C1C1E]/45">{u}</Text>
                  </View>
                  <Text className="mt-0.5 text-[12px] text-[#1C1C1E]/45">{l}</Text>
                </View>
              ))}
            </View>
          </View>
        </Mount>

        <MapNav />
      </SafeAreaView>
    </View>
  );
}
WalkMapScreen.displayName = "WalkMapScreen";
```

Screen: https://lumioui.dev/screens/health-walk-map