Saved addresses as labeled cards — icon well, default badge, per-card edit/delete, 'Set as default' — plus a dashed add-address slot
import * as React from "react";
import { useState } from "react";
import { View, ScrollView, Pressable } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Glass, Icon, Text, type IconName } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { LumioMark, Mount, Press, SEPARATOR_INSET } from "../shared";
export interface SavedAddress {
id: string;
/** Short label — "Home", "Work", "Mom's place". */
label: string;
/** Leading icon; inferred from the label when omitted. */
icon?: IconName;
name: string;
line1: string;
line2?: string;
/** "San Francisco, CA 94107" — city/region/postal on one line. */
city: string;
country?: string;
phone?: string;
isDefault?: boolean;
}
export interface AddressBookScreenProps {
addresses?: SavedAddress[];
onAdd?: () => void;
onEdit?: (address: SavedAddress) => void;
onDelete?: (address: SavedAddress) => void;
onSetDefault?: (address: SavedAddress) => void;
onBack?: () => void;
}
const DEFAULT_ADDRESSES: SavedAddress[] = [
{
id: "a1",
label: "Home",
name: "Amara Chen",
line1: "421 Harbor Lane",
line2: "Apt 5B",
city: "San Francisco, CA 94107",
country: "United States",
phone: "+1 (415) 555-0132",
isDefault: true,
},
{
id: "a2",
label: "Work",
name: "Amara Chen",
line1: "128 Linden St",
line2: "Apt 4B",
city: "Brooklyn, NY 11221",
country: "United States",
},
{
id: "a3",
label: "Mom's place",
name: "Elena Chen",
line1: "214 Fillmore St",
city: "San Francisco, CA 94117",
country: "United States",
},
];
/** Label → leading icon. Anything custom can override via `icon`. */
function labelIcon(label: string): IconName {
const l = label.toLowerCase();
if (l.includes("work") || l.includes("office")) return "briefcase";
if (l.includes("home")) return "home";
return "map-pin";
}
/** The default address is the screen's signature — an ink "shipping label"
* card, echoing the dark wallet cards in payment-methods. */
function DefaultAddressCard({
address,
onEdit,
}: {
address: SavedAddress;
onEdit?: (a: SavedAddress) => void;
}) {
const haptics = useHaptic();
const lines = [address.line1, address.line2, address.city, address.country].filter(Boolean);
return (
<View className="overflow-hidden rounded-3xl bg-[#1B1B26]">
<Glass interactive effect="regular" sheen={0.4} tintColor="#FFFFFF12" className="absolute inset-0 rounded-3xl" pointerEvents="none" />
<View className="flex-row items-center justify-between px-5 pt-4">
<Text className="text-[10px] font-semibold uppercase tracking-[0.18em] text-white/50">
Ships to · {address.label}
</Text>
{onEdit ? (
<Pressable
onPress={() => {
haptics.light();
onEdit(address);
}}
accessibilityRole="button"
accessibilityLabel={`Edit ${address.label} address`}
hitSlop={8}
className="h-9 w-9 items-center justify-center rounded-full bg-white/10 backdrop-blur-xl"
>
<Icon name="edit" size="sm" color="#FFFFFF" />
</Pressable>
) : null}
</View>
<View className="gap-0.5 px-5 pb-5 pt-2">
<Text className="text-lg font-bold tracking-tight text-white">{address.name}</Text>
{lines.map((line) => (
<Text key={line} className="text-sm text-white/70">
{line}
</Text>
))}
{address.phone ? (
<Text className="pt-1 text-sm tabular-nums text-white/50">{address.phone}</Text>
) : null}
</View>
</View>
);
}
DefaultAddressCard.displayName = "DefaultAddressCard";
/** Other addresses ride in ONE grouped card — hairlines + chevrons, not a
* stack of identical cards. Rows tap through to edit; deletable rows get
* a trailing trash affordance inside the row's action cluster. */
function AddressRow({
address,
onEdit,
onDelete,
onSetDefault,
}: {
address: SavedAddress;
onEdit?: (a: SavedAddress) => void;
onDelete?: (a: SavedAddress) => void;
onSetDefault?: (a: SavedAddress) => void;
}) {
const haptics = useHaptic();
return (
<View className="px-4 py-3.5">
<View className="flex-row items-center gap-2">
<Icon name={address.icon ?? labelIcon(address.label)} size="sm" color="#65A30D" />
<Text variant="small" className="font-semibold">
{address.label}
</Text>
<View className="flex-1" />
{onDelete ? (
<Pressable
onPress={() => {
haptics.warning();
onDelete(address);
}}
accessibilityRole="button"
accessibilityLabel={`Delete ${address.label} address`}
hitSlop={8}
className="h-8 w-8 items-center justify-center rounded-full"
>
<Icon name="trash" size="sm" color="destructive" />
</Pressable>
) : null}
{onEdit ? (
<Pressable
onPress={() => {
haptics.light();
onEdit(address);
}}
accessibilityRole="button"
accessibilityLabel={`Edit ${address.label} address`}
hitSlop={8}
className="h-8 w-8 items-center justify-center"
>
<Icon name="chevron-right" size="sm" color="mutedForeground" />
</Pressable>
) : null}
</View>
<View className="gap-0.5 pl-7">
<Text variant="small">{address.name}</Text>
<Text variant="muted" className="text-xs" numberOfLines={2}>
{[address.line1, address.line2, address.city].filter(Boolean).join(", ")}
</Text>
{onSetDefault ? (
<Pressable
onPress={() => {
haptics.selection();
onSetDefault(address);
}}
accessibilityRole="button"
accessibilityLabel={`Set ${address.label} as the default address`}
hitSlop={8}
className="min-h-8 justify-center self-start"
>
<Text variant="small" className="font-semibold text-[#65A30D]">
Set as default
</Text>
</Pressable>
) : null}
</View>
</View>
);
}
AddressRow.displayName = "AddressRow";
/** Address book — the default address is a dark "ships to" label card and
* everything else groups into one card with hairline separators. */
export function AddressBookScreen({
addresses = DEFAULT_ADDRESSES,
onAdd,
onEdit,
onDelete,
onSetDefault,
onBack,
}: AddressBookScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
// Local mirror of the default + deletions so taps feel alive without a
// wired host; a real host resolves these via the callbacks.
const [defaultId, setDefaultId] = useState<string | undefined>(
() => addresses.find((a) => a.isDefault)?.id
);
const [removedIds, setRemovedIds] = useState<Set<string>>(new Set());
const visible = addresses
.filter((a) => !removedIds.has(a.id))
.map((a) => ({ ...a, isDefault: a.id === defaultId }));
const defaultAddress = visible.find((a) => a.isDefault);
const rest = visible.filter((a) => !a.isDefault);
const setDefault = (a: SavedAddress) => {
setDefaultId(a.id);
onSetDefault?.(a);
};
const remove = (a: SavedAddress) => {
setRemovedIds((prev) => new Set(prev).add(a.id));
onDelete?.(a);
};
return (
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
{/* Floating chrome — back disc + centered brand/title pill + add. */}
<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={() => onAdd?.()}
accessibilityRole="button"
accessibilityLabel="Add a new address"
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">
Addresses
</Text>
</View>
</View>
</View>
<ScrollView
className="flex-1"
showsVerticalScrollIndicator={false}
contentContainerClassName="gap-4 px-6"
contentContainerStyle={{ paddingTop: insets.top + 60, paddingBottom: insets.bottom + 24 }}
>
{defaultAddress ? (
<Mount>
<DefaultAddressCard address={defaultAddress} onEdit={onEdit} />
</Mount>
) : null}
{rest.length ? (
<Mount delay={80}>
<View className="overflow-hidden rounded-3xl bg-white dark:bg-[#1A1A20]">
{rest.map((address, i) => (
<React.Fragment key={address.id}>
{i > 0 ? (
<View className={`h-px bg-border ${SEPARATOR_INSET}`} />
) : null}
<AddressRow
address={address}
onEdit={onEdit}
onDelete={onDelete ? remove : undefined}
onSetDefault={setDefault}
/>
</React.Fragment>
))}
</View>
</Mount>
) : null}
{/* Add slot — dashed outline reads as "empty slot", not a filled card. */}
<Mount delay={160}>
<Pressable
onPress={() => {
haptics.light();
onAdd?.();
}}
accessibilityRole="button"
accessibilityLabel="Add a new address"
className="min-h-14 flex-row items-center justify-center gap-2 rounded-3xl border-2 border-dashed border-[#BEF04C] py-4"
>
<Icon name="plus" size="md" color="#65A30D" />
<Text variant="small" className="font-semibold text-[#65A30D]">
Add a new address
</Text>
</Pressable>
</Mount>
{/* Default rule — address books close on which one wins at checkout. */}
<Text variant="muted" className="px-6 pt-4 text-center text-xs">
Your default address is preselected at every checkout
</Text>
</ScrollView>
</SafeAreaView>
);
}
AddressBookScreen.displayName = "AddressBookScreen";
Recreate the "Address Book Screen" screen in React Native using LumioUI.
Goal: Saved addresses as labeled cards — icon well, default badge, per-card edit/delete, 'Set as default' — plus a dashed add-address slot 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 ecommerce-address-book
```
Or pull just the components: `npx lumioui add badge 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
### `badge` — Compact status pill with variants, icons and pulse option.
- imported but not rendered directly — likely used through a sibling or as a utility
### `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
### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×7
### `text` — Themed type scale from caption to display.
- `<Text>` ×11
## 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/ecommerce/address-book.tsx` exporting AddressBookScreen. 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 { useState } from "react";
import { View, ScrollView, Pressable } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Glass, Icon, Text, type IconName } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { LumioMark, Mount, Press, SEPARATOR_INSET } from "../shared";
export interface SavedAddress {
id: string;
/** Short label — "Home", "Work", "Mom's place". */
label: string;
/** Leading icon; inferred from the label when omitted. */
icon?: IconName;
name: string;
line1: string;
line2?: string;
/** "San Francisco, CA 94107" — city/region/postal on one line. */
city: string;
country?: string;
phone?: string;
isDefault?: boolean;
}
export interface AddressBookScreenProps {
addresses?: SavedAddress[];
onAdd?: () => void;
onEdit?: (address: SavedAddress) => void;
onDelete?: (address: SavedAddress) => void;
onSetDefault?: (address: SavedAddress) => void;
onBack?: () => void;
}
const DEFAULT_ADDRESSES: SavedAddress[] = [
{
id: "a1",
label: "Home",
name: "Amara Chen",
line1: "421 Harbor Lane",
line2: "Apt 5B",
city: "San Francisco, CA 94107",
country: "United States",
phone: "+1 (415) 555-0132",
isDefault: true,
},
{
id: "a2",
label: "Work",
name: "Amara Chen",
line1: "128 Linden St",
line2: "Apt 4B",
city: "Brooklyn, NY 11221",
country: "United States",
},
{
id: "a3",
label: "Mom's place",
name: "Elena Chen",
line1: "214 Fillmore St",
city: "San Francisco, CA 94117",
country: "United States",
},
];
/** Label → leading icon. Anything custom can override via `icon`. */
function labelIcon(label: string): IconName {
const l = label.toLowerCase();
if (l.includes("work") || l.includes("office")) return "briefcase";
if (l.includes("home")) return "home";
return "map-pin";
}
/** The default address is the screen's signature — an ink "shipping label"
* card, echoing the dark wallet cards in payment-methods. */
function DefaultAddressCard({
address,
onEdit,
}: {
address: SavedAddress;
onEdit?: (a: SavedAddress) => void;
}) {
const haptics = useHaptic();
const lines = [address.line1, address.line2, address.city, address.country].filter(Boolean);
return (
<View className="overflow-hidden rounded-3xl bg-[#1B1B26]">
<Glass interactive effect="regular" sheen={0.4} tintColor="#FFFFFF12" className="absolute inset-0 rounded-3xl" pointerEvents="none" />
<View className="flex-row items-center justify-between px-5 pt-4">
<Text className="text-[10px] font-semibold uppercase tracking-[0.18em] text-white/50">
Ships to · {address.label}
</Text>
{onEdit ? (
<Pressable
onPress={() => {
haptics.light();
onEdit(address);
}}
accessibilityRole="button"
accessibilityLabel={`Edit ${address.label} address`}
hitSlop={8}
className="h-9 w-9 items-center justify-center rounded-full bg-white/10 backdrop-blur-xl"
>
<Icon name="edit" size="sm" color="#FFFFFF" />
</Pressable>
) : null}
</View>
<View className="gap-0.5 px-5 pb-5 pt-2">
<Text className="text-lg font-bold tracking-tight text-white">{address.name}</Text>
{lines.map((line) => (
<Text key={line} className="text-sm text-white/70">
{line}
</Text>
))}
{address.phone ? (
<Text className="pt-1 text-sm tabular-nums text-white/50">{address.phone}</Text>
) : null}
</View>
</View>
);
}
DefaultAddressCard.displayName = "DefaultAddressCard";
/** Other addresses ride in ONE grouped card — hairlines + chevrons, not a
* stack of identical cards. Rows tap through to edit; deletable rows get
* a trailing trash affordance inside the row's action cluster. */
function AddressRow({
address,
onEdit,
onDelete,
onSetDefault,
}: {
address: SavedAddress;
onEdit?: (a: SavedAddress) => void;
onDelete?: (a: SavedAddress) => void;
onSetDefault?: (a: SavedAddress) => void;
}) {
const haptics = useHaptic();
return (
<View className="px-4 py-3.5">
<View className="flex-row items-center gap-2">
<Icon name={address.icon ?? labelIcon(address.label)} size="sm" color="#65A30D" />
<Text variant="small" className="font-semibold">
{address.label}
</Text>
<View className="flex-1" />
{onDelete ? (
<Pressable
onPress={() => {
haptics.warning();
onDelete(address);
}}
accessibilityRole="button"
accessibilityLabel={`Delete ${address.label} address`}
hitSlop={8}
className="h-8 w-8 items-center justify-center rounded-full"
>
<Icon name="trash" size="sm" color="destructive" />
</Pressable>
) : null}
{onEdit ? (
<Pressable
onPress={() => {
haptics.light();
onEdit(address);
}}
accessibilityRole="button"
accessibilityLabel={`Edit ${address.label} address`}
hitSlop={8}
className="h-8 w-8 items-center justify-center"
>
<Icon name="chevron-right" size="sm" color="mutedForeground" />
</Pressable>
) : null}
</View>
<View className="gap-0.5 pl-7">
<Text variant="small">{address.name}</Text>
<Text variant="muted" className="text-xs" numberOfLines={2}>
{[address.line1, address.line2, address.city].filter(Boolean).join(", ")}
</Text>
{onSetDefault ? (
<Pressable
onPress={() => {
haptics.selection();
onSetDefault(address);
}}
accessibilityRole="button"
accessibilityLabel={`Set ${address.label} as the default address`}
hitSlop={8}
className="min-h-8 justify-center self-start"
>
<Text variant="small" className="font-semibold text-[#65A30D]">
Set as default
</Text>
</Pressable>
) : null}
</View>
</View>
);
}
AddressRow.displayName = "AddressRow";
/** Address book — the default address is a dark "ships to" label card and
* everything else groups into one card with hairline separators. */
export function AddressBookScreen({
addresses = DEFAULT_ADDRESSES,
onAdd,
onEdit,
onDelete,
onSetDefault,
onBack,
}: AddressBookScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
// Local mirror of the default + deletions so taps feel alive without a
// wired host; a real host resolves these via the callbacks.
const [defaultId, setDefaultId] = useState<string | undefined>(
() => addresses.find((a) => a.isDefault)?.id
);
const [removedIds, setRemovedIds] = useState<Set<string>>(new Set());
const visible = addresses
.filter((a) => !removedIds.has(a.id))
.map((a) => ({ ...a, isDefault: a.id === defaultId }));
const defaultAddress = visible.find((a) => a.isDefault);
const rest = visible.filter((a) => !a.isDefault);
const setDefault = (a: SavedAddress) => {
setDefaultId(a.id);
onSetDefault?.(a);
};
const remove = (a: SavedAddress) => {
setRemovedIds((prev) => new Set(prev).add(a.id));
onDelete?.(a);
};
return (
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
{/* Floating chrome — back disc + centered brand/title pill + add. */}
<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={() => onAdd?.()}
accessibilityRole="button"
accessibilityLabel="Add a new address"
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">
Addresses
</Text>
</View>
</View>
</View>
<ScrollView
className="flex-1"
showsVerticalScrollIndicator={false}
contentContainerClassName="gap-4 px-6"
contentContainerStyle={{ paddingTop: insets.top + 60, paddingBottom: insets.bottom + 24 }}
>
{defaultAddress ? (
<Mount>
<DefaultAddressCard address={defaultAddress} onEdit={onEdit} />
</Mount>
) : null}
{rest.length ? (
<Mount delay={80}>
<View className="overflow-hidden rounded-3xl bg-white dark:bg-[#1A1A20]">
{rest.map((address, i) => (
<React.Fragment key={address.id}>
{i > 0 ? (
<View className={`h-px bg-border ${SEPARATOR_INSET}`} />
) : null}
<AddressRow
address={address}
onEdit={onEdit}
onDelete={onDelete ? remove : undefined}
onSetDefault={setDefault}
/>
</React.Fragment>
))}
</View>
</Mount>
) : null}
{/* Add slot — dashed outline reads as "empty slot", not a filled card. */}
<Mount delay={160}>
<Pressable
onPress={() => {
haptics.light();
onAdd?.();
}}
accessibilityRole="button"
accessibilityLabel="Add a new address"
className="min-h-14 flex-row items-center justify-center gap-2 rounded-3xl border-2 border-dashed border-[#BEF04C] py-4"
>
<Icon name="plus" size="md" color="#65A30D" />
<Text variant="small" className="font-semibold text-[#65A30D]">
Add a new address
</Text>
</Pressable>
</Mount>
{/* Default rule — address books close on which one wins at checkout. */}
<Text variant="muted" className="px-6 pt-4 text-center text-xs">
Your default address is preselected at every checkout
</Text>
</ScrollView>
</SafeAreaView>
);
}
AddressBookScreen.displayName = "AddressBookScreen";
```
Screen: https://lumioui.dev/screens/ecommerce-address-book