Live run metrics with map and controls
import * as React from "react";
import { View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Glass, Icon, Image, Text } from "@lumioui/ui";
import { MONO, Mount, World } from "../shared";
import { useHaptic, useTheme } from "@lumioui/core";
import Svg, { Circle, Polyline } from "react-native-svg";
export interface RunTrackingScreenProps {
/** Live stats — the numbers a runner watches. */
distance?: string;
pace?: string;
time?: string;
heartRate?: string;
/** Route map stand-in. */
mapUrl?: string;
running?: boolean;
onPause?: () => void;
onEnd?: () => void;
onBack?: () => void;
}
/** Run tracking — map + live metric rail + pause/end controls. */
export function RunTrackingScreen({
distance = "5.42 km",
pace = "5'48\"",
time = "31:24",
heartRate = "152",
// Real street map beats a stock photo — public OSM tiles need no key.
mapUrl = "https://tile.openstreetmap.org/15/5240/12668.png",
running = true,
onPause,
onEnd,
onBack,
}: RunTrackingScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const { colors } = useTheme();
const [paused, setPaused] = React.useState(!running);
React.useEffect(() => setPaused(!running), [running]);
return (
<World primary="#16A34A">
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top", "bottom"]}>
{/* Map — top half, the route context. A 2×2 tile grid stays sharp
where one stretched tile went soft. */}
<View className="relative">
<View className="h-80 w-full flex-row flex-wrap">
{[0, 1, 2, 3].map((i) => (
<Image
key={i}
source={{
uri: mapUrl.replace(
/15\/(\d+)\/(\d+)/,
(_, x, y) => `15/${+x + (i % 2)}/${+y + Math.floor(i / 2)}`
),
}}
className="h-40 w-1/2"
accessibilityLabel={i === 0 ? "Run route map" : undefined}
/>
))}
</View>
{/* Route trace — the polyline a runner actually checks. */}
<Svg
viewBox="0 0 400 320"
preserveAspectRatio="xMidYMid slice"
className="absolute inset-0 h-full w-full"
accessibilityElementsHidden
importantForAccessibility="no"
>
<Polyline
points="40,270 110,250 140,190 210,170 240,110 320,95 355,50"
fill="none"
stroke={colors.primary}
strokeWidth={5}
strokeLinecap="round"
strokeLinejoin="round"
/>
<Circle cx={40} cy={270} r={7} fill="#22c55e" />
<Circle cx={355} cy={50} r={8} fill={colors.primary} />
<Circle
cx={355}
cy={50}
r={13}
fill="none"
stroke={colors.primary}
strokeWidth={2}
opacity={0.4}
/>
</Svg>
<Glass interactive effect="clear" className="absolute left-4 top-2 rounded-full">
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => onBack?.()}
accessibilityLabel="Go back"
className="h-10 w-10 rounded-full"
>
<Icon name="chevron-left" size="md" color="primaryForeground" />
</Button>
</Glass>
{/* Paused state — the run freezes, the map dims. */}
{paused && (
<View className="absolute inset-0 items-center justify-center bg-black/45">
<Glass interactive effect="clear" className="rounded-full px-4 py-1.5">
<Text className="text-xs font-semibold tracking-widest text-white">
PAUSED
</Text>
</Glass>
</View>
)}
</View>
{/* Stats sheet — slides over the map's bottom edge. */}
<View className="-mt-8 flex-1 rounded-t-3xl bg-card">
<Mount className="items-center pt-3">
<View className="h-1 w-10 rounded-full bg-muted" />
</Mount>
{/* Metrics — the big readable-at-arm's-length numbers. */}
<Mount delay={60} className="flex-1 items-center justify-center gap-4 px-6">
<View className="items-center">
<Text className="text-6xl font-light tracking-tight">{distance}</Text>
<Text variant="small" className="text-muted-foreground">
Distance
</Text>
</View>
<View className="w-full flex-row justify-around">
<View className="items-center">
<Text className="text-2xl font-semibold" style={{ fontFamily: MONO, fontVariant: ["tabular-nums"] }}>{pace}</Text>
<Text variant="small" className="text-muted-foreground">
Pace
</Text>
{/* PB context — pace means nothing without the benchmark. */}
<Text className="text-[10px] text-success">best 5'32"</Text>
</View>
<View className="items-center">
<Text className="text-2xl font-semibold" style={{ fontFamily: MONO, fontVariant: ["tabular-nums"] }}>{time}</Text>
<Text variant="small" className="text-muted-foreground">
Time
</Text>
</View>
<View className="items-center">
<View className="flex-row items-center gap-1">
<Icon name="heart" size="sm" color="destructive" filled />
<Text className="text-2xl font-semibold">{heartRate}</Text>
</View>
<View className="mt-0.5 flex-row items-center gap-1.5">
<Text variant="small" className="text-muted-foreground">
BPM
</Text>
<View className="rounded-full bg-destructive/15 px-1.5 py-px">
<Text className="text-[10px] font-medium text-destructive">
Zone 4
</Text>
</View>
</View>
</View>
</View>
{/* Splits — last three kilometres at a glance. */}
<View className="w-full flex-row justify-center gap-2">
{["5'52\"", "5'44\"", "5'38\""].map((s, i) => (
<View
key={s}
className="items-center overflow-hidden rounded-xl px-3 py-1.5"
>
<Glass interactive effect="clear" sheen={0.5} className="absolute inset-0 rounded-xl" pointerEvents="none" />
<Text className="text-[10px] text-muted-foreground">
km {i + 3}
</Text>
<Text className="text-xs font-semibold">{s}</Text>
</View>
))}
</View>
</Mount>
{/* Controls — pause/resume center, end on the right. */}
<Mount
delay={120}
className="flex-row items-center justify-center gap-6"
style={{ paddingBottom: insets.bottom + 24 }}
>
<Button
variant="secondary"
size="icon"
haptic="medium"
onPress={() => {
haptics.medium();
setPaused((p) => !p);
onPause?.();
}}
accessibilityLabel={paused ? "Resume run" : "Pause run"}
accessibilityState={{ checked: paused }}
className="h-16 w-16 rounded-full"
>
<Icon name={paused ? "play" : "pause"} size="md" color="foreground" />
</Button>
<Button
size="icon"
haptic="heavy"
onPress={() => {
haptics.heavy();
onEnd?.();
}}
accessibilityLabel="End run"
className="h-16 w-16 rounded-full bg-destructive p-0"
>
<Icon name="x" size="md" color="primaryForeground" />
</Button>
</Mount>
</View>
</SafeAreaView>
</World>
);
}
RunTrackingScreen.displayName = "RunTrackingScreen";
Recreate the "Run Tracking Screen" screen in React Native using LumioUI.
Goal: Live run metrics with map and controls 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-run-tracking
```
Or pull just the components: `npx lumioui add button glass icon image text`
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.
- `<Button>` ×3
### `glass` — iOS 26 liquid-glass surface — real glass via expo-glass-effect (Expo Go) or @callstack/liquid-glass (dev builds), SVG refraction + specular rim on web, frosted fallback elsewhere; GlassContainer melts adjacent panes into one blob
- `<Glass>` ×3
### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×4
### `image` — Cached image with placeholder, fallback and aspect handling.
- `<Image>` ×1
### `text` — Themed type scale from caption to display.
- `<Text>` ×13
## 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/run-tracking.tsx` exporting RunTrackingScreen. 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, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Glass, Icon, Image, Text } from "@lumioui/ui";
import { MONO, Mount, World } from "../shared";
import { useHaptic, useTheme } from "@lumioui/core";
import Svg, { Circle, Polyline } from "react-native-svg";
export interface RunTrackingScreenProps {
/** Live stats — the numbers a runner watches. */
distance?: string;
pace?: string;
time?: string;
heartRate?: string;
/** Route map stand-in. */
mapUrl?: string;
running?: boolean;
onPause?: () => void;
onEnd?: () => void;
onBack?: () => void;
}
/** Run tracking — map + live metric rail + pause/end controls. */
export function RunTrackingScreen({
distance = "5.42 km",
pace = "5'48\"",
time = "31:24",
heartRate = "152",
// Real street map beats a stock photo — public OSM tiles need no key.
mapUrl = "https://tile.openstreetmap.org/15/5240/12668.png",
running = true,
onPause,
onEnd,
onBack,
}: RunTrackingScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const { colors } = useTheme();
const [paused, setPaused] = React.useState(!running);
React.useEffect(() => setPaused(!running), [running]);
return (
<World primary="#16A34A">
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top", "bottom"]}>
{/* Map — top half, the route context. A 2×2 tile grid stays sharp
where one stretched tile went soft. */}
<View className="relative">
<View className="h-80 w-full flex-row flex-wrap">
{[0, 1, 2, 3].map((i) => (
<Image
key={i}
source={{
uri: mapUrl.replace(
/15\/(\d+)\/(\d+)/,
(_, x, y) => `15/${+x + (i % 2)}/${+y + Math.floor(i / 2)}`
),
}}
className="h-40 w-1/2"
accessibilityLabel={i === 0 ? "Run route map" : undefined}
/>
))}
</View>
{/* Route trace — the polyline a runner actually checks. */}
<Svg
viewBox="0 0 400 320"
preserveAspectRatio="xMidYMid slice"
className="absolute inset-0 h-full w-full"
accessibilityElementsHidden
importantForAccessibility="no"
>
<Polyline
points="40,270 110,250 140,190 210,170 240,110 320,95 355,50"
fill="none"
stroke={colors.primary}
strokeWidth={5}
strokeLinecap="round"
strokeLinejoin="round"
/>
<Circle cx={40} cy={270} r={7} fill="#22c55e" />
<Circle cx={355} cy={50} r={8} fill={colors.primary} />
<Circle
cx={355}
cy={50}
r={13}
fill="none"
stroke={colors.primary}
strokeWidth={2}
opacity={0.4}
/>
</Svg>
<Glass interactive effect="clear" className="absolute left-4 top-2 rounded-full">
<Button
variant="ghost"
size="icon"
haptic="light"
onPress={() => onBack?.()}
accessibilityLabel="Go back"
className="h-10 w-10 rounded-full"
>
<Icon name="chevron-left" size="md" color="primaryForeground" />
</Button>
</Glass>
{/* Paused state — the run freezes, the map dims. */}
{paused && (
<View className="absolute inset-0 items-center justify-center bg-black/45">
<Glass interactive effect="clear" className="rounded-full px-4 py-1.5">
<Text className="text-xs font-semibold tracking-widest text-white">
PAUSED
</Text>
</Glass>
</View>
)}
</View>
{/* Stats sheet — slides over the map's bottom edge. */}
<View className="-mt-8 flex-1 rounded-t-3xl bg-card">
<Mount className="items-center pt-3">
<View className="h-1 w-10 rounded-full bg-muted" />
</Mount>
{/* Metrics — the big readable-at-arm's-length numbers. */}
<Mount delay={60} className="flex-1 items-center justify-center gap-4 px-6">
<View className="items-center">
<Text className="text-6xl font-light tracking-tight">{distance}</Text>
<Text variant="small" className="text-muted-foreground">
Distance
</Text>
</View>
<View className="w-full flex-row justify-around">
<View className="items-center">
<Text className="text-2xl font-semibold" style={{ fontFamily: MONO, fontVariant: ["tabular-nums"] }}>{pace}</Text>
<Text variant="small" className="text-muted-foreground">
Pace
</Text>
{/* PB context — pace means nothing without the benchmark. */}
<Text className="text-[10px] text-success">best 5'32"</Text>
</View>
<View className="items-center">
<Text className="text-2xl font-semibold" style={{ fontFamily: MONO, fontVariant: ["tabular-nums"] }}>{time}</Text>
<Text variant="small" className="text-muted-foreground">
Time
</Text>
</View>
<View className="items-center">
<View className="flex-row items-center gap-1">
<Icon name="heart" size="sm" color="destructive" filled />
<Text className="text-2xl font-semibold">{heartRate}</Text>
</View>
<View className="mt-0.5 flex-row items-center gap-1.5">
<Text variant="small" className="text-muted-foreground">
BPM
</Text>
<View className="rounded-full bg-destructive/15 px-1.5 py-px">
<Text className="text-[10px] font-medium text-destructive">
Zone 4
</Text>
</View>
</View>
</View>
</View>
{/* Splits — last three kilometres at a glance. */}
<View className="w-full flex-row justify-center gap-2">
{["5'52\"", "5'44\"", "5'38\""].map((s, i) => (
<View
key={s}
className="items-center overflow-hidden rounded-xl px-3 py-1.5"
>
<Glass interactive effect="clear" sheen={0.5} className="absolute inset-0 rounded-xl" pointerEvents="none" />
<Text className="text-[10px] text-muted-foreground">
km {i + 3}
</Text>
<Text className="text-xs font-semibold">{s}</Text>
</View>
))}
</View>
</Mount>
{/* Controls — pause/resume center, end on the right. */}
<Mount
delay={120}
className="flex-row items-center justify-center gap-6"
style={{ paddingBottom: insets.bottom + 24 }}
>
<Button
variant="secondary"
size="icon"
haptic="medium"
onPress={() => {
haptics.medium();
setPaused((p) => !p);
onPause?.();
}}
accessibilityLabel={paused ? "Resume run" : "Pause run"}
accessibilityState={{ checked: paused }}
className="h-16 w-16 rounded-full"
>
<Icon name={paused ? "play" : "pause"} size="md" color="foreground" />
</Button>
<Button
size="icon"
haptic="heavy"
onPress={() => {
haptics.heavy();
onEnd?.();
}}
accessibilityLabel="End run"
className="h-16 w-16 rounded-full bg-destructive p-0"
>
<Icon name="x" size="md" color="primaryForeground" />
</Button>
</Mount>
</View>
</SafeAreaView>
</World>
);
}
RunTrackingScreen.displayName = "RunTrackingScreen";
```
Screen: https://lumioui.dev/screens/health-run-tracking