Select order items and a reason to request a prepaid return.
import * as React from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Chip, Glass, Icon, Image, List, Text, } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { LumioMark, Mount, Press, RowIcon, SEPARATOR_INSET, StickyBottomBar, catalogImg, type CatalogPhoto } from "../shared";
export interface ReturnableItem {
id: string;
title: string;
detail: string;
price: string;
photo: CatalogPhoto;
}
export interface ReturnsScreenProps {
items?: ReturnableItem[];
reasons?: string[];
/** e.g. "Order #4821 · Delivered Sep 12" */
orderLabel?: string;
onSubmit?: (itemIds: string[], reason: string) => void;
onBack?: () => void;
}
const DEFAULT_ITEMS: ReturnableItem[] = [
{ id: "i1", title: "Raw denim jeans", detail: "32 · Indigo", price: "$148", photo: "denim" },
{ id: "i2", title: "Cream knit poncho", detail: "One size · Ecru", price: "$96", photo: "poncho" },
];
const DEFAULT_REASONS = [
"Wrong size",
"Changed my mind",
"Arrived damaged",
"Not as pictured",
];
/** Returns — pick items from an order, pick a reason, request the return. */
export function ReturnsScreen({
items = DEFAULT_ITEMS,
reasons = DEFAULT_REASONS,
orderLabel = "Order #4821 · Delivered Sep 12",
onSubmit,
onBack,
}: ReturnsScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const [picked, setPicked] = React.useState<string[]>(["i1"]);
const [reason, setReason] = React.useState<string | undefined>("Wrong size");
const [method, setMethod] = React.useState("Drop-off point");
const refundTotal = items
.filter((i) => picked.includes(i.id))
.reduce((sum, i) => sum + (parseFloat(i.price.replace(/[^0-9.]/g, "")) || 0), 0);
const refundLabel = `$${refundTotal.toFixed(2)}`;
const toggle = (id: string) => () => {
haptics.selection();
setPicked((prev) =>
prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
);
};
return (
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
{/* Floating chrome — back disc + centered title pill. */}
<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>
<View className="h-11 w-11" />
</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">
Return items
</Text>
</View>
</View>
</View>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingTop: insets.top + 60, paddingBottom: insets.bottom + 120 }}
>
<Text variant="muted" className="px-6 pb-1 text-xs">
{orderLabel}
</Text>
<List inset>
<List.Section title="Select items to return">
{items.map((item, ii) => {
const checked = picked.includes(item.id);
return (
<React.Fragment key={item.id}>
{ii > 0 && <List.Separator className={SEPARATOR_INSET} />}
<List.Item
title={item.title}
subtitle={`${item.detail} · ${item.price}`}
leading={
<Image
source={{ uri: catalogImg(item.photo, 120, 150) }}
className="h-12 w-10 rounded-xl bg-muted"
accessibilityLabel={item.title}
/>
}
haptic="selection"
onPress={toggle(item.id)}
accessibilityRole="checkbox"
accessibilityState={{ checked }}
trailing={
<View
className={`h-5 w-5 items-center justify-center rounded-full border ${
checked ? "border-transparent bg-[#BEF04C]" : "border-border"
}`}
>
{checked && (
<Icon name="check" size="sm" color="#1B1B26" />
)}
</View>
}
className="py-3"
/>
</React.Fragment>
);
})}
</List.Section>
</List>
<Mount delay={60} className="gap-3 px-6 pt-6">
<Text variant="small" className="text-muted-foreground">
Reason for return
</Text>
<View className="flex-row flex-wrap gap-2">
{reasons.map((r) => (
<Chip
key={r}
variant="filter"
selected={reason === r}
onPress={() => {
haptics.selection();
setReason(r);
}}
accessibilityState={{ selected: reason === r }}
className={reason === r ? "border-transparent bg-[#1B1B26]" : undefined}
textClassName={reason === r ? "text-white" : undefined}
>
{r}
</Chip>
))}
</View>
<Press
haptic="light"
onPress={() => haptics.light()}
accessibilityLabel="Add photos of the item"
className="flex-row items-center justify-center gap-2 rounded-2xl border border-dashed border-[#BEF04C] px-4 py-3.5"
>
<Icon name="camera" size="sm" color="#65A30D" />
<Text variant="small" className="font-medium text-[#65A30D]">
Add photos — optional, speeds things up
</Text>
</Press>
</Mount>
{/* Return method — the choice every returns flow makes. */}
<Mount delay={120} className="gap-3 px-6 pt-5">
<Text variant="small" className="text-muted-foreground">
How do you want to send it?
</Text>
<View className="flex-row gap-2">
{(["Drop-off point", "Courier pickup", "Locker"] as const).map((m) => (
<Chip
key={m}
variant="filter"
selected={method === m}
onPress={() => setMethod(m)}
accessibilityState={{ selected: method === m }}
className={method === m ? "border-transparent bg-[#1B1B26]" : undefined}
textClassName={method === m ? "text-white" : undefined}
>
{m}
</Chip>
))}
</View>
</Mount>
{/* Refund estimate — the payoff number. */}
<Mount delay={180} className="mx-6 mt-5 flex-row items-center gap-3 rounded-3xl bg-white p-4 shadow-sm dark:bg-[#1A1A20]">
<RowIcon name="credit-card" tone="green" />
<View className="flex-1">
<Text className="text-sm font-semibold">
Refund {refundLabel} to Visa ••4242
</Text>
<Text className="text-xs text-muted-foreground">
{method} · lands 3–5 days after drop-off
</Text>
</View>
</Mount>
{/* What happens next — three beats the user can trust. */}
<View className="mx-6 mt-4 flex-row rounded-3xl bg-white p-4 shadow-sm dark:bg-[#1A1A20]">
{[
{ icon: "check-circle" as const, label: "Request" },
{ icon: "package" as const, label: "Prepaid label" },
{ icon: "credit-card" as const, label: "Refund 3–5d" },
].map((s, i) => (
<View key={s.label} className="flex-1 items-center gap-1.5">
<View className="h-8 w-8 items-center justify-center rounded-full bg-[#EDF8C4] dark:bg-[#1E2410]">
<Icon name={s.icon} size="sm" color="#65A30D" />
</View>
<Text className="text-center text-[11px] text-muted-foreground">
{s.label}
</Text>
<Text className="text-[10px] font-medium text-muted-foreground">
Step {i + 1}
</Text>
</View>
))}
</View>
<Text variant="small" className="px-6 pt-3 text-muted-foreground">
Free returns within 30 days — a prepaid label lands in your inbox
right after you submit.
</Text>
{/* Refund destination — the question every return flow must answer. */}
<View className="mx-6 mt-2 flex-row items-center gap-2.5 rounded-2xl bg-white px-4 py-3 dark:bg-[#1A1A20]">
<Icon name="credit-card" size="sm" color="mutedForeground" />
<Text variant="small" className="flex-1 text-xs">
Refund to Visa ····4242 — usually 3–5 business days
</Text>
</View>
</ScrollView>
<StickyBottomBar>
<Button
tone="inverse" className="w-full bg-[#1B1B26]"
haptic="medium"
onPress={() => {
haptics.medium();
onSubmit?.(picked, reason ?? "Changed my mind");
}}
disabled={picked.length === 0 || !reason}
accessibilityLabel="Request return"
>
Request return
</Button>
</StickyBottomBar>
</SafeAreaView>
);
}
ReturnsScreen.displayName = "ReturnsScreen";
Recreate the "Return items Screen" screen in React Native using LumioUI.
Goal: Select order items and a reason to request a prepaid return. 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-returns
```
Or pull just the components: `npx lumioui add button chip icon image list 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
### `chip` — Compact selectable pill with press scale and ink overlay.
- `<Chip>` ×2
### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×5
### `image` — Cached image with placeholder, fallback and aspect handling.
- `<Image>` ×1
### `list` — Settings-style rows with separators and press feedback.
- `<List>` ×1
### `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/returns.tsx` exporting ReturnsScreen. 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, Chip, Glass, Icon, Image, List, Text, } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { LumioMark, Mount, Press, RowIcon, SEPARATOR_INSET, StickyBottomBar, catalogImg, type CatalogPhoto } from "../shared";
export interface ReturnableItem {
id: string;
title: string;
detail: string;
price: string;
photo: CatalogPhoto;
}
export interface ReturnsScreenProps {
items?: ReturnableItem[];
reasons?: string[];
/** e.g. "Order #4821 · Delivered Sep 12" */
orderLabel?: string;
onSubmit?: (itemIds: string[], reason: string) => void;
onBack?: () => void;
}
const DEFAULT_ITEMS: ReturnableItem[] = [
{ id: "i1", title: "Raw denim jeans", detail: "32 · Indigo", price: "$148", photo: "denim" },
{ id: "i2", title: "Cream knit poncho", detail: "One size · Ecru", price: "$96", photo: "poncho" },
];
const DEFAULT_REASONS = [
"Wrong size",
"Changed my mind",
"Arrived damaged",
"Not as pictured",
];
/** Returns — pick items from an order, pick a reason, request the return. */
export function ReturnsScreen({
items = DEFAULT_ITEMS,
reasons = DEFAULT_REASONS,
orderLabel = "Order #4821 · Delivered Sep 12",
onSubmit,
onBack,
}: ReturnsScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const [picked, setPicked] = React.useState<string[]>(["i1"]);
const [reason, setReason] = React.useState<string | undefined>("Wrong size");
const [method, setMethod] = React.useState("Drop-off point");
const refundTotal = items
.filter((i) => picked.includes(i.id))
.reduce((sum, i) => sum + (parseFloat(i.price.replace(/[^0-9.]/g, "")) || 0), 0);
const refundLabel = `$${refundTotal.toFixed(2)}`;
const toggle = (id: string) => () => {
haptics.selection();
setPicked((prev) =>
prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
);
};
return (
<SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
{/* Floating chrome — back disc + centered title pill. */}
<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>
<View className="h-11 w-11" />
</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">
Return items
</Text>
</View>
</View>
</View>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingTop: insets.top + 60, paddingBottom: insets.bottom + 120 }}
>
<Text variant="muted" className="px-6 pb-1 text-xs">
{orderLabel}
</Text>
<List inset>
<List.Section title="Select items to return">
{items.map((item, ii) => {
const checked = picked.includes(item.id);
return (
<React.Fragment key={item.id}>
{ii > 0 && <List.Separator className={SEPARATOR_INSET} />}
<List.Item
title={item.title}
subtitle={`${item.detail} · ${item.price}`}
leading={
<Image
source={{ uri: catalogImg(item.photo, 120, 150) }}
className="h-12 w-10 rounded-xl bg-muted"
accessibilityLabel={item.title}
/>
}
haptic="selection"
onPress={toggle(item.id)}
accessibilityRole="checkbox"
accessibilityState={{ checked }}
trailing={
<View
className={`h-5 w-5 items-center justify-center rounded-full border ${
checked ? "border-transparent bg-[#BEF04C]" : "border-border"
}`}
>
{checked && (
<Icon name="check" size="sm" color="#1B1B26" />
)}
</View>
}
className="py-3"
/>
</React.Fragment>
);
})}
</List.Section>
</List>
<Mount delay={60} className="gap-3 px-6 pt-6">
<Text variant="small" className="text-muted-foreground">
Reason for return
</Text>
<View className="flex-row flex-wrap gap-2">
{reasons.map((r) => (
<Chip
key={r}
variant="filter"
selected={reason === r}
onPress={() => {
haptics.selection();
setReason(r);
}}
accessibilityState={{ selected: reason === r }}
className={reason === r ? "border-transparent bg-[#1B1B26]" : undefined}
textClassName={reason === r ? "text-white" : undefined}
>
{r}
</Chip>
))}
</View>
<Press
haptic="light"
onPress={() => haptics.light()}
accessibilityLabel="Add photos of the item"
className="flex-row items-center justify-center gap-2 rounded-2xl border border-dashed border-[#BEF04C] px-4 py-3.5"
>
<Icon name="camera" size="sm" color="#65A30D" />
<Text variant="small" className="font-medium text-[#65A30D]">
Add photos — optional, speeds things up
</Text>
</Press>
</Mount>
{/* Return method — the choice every returns flow makes. */}
<Mount delay={120} className="gap-3 px-6 pt-5">
<Text variant="small" className="text-muted-foreground">
How do you want to send it?
</Text>
<View className="flex-row gap-2">
{(["Drop-off point", "Courier pickup", "Locker"] as const).map((m) => (
<Chip
key={m}
variant="filter"
selected={method === m}
onPress={() => setMethod(m)}
accessibilityState={{ selected: method === m }}
className={method === m ? "border-transparent bg-[#1B1B26]" : undefined}
textClassName={method === m ? "text-white" : undefined}
>
{m}
</Chip>
))}
</View>
</Mount>
{/* Refund estimate — the payoff number. */}
<Mount delay={180} className="mx-6 mt-5 flex-row items-center gap-3 rounded-3xl bg-white p-4 shadow-sm dark:bg-[#1A1A20]">
<RowIcon name="credit-card" tone="green" />
<View className="flex-1">
<Text className="text-sm font-semibold">
Refund {refundLabel} to Visa ••4242
</Text>
<Text className="text-xs text-muted-foreground">
{method} · lands 3–5 days after drop-off
</Text>
</View>
</Mount>
{/* What happens next — three beats the user can trust. */}
<View className="mx-6 mt-4 flex-row rounded-3xl bg-white p-4 shadow-sm dark:bg-[#1A1A20]">
{[
{ icon: "check-circle" as const, label: "Request" },
{ icon: "package" as const, label: "Prepaid label" },
{ icon: "credit-card" as const, label: "Refund 3–5d" },
].map((s, i) => (
<View key={s.label} className="flex-1 items-center gap-1.5">
<View className="h-8 w-8 items-center justify-center rounded-full bg-[#EDF8C4] dark:bg-[#1E2410]">
<Icon name={s.icon} size="sm" color="#65A30D" />
</View>
<Text className="text-center text-[11px] text-muted-foreground">
{s.label}
</Text>
<Text className="text-[10px] font-medium text-muted-foreground">
Step {i + 1}
</Text>
</View>
))}
</View>
<Text variant="small" className="px-6 pt-3 text-muted-foreground">
Free returns within 30 days — a prepaid label lands in your inbox
right after you submit.
</Text>
{/* Refund destination — the question every return flow must answer. */}
<View className="mx-6 mt-2 flex-row items-center gap-2.5 rounded-2xl bg-white px-4 py-3 dark:bg-[#1A1A20]">
<Icon name="credit-card" size="sm" color="mutedForeground" />
<Text variant="small" className="flex-1 text-xs">
Refund to Visa ····4242 — usually 3–5 business days
</Text>
</View>
</ScrollView>
<StickyBottomBar>
<Button
tone="inverse" className="w-full bg-[#1B1B26]"
haptic="medium"
onPress={() => {
haptics.medium();
onSubmit?.(picked, reason ?? "Changed my mind");
}}
disabled={picked.length === 0 || !reason}
accessibilityLabel="Request return"
>
Request return
</Button>
</StickyBottomBar>
</SafeAreaView>
);
}
ReturnsScreen.displayName = "ReturnsScreen";
```
Screen: https://lumioui.dev/screens/ecommerce-returns