Savings goals with progress
import * as React from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Glass, Icon, type IconName, Image, Progress, Switch, Text } from "@lumioui/ui";
import { type ColorTokens, useHaptic } from "@lumioui/core";
import { LumioMark, Mount, Press } from "../shared";
export interface SavingsGoal {
id: string;
name: string;
icon: IconName;
saved: number;
target: number;
/** Optional photo for aspirational goals (a trip, a home). */
imageUrl?: string;
/** Soft-tint tile background class. */
tileBg?: string;
/** Icon + progress-percent tint token — pairs with `tileBg`. */
tint?: keyof ColorTokens;
/** Text class for the percent readout, e.g. "text-chart-3". */
pctCls?: string;
}
export interface SavingsGoalsScreenProps {
goals?: SavingsGoal[];
onGoalPress?: (id: string) => void;
onAddGoal?: () => void;
onBack?: () => void;
}
const DEFAULT_GOALS: SavingsGoal[] = [
{ id: "g1", name: "Lisbon trip", icon: "plane", saved: 1480, target: 2000, tileBg: "bg-primary/15", tint: "primary", pctCls: "text-primary", imageUrl: "https://images.unsplash.com/photo-1555881400-74d7acaacd8b?w=800&h=420&fit=crop&q=70&auto=format" },
{ id: "g2", name: "New camera", icon: "camera", saved: 620, target: 900, tileBg: "bg-chart-3/15", tint: "chart3", pctCls: "text-chart-3" },
{ id: "g3", name: "Emergency fund", icon: "shield", saved: 5200, target: 10000, tileBg: "bg-success/15", tint: "success", pctCls: "text-success" },
];
/** Fill tint per goal — progress bar color agrees with the icon tile. */
const TINT_BG: Record<string, string> = {
primary: "bg-primary",
success: "bg-success",
warning: "bg-warning",
destructive: "bg-destructive",
chart2: "bg-chart-2",
chart3: "bg-chart-3",
chart4: "bg-chart-4",
chart5: "bg-chart-5",
};
/** Savings goals — photo-hero goals + tinted progress + top-up affordance. */
export function SavingsGoalsScreen({
goals = DEFAULT_GOALS,
onGoalPress,
onAddGoal,
onBack,
}: SavingsGoalsScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const [autoDeposit, setAutoDeposit] = React.useState(true);
const total = goals.reduce((s, g) => s + g.saved, 0);
return (
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
<View pointerEvents="box-none" className="absolute inset-x-4 z-10" style={{ top: insets.top + 8 }}>
<View className="flex-row items-center justify-between">
<Glass interactive effect="regular" className="h-11 w-11 items-center justify-center rounded-full">
<Press
haptic="light"
onPress={() => onBack?.()}
accessibilityRole="button"
accessibilityLabel="Go back"
className="h-9 w-9 items-center justify-center"
>
<Icon name="chevron-left" size="md" color="foreground" />
</Press>
</Glass>
<Glass interactive effect="regular" className="h-11 w-11 items-center justify-center rounded-full">
<Press
haptic="light"
onPress={() => haptics.light()}
accessibilityRole="button"
accessibilityLabel="New goal"
className="h-9 w-9 items-center justify-center"
>
<Icon name="plus" size="md" color="foreground" />
</Press>
</Glass>
</View>
<View pointerEvents="none" className="absolute inset-0 items-center justify-center">
<View className="h-11 flex-row items-center justify-center gap-2 rounded-full pl-3.5 pr-5">
<Glass effect="regular" className="absolute inset-0 rounded-full" />
<LumioMark size={18} />
<Text accessibilityRole="header" className="text-sm font-bold tracking-tight">
Savings
</Text>
</View>
</View>
</View>
{/* Total saved hero — derived from the goals, not a magic number. */}
<View className="mx-4 mb-4 items-center rounded-3xl bg-white p-5 dark:bg-[#1A1A20]" style={{ marginTop: insets.top + 60 }}>
<Text variant="small" className="text-muted-foreground">
Total saved
</Text>
<Text className="text-5xl font-bold tracking-tight">
${total.toLocaleString()}
</Text>
<Mount className="mt-1 flex-row items-center gap-1 rounded-full bg-success/15 px-2.5 py-1">
<Icon name="arrow-up" size="sm" color="success" />
<Text className="text-xs font-medium text-success">$420 this month</Text>
</Mount>
{/* Projection — goals answer "when", not just "how much". */}
<Text variant="muted" className="mt-1.5 text-xs">
Lisbon lands Dec 2026 at this pace
</Text>
</View>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: insets.bottom + 32 }}
>
{goals.map((g) => {
const pct = Math.round((g.saved / g.target) * 100);
if (g.imageUrl) {
// Photo hero — aspirational goals earn the cover treatment.
return (
<Press
key={g.id}
haptic="light"
onPress={() => onGoalPress?.(g.id)}
accessibilityLabel={`${g.name}, ${pct} percent saved`}
accessibilityRole="button"
className="mx-4 mb-4 overflow-hidden rounded-2xl"
>
<View className="h-44 w-full">
<Image
source={{ uri: g.imageUrl }}
alt={g.name}
className="absolute inset-0 h-full w-full"
/>
<View className="absolute inset-x-0 bottom-0 gap-2 bg-black/45 px-4 pb-4 pt-8">
<View className="flex-row items-baseline justify-between">
<Text className="font-semibold text-white">{g.name}</Text>
<Text className="text-sm font-semibold text-white">{pct}%</Text>
</View>
<Progress
value={pct}
className="bg-white/25"
indicatorClassName="bg-white"
/>
<Text className="text-xs text-white/80">
${g.saved.toLocaleString()} of ${g.target.toLocaleString()}
</Text>
</View>
</View>
</Press>
);
}
return (
<Press
key={g.id}
haptic="light"
onPress={() => onGoalPress?.(g.id)}
accessibilityLabel={`${g.name}, ${pct} percent saved`}
accessibilityRole="button"
className="mx-4 mb-4 rounded-2xl bg-white p-4 dark:bg-[#1A1A20]"
>
<View className="flex-row items-center gap-3">
<View
className={`h-10 w-10 items-center justify-center rounded-2xl ${g.tileBg ?? "bg-muted"}`}
>
<Icon name={g.icon} size="sm" color={g.tint ?? "foreground"} />
</View>
<View className="flex-1">
<Text className="font-semibold">{g.name}</Text>
<Text variant="small" className="text-muted-foreground">
${g.saved.toLocaleString()} of ${g.target.toLocaleString()}
</Text>
</View>
<Text className={`text-sm font-semibold ${g.pctCls ?? "text-foreground"}`}>
{pct}%
</Text>
</View>
<View className="mt-3">
<Progress
value={pct}
indicatorClassName={TINT_BG[g.tint ?? ""]}
/>
</View>
</Press>
);
})}
{/* Auto-deposit — the habit engine behind the goals. */}
<Mount delay={60} className="mx-4 mb-4 flex-row items-center gap-3 rounded-2xl bg-white p-4 dark:bg-[#1A1A20]">
<View className="h-10 w-10 items-center justify-center rounded-2xl bg-success/15">
<Icon name="repeat" size="sm" color="success" />
</View>
<View className="flex-1">
<Text className="text-sm font-semibold">Auto-deposit</Text>
<Text className="text-xs text-muted-foreground">
$60 every Friday · last ran Sep 19
</Text>
</View>
<Switch
checked={autoDeposit}
onCheckedChange={(v) => {
haptics.selection();
setAutoDeposit(v);
}}
accessibilityLabel="Auto-deposit"
/>
</Mount>
<Mount delay={120} className="mt-2 px-4">
<Button
tone="inverse"
haptic="light"
onPress={() => onAddGoal?.()}
accessibilityLabel="New savings goal"
className="w-full bg-[#1B1B26]"
>
<Icon name="plus" size="sm" color="#FFFFFF" />
<Text className="ml-1.5">New goal</Text>
</Button>
<Text variant="muted" className="mt-4 text-center text-xs">
Tap a goal to top up or adjust its target
</Text>
</Mount>
</ScrollView>
</SafeAreaView>
);
}
SavingsGoalsScreen.displayName = "SavingsGoalsScreen";
Recreate the "Savings Goals Screen" screen in React Native using LumioUI.
Goal: Savings goals with progress 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 finance-savings-goals
```
Or pull just the components: `npx lumioui add button icon image progress 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>` ×6
### `image` — Cached image with placeholder, fallback and aspect handling.
- `<Image>` ×1
### `progress` — Animated fill bar with indeterminate sweep mode.
- `<Progress>` ×2
### `switch` — iOS-size toggle with spring thumb and haptics.
- `<Switch>` ×1
### `text` — Themed type scale from caption to display.
- `<Text>` ×15
## 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/finance/savings-goals.tsx` exporting SavingsGoalsScreen. 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 { ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Glass, Icon, type IconName, Image, Progress, Switch, Text } from "@lumioui/ui";
import { type ColorTokens, useHaptic } from "@lumioui/core";
import { LumioMark, Mount, Press } from "../shared";
export interface SavingsGoal {
id: string;
name: string;
icon: IconName;
saved: number;
target: number;
/** Optional photo for aspirational goals (a trip, a home). */
imageUrl?: string;
/** Soft-tint tile background class. */
tileBg?: string;
/** Icon + progress-percent tint token — pairs with `tileBg`. */
tint?: keyof ColorTokens;
/** Text class for the percent readout, e.g. "text-chart-3". */
pctCls?: string;
}
export interface SavingsGoalsScreenProps {
goals?: SavingsGoal[];
onGoalPress?: (id: string) => void;
onAddGoal?: () => void;
onBack?: () => void;
}
const DEFAULT_GOALS: SavingsGoal[] = [
{ id: "g1", name: "Lisbon trip", icon: "plane", saved: 1480, target: 2000, tileBg: "bg-primary/15", tint: "primary", pctCls: "text-primary", imageUrl: "https://images.unsplash.com/photo-1555881400-74d7acaacd8b?w=800&h=420&fit=crop&q=70&auto=format" },
{ id: "g2", name: "New camera", icon: "camera", saved: 620, target: 900, tileBg: "bg-chart-3/15", tint: "chart3", pctCls: "text-chart-3" },
{ id: "g3", name: "Emergency fund", icon: "shield", saved: 5200, target: 10000, tileBg: "bg-success/15", tint: "success", pctCls: "text-success" },
];
/** Fill tint per goal — progress bar color agrees with the icon tile. */
const TINT_BG: Record<string, string> = {
primary: "bg-primary",
success: "bg-success",
warning: "bg-warning",
destructive: "bg-destructive",
chart2: "bg-chart-2",
chart3: "bg-chart-3",
chart4: "bg-chart-4",
chart5: "bg-chart-5",
};
/** Savings goals — photo-hero goals + tinted progress + top-up affordance. */
export function SavingsGoalsScreen({
goals = DEFAULT_GOALS,
onGoalPress,
onAddGoal,
onBack,
}: SavingsGoalsScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const [autoDeposit, setAutoDeposit] = React.useState(true);
const total = goals.reduce((s, g) => s + g.saved, 0);
return (
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
<View pointerEvents="box-none" className="absolute inset-x-4 z-10" style={{ top: insets.top + 8 }}>
<View className="flex-row items-center justify-between">
<Glass interactive effect="regular" className="h-11 w-11 items-center justify-center rounded-full">
<Press
haptic="light"
onPress={() => onBack?.()}
accessibilityRole="button"
accessibilityLabel="Go back"
className="h-9 w-9 items-center justify-center"
>
<Icon name="chevron-left" size="md" color="foreground" />
</Press>
</Glass>
<Glass interactive effect="regular" className="h-11 w-11 items-center justify-center rounded-full">
<Press
haptic="light"
onPress={() => haptics.light()}
accessibilityRole="button"
accessibilityLabel="New goal"
className="h-9 w-9 items-center justify-center"
>
<Icon name="plus" size="md" color="foreground" />
</Press>
</Glass>
</View>
<View pointerEvents="none" className="absolute inset-0 items-center justify-center">
<View className="h-11 flex-row items-center justify-center gap-2 rounded-full pl-3.5 pr-5">
<Glass effect="regular" className="absolute inset-0 rounded-full" />
<LumioMark size={18} />
<Text accessibilityRole="header" className="text-sm font-bold tracking-tight">
Savings
</Text>
</View>
</View>
</View>
{/* Total saved hero — derived from the goals, not a magic number. */}
<View className="mx-4 mb-4 items-center rounded-3xl bg-white p-5 dark:bg-[#1A1A20]" style={{ marginTop: insets.top + 60 }}>
<Text variant="small" className="text-muted-foreground">
Total saved
</Text>
<Text className="text-5xl font-bold tracking-tight">
${total.toLocaleString()}
</Text>
<Mount className="mt-1 flex-row items-center gap-1 rounded-full bg-success/15 px-2.5 py-1">
<Icon name="arrow-up" size="sm" color="success" />
<Text className="text-xs font-medium text-success">$420 this month</Text>
</Mount>
{/* Projection — goals answer "when", not just "how much". */}
<Text variant="muted" className="mt-1.5 text-xs">
Lisbon lands Dec 2026 at this pace
</Text>
</View>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: insets.bottom + 32 }}
>
{goals.map((g) => {
const pct = Math.round((g.saved / g.target) * 100);
if (g.imageUrl) {
// Photo hero — aspirational goals earn the cover treatment.
return (
<Press
key={g.id}
haptic="light"
onPress={() => onGoalPress?.(g.id)}
accessibilityLabel={`${g.name}, ${pct} percent saved`}
accessibilityRole="button"
className="mx-4 mb-4 overflow-hidden rounded-2xl"
>
<View className="h-44 w-full">
<Image
source={{ uri: g.imageUrl }}
alt={g.name}
className="absolute inset-0 h-full w-full"
/>
<View className="absolute inset-x-0 bottom-0 gap-2 bg-black/45 px-4 pb-4 pt-8">
<View className="flex-row items-baseline justify-between">
<Text className="font-semibold text-white">{g.name}</Text>
<Text className="text-sm font-semibold text-white">{pct}%</Text>
</View>
<Progress
value={pct}
className="bg-white/25"
indicatorClassName="bg-white"
/>
<Text className="text-xs text-white/80">
${g.saved.toLocaleString()} of ${g.target.toLocaleString()}
</Text>
</View>
</View>
</Press>
);
}
return (
<Press
key={g.id}
haptic="light"
onPress={() => onGoalPress?.(g.id)}
accessibilityLabel={`${g.name}, ${pct} percent saved`}
accessibilityRole="button"
className="mx-4 mb-4 rounded-2xl bg-white p-4 dark:bg-[#1A1A20]"
>
<View className="flex-row items-center gap-3">
<View
className={`h-10 w-10 items-center justify-center rounded-2xl ${g.tileBg ?? "bg-muted"}`}
>
<Icon name={g.icon} size="sm" color={g.tint ?? "foreground"} />
</View>
<View className="flex-1">
<Text className="font-semibold">{g.name}</Text>
<Text variant="small" className="text-muted-foreground">
${g.saved.toLocaleString()} of ${g.target.toLocaleString()}
</Text>
</View>
<Text className={`text-sm font-semibold ${g.pctCls ?? "text-foreground"}`}>
{pct}%
</Text>
</View>
<View className="mt-3">
<Progress
value={pct}
indicatorClassName={TINT_BG[g.tint ?? ""]}
/>
</View>
</Press>
);
})}
{/* Auto-deposit — the habit engine behind the goals. */}
<Mount delay={60} className="mx-4 mb-4 flex-row items-center gap-3 rounded-2xl bg-white p-4 dark:bg-[#1A1A20]">
<View className="h-10 w-10 items-center justify-center rounded-2xl bg-success/15">
<Icon name="repeat" size="sm" color="success" />
</View>
<View className="flex-1">
<Text className="text-sm font-semibold">Auto-deposit</Text>
<Text className="text-xs text-muted-foreground">
$60 every Friday · last ran Sep 19
</Text>
</View>
<Switch
checked={autoDeposit}
onCheckedChange={(v) => {
haptics.selection();
setAutoDeposit(v);
}}
accessibilityLabel="Auto-deposit"
/>
</Mount>
<Mount delay={120} className="mt-2 px-4">
<Button
tone="inverse"
haptic="light"
onPress={() => onAddGoal?.()}
accessibilityLabel="New savings goal"
className="w-full bg-[#1B1B26]"
>
<Icon name="plus" size="sm" color="#FFFFFF" />
<Text className="ml-1.5">New goal</Text>
</Button>
<Text variant="muted" className="mt-4 text-center text-xs">
Tap a goal to top up or adjust its target
</Text>
</Mount>
</ScrollView>
</SafeAreaView>
);
}
SavingsGoalsScreen.displayName = "SavingsGoalsScreen";
```
Screen: https://lumioui.dev/screens/finance-savings-goals