Shared shopping list — gather progress bar, inline add field, aisle-grouped checkboxes with quantity notes and price estimates, sticky checkout bar
import * as React from "react";
import { useState } from "react";
import { Pressable, ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Checkbox, Glass, Icon, Image, Input, Progress, Separator, Text } from "@lumioui/ui";
import { cn, useHaptic } from "@lumioui/core";
import { BLOCK_STAGGER, Mount, StickyBottomBar, World } from "../shared";
export interface GroceryItem {
id: string;
name: string;
/** Quantity / note line — "×4", "150 g box". */
note?: string;
/** Estimated unit price. */
price: number;
/** Product photo — Instacart-style thumb. */
imageUrl?: string;
done?: boolean;
}
export interface GrocerySection {
/** Aisle name — "Produce", "Pantry". */
aisle: string;
items: GroceryItem[];
}
export interface GroceryListScreenProps {
title?: string;
/** Meta line under the title — "Shared with Amara · Sat 9:12 AM". */
meta?: string;
sections?: GrocerySection[];
currency?: string;
onToggleItem?: (item: GroceryItem, done: boolean) => void;
onAddItem?: (name: string) => void;
onCheckout?: () => void;
}
const fmt = (n: number, currency = "$") =>
`${currency}${n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
const img = (id: string) =>
`https://images.unsplash.com/photo-${id}?w=96&h=96&fit=crop&q=80`;
const DEFAULT_SECTIONS: GrocerySection[] = [
{
aisle: "Produce",
items: [
{ id: "g1", name: "Hass avocados", note: "×4", price: 5.0, imageUrl: img("1523049673857-eb18f1d7b578") },
{ id: "g2", name: "Baby spinach", note: "150 g box", price: 3.4, imageUrl: img("1576045057995-568f588f82fb") },
{ id: "g3", name: "San Marzano tomatoes", note: "×6", price: 4.1, done: true, imageUrl: img("1592924357228-91a4daadcfea") },
{ id: "g4", name: "Limes", note: "×3", price: 0.9, imageUrl: img("1587486913049-53fc88980cfc") },
],
},
{
aisle: "Bakery",
items: [
{ id: "g5", name: "Sourdough boule", price: 5.6, done: true, imageUrl: img("1509440159596-0249088772ff") },
{ id: "g6", name: "Butter croissants", note: "×4", price: 6.8, imageUrl: img("1555507036-ab1f4038808a") },
],
},
{
aisle: "Dairy & eggs",
items: [
{ id: "g7", name: "Whole milk", note: "1 L", price: 2.1, imageUrl: img("1550583724-b2692b85b150") },
{ id: "g8", name: "Free-range eggs", note: "×12", price: 4.3, done: true, imageUrl: img("1582722872445-44dc5f7e3c8f") },
{ id: "g9", name: "Parmesan wedge", note: "200 g", price: 7.9, imageUrl: img("1486297678162-eb2a19b0a32d") },
],
},
{
aisle: "Pantry",
items: [
{ id: "g10", name: "Arborio rice", note: "1 kg", price: 3.95, imageUrl: img("1516684732162-798a0062be99") },
{ id: "g11", name: "White miso paste", price: 4.6, imageUrl: img("1547592180-85f173990554") },
{ id: "g12", name: "Olive oil", note: "500 ml", price: 9.8, imageUrl: img("1474979266404-7eaacbcd87c5") },
],
},
];
/** One aisle's checklist — hairline-separated rows, box + name + price. */
function AisleSection({
section,
checked,
currency,
onToggle,
}: {
section: GrocerySection;
checked: Set<string>;
currency: string;
onToggle: (item: GroceryItem, done: boolean) => void;
}) {
return (
<View className="pt-2">
<Text className="px-6 pb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
{section.aisle}
</Text>
<View className="mx-6 overflow-hidden rounded-3xl px-4 py-2">
<Glass interactive effect="regular" sheen={0.5} className="absolute inset-0 rounded-3xl" pointerEvents="none" />
{section.items.map((item, i) => {
const done = checked.has(item.id);
return (
<View key={item.id}>
{i > 0 ? <Separator className="my-0.5" /> : null}
<Pressable
onPress={() => onToggle(item, !done)}
accessibilityRole="checkbox"
accessibilityState={{ checked: done }}
accessibilityLabel={`${item.name}${item.note ? `, ${item.note}` : ""}`}
className="min-h-11 flex-row items-center gap-3 py-2.5"
>
<Checkbox
checked={done}
onCheckedChange={(value) => onToggle(item, value)}
accessibilityLabel={item.name}
/>
{item.imageUrl ? (
<Image
source={{ uri: item.imageUrl }}
rounded="lg"
className={cn("h-10 w-10", done && "opacity-40")}
accessibilityLabel={item.name}
/>
) : null}
<View className="flex-1">
<Text
variant="small"
className={cn(done && "text-muted-foreground line-through")}
>
{item.name}
</Text>
{item.note ? (
<Text variant="muted" className="text-xs">
{item.note}
</Text>
) : null}
</View>
<Text variant="muted" className="text-xs tabular-nums">
{fmt(item.price, currency)}
</Text>
</Pressable>
</View>
);
})}
</View>
</View>
);
}
AisleSection.displayName = "AisleSection";
/** GroceryList — shared shopping list: progress bar, inline add field,
* aisle-grouped checkboxes with price estimates, sticky checkout bar. */
export function GroceryListScreen({
title = "Grocery list",
meta = "Shared with Amara · Updated 9:12 AM",
sections = DEFAULT_SECTIONS,
currency = "$",
onToggleItem,
onAddItem,
onCheckout,
}: GroceryListScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const [draft, setDraft] = useState("");
// Local mirror so checks flip even when the host doesn't pass state back.
const [checked, setChecked] = useState<Set<string>>(
() =>
new Set(
sections.flatMap((s) => s.items.filter((i) => i.done).map((i) => i.id))
)
);
const all = sections.flatMap((s) => s.items);
const doneCount = all.filter((i) => checked.has(i.id)).length;
const remaining = all.filter((i) => !checked.has(i.id));
const estimate = remaining.reduce((sum, i) => sum + i.price, 0);
const toggle = (item: GroceryItem, done: boolean) => {
setChecked((prev) => {
const copy = new Set(prev);
if (done) copy.add(item.id);
else copy.delete(item.id);
return copy;
});
onToggleItem?.(item, done);
};
const submitDraft = () => {
const name = draft.trim();
if (!name) return;
haptics.light();
setDraft("");
onAddItem?.(name);
};
return (
<World primary="#E2503B">
<SafeAreaView className="flex-1 bg-[#E4E9DF] dark:bg-[#161D11]" edges={["top"]}>
<Mount>
<View className="px-6 pb-1 pt-4">
<Text variant="h2" accessibilityRole="header">
{title}
</Text>
<Text variant="muted" className="text-xs">
{meta}
</Text>
{/* Freshness hint — shared lists live or die on sync trust. */}
<Text variant="muted" className="pt-1 text-[11px] text-success">
✓ Amara added 2 items 5 min ago
</Text>
</View>
</Mount>
{/* Gather progress — a stat hero, not a caption: the count leads,
the bar trails. */}
<Mount delay={40}>
<View className="gap-2 px-6 pb-3 pt-2">
<View
className="flex-row items-baseline gap-1.5"
accessibilityLabel={`${doneCount} of ${all.length} items gathered`}
>
<Text className="text-2xl font-bold tabular-nums tracking-tight">
{doneCount}
</Text>
<Text variant="muted">
{doneCount === all.length
? "· everything's in the cart"
: `of ${all.length} gathered`}
</Text>
</View>
<Progress value={all.length > 0 ? (doneCount / all.length) * 100 : 0} />
</View>
</Mount>
{/* Inline add — the list never makes you leave for a sheet. */}
<Mount delay={80}>
<View className="flex-row gap-2 px-6 pb-2">
<View className="flex-1">
<Input
glass
placeholder="Add an item…"
value={draft}
onChangeText={setDraft}
onSubmitEditing={submitDraft}
returnKeyType="done"
accessibilityLabel="Add an item to the list"
/>
</View>
<Button
variant="secondary"
size="icon"
haptic="light"
onPress={submitDraft}
disabled={draft.trim().length === 0}
accessibilityLabel="Add item"
>
<Icon name="plus" size="md" color="secondaryForeground" />
</Button>
</View>
</Mount>
<ScrollView
className="flex-1"
showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps="handled"
contentContainerStyle={{ paddingBottom: insets.bottom + 96 }}
>
{sections.map((section, s) => (
<Mount key={section.aisle} delay={120 + s * BLOCK_STAGGER}>
<AisleSection
section={section}
checked={checked}
currency={currency}
onToggle={toggle}
/>
</Mount>
))}
</ScrollView>
{onCheckout ? (
<StickyBottomBar>
<Button
haptic="heavy"
onPress={onCheckout}
disabled={remaining.length === 0}
accessibilityLabel={`Checkout, estimated total ${fmt(estimate, currency)}`}
icon={<Icon name="shopping-cart" size="sm" color="primaryForeground" />}
>
Checkout · est. {fmt(estimate, currency)}
</Button>
</StickyBottomBar>
) : null}
</SafeAreaView>
</World>
);
}
GroceryListScreen.displayName = "GroceryListScreen";
Recreate the "Grocery List Screen" screen in React Native using LumioUI.
Goal: Shared shopping list — gather progress bar, inline add field, aisle-grouped checkboxes with quantity notes and price estimates, sticky checkout bar 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 food-grocery-list
```
Or pull just the components: `npx lumioui add button checkbox icon image input progress separator 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>` ×2
### `checkbox` — Animated check box with haptic tick and error state.
- `<Checkbox>` ×1
### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×2
### `image` — Cached image with placeholder, fallback and aspect handling.
- `<Image>` ×1
### `input` — Labeled field with focus ring, error shake and success check.
- `<Input>` ×1
### `progress` — Animated fill bar with indeterminate sweep mode.
- `<Progress>` ×1
### `separator` — Hairline rule with orientation and spacing control.
- `<Separator>` ×1
### `text` — Themed type scale from caption to display.
- `<Text>` ×9
## 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/food/grocery-list.tsx` exporting GroceryListScreen. 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 { Pressable, ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Checkbox, Glass, Icon, Image, Input, Progress, Separator, Text } from "@lumioui/ui";
import { cn, useHaptic } from "@lumioui/core";
import { BLOCK_STAGGER, Mount, StickyBottomBar, World } from "../shared";
export interface GroceryItem {
id: string;
name: string;
/** Quantity / note line — "×4", "150 g box". */
note?: string;
/** Estimated unit price. */
price: number;
/** Product photo — Instacart-style thumb. */
imageUrl?: string;
done?: boolean;
}
export interface GrocerySection {
/** Aisle name — "Produce", "Pantry". */
aisle: string;
items: GroceryItem[];
}
export interface GroceryListScreenProps {
title?: string;
/** Meta line under the title — "Shared with Amara · Sat 9:12 AM". */
meta?: string;
sections?: GrocerySection[];
currency?: string;
onToggleItem?: (item: GroceryItem, done: boolean) => void;
onAddItem?: (name: string) => void;
onCheckout?: () => void;
}
const fmt = (n: number, currency = "$") =>
`${currency}${n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
const img = (id: string) =>
`https://images.unsplash.com/photo-${id}?w=96&h=96&fit=crop&q=80`;
const DEFAULT_SECTIONS: GrocerySection[] = [
{
aisle: "Produce",
items: [
{ id: "g1", name: "Hass avocados", note: "×4", price: 5.0, imageUrl: img("1523049673857-eb18f1d7b578") },
{ id: "g2", name: "Baby spinach", note: "150 g box", price: 3.4, imageUrl: img("1576045057995-568f588f82fb") },
{ id: "g3", name: "San Marzano tomatoes", note: "×6", price: 4.1, done: true, imageUrl: img("1592924357228-91a4daadcfea") },
{ id: "g4", name: "Limes", note: "×3", price: 0.9, imageUrl: img("1587486913049-53fc88980cfc") },
],
},
{
aisle: "Bakery",
items: [
{ id: "g5", name: "Sourdough boule", price: 5.6, done: true, imageUrl: img("1509440159596-0249088772ff") },
{ id: "g6", name: "Butter croissants", note: "×4", price: 6.8, imageUrl: img("1555507036-ab1f4038808a") },
],
},
{
aisle: "Dairy & eggs",
items: [
{ id: "g7", name: "Whole milk", note: "1 L", price: 2.1, imageUrl: img("1550583724-b2692b85b150") },
{ id: "g8", name: "Free-range eggs", note: "×12", price: 4.3, done: true, imageUrl: img("1582722872445-44dc5f7e3c8f") },
{ id: "g9", name: "Parmesan wedge", note: "200 g", price: 7.9, imageUrl: img("1486297678162-eb2a19b0a32d") },
],
},
{
aisle: "Pantry",
items: [
{ id: "g10", name: "Arborio rice", note: "1 kg", price: 3.95, imageUrl: img("1516684732162-798a0062be99") },
{ id: "g11", name: "White miso paste", price: 4.6, imageUrl: img("1547592180-85f173990554") },
{ id: "g12", name: "Olive oil", note: "500 ml", price: 9.8, imageUrl: img("1474979266404-7eaacbcd87c5") },
],
},
];
/** One aisle's checklist — hairline-separated rows, box + name + price. */
function AisleSection({
section,
checked,
currency,
onToggle,
}: {
section: GrocerySection;
checked: Set<string>;
currency: string;
onToggle: (item: GroceryItem, done: boolean) => void;
}) {
return (
<View className="pt-2">
<Text className="px-6 pb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
{section.aisle}
</Text>
<View className="mx-6 overflow-hidden rounded-3xl px-4 py-2">
<Glass interactive effect="regular" sheen={0.5} className="absolute inset-0 rounded-3xl" pointerEvents="none" />
{section.items.map((item, i) => {
const done = checked.has(item.id);
return (
<View key={item.id}>
{i > 0 ? <Separator className="my-0.5" /> : null}
<Pressable
onPress={() => onToggle(item, !done)}
accessibilityRole="checkbox"
accessibilityState={{ checked: done }}
accessibilityLabel={`${item.name}${item.note ? `, ${item.note}` : ""}`}
className="min-h-11 flex-row items-center gap-3 py-2.5"
>
<Checkbox
checked={done}
onCheckedChange={(value) => onToggle(item, value)}
accessibilityLabel={item.name}
/>
{item.imageUrl ? (
<Image
source={{ uri: item.imageUrl }}
rounded="lg"
className={cn("h-10 w-10", done && "opacity-40")}
accessibilityLabel={item.name}
/>
) : null}
<View className="flex-1">
<Text
variant="small"
className={cn(done && "text-muted-foreground line-through")}
>
{item.name}
</Text>
{item.note ? (
<Text variant="muted" className="text-xs">
{item.note}
</Text>
) : null}
</View>
<Text variant="muted" className="text-xs tabular-nums">
{fmt(item.price, currency)}
</Text>
</Pressable>
</View>
);
})}
</View>
</View>
);
}
AisleSection.displayName = "AisleSection";
/** GroceryList — shared shopping list: progress bar, inline add field,
* aisle-grouped checkboxes with price estimates, sticky checkout bar. */
export function GroceryListScreen({
title = "Grocery list",
meta = "Shared with Amara · Updated 9:12 AM",
sections = DEFAULT_SECTIONS,
currency = "$",
onToggleItem,
onAddItem,
onCheckout,
}: GroceryListScreenProps) {
const haptics = useHaptic();
const insets = useSafeAreaInsets();
const [draft, setDraft] = useState("");
// Local mirror so checks flip even when the host doesn't pass state back.
const [checked, setChecked] = useState<Set<string>>(
() =>
new Set(
sections.flatMap((s) => s.items.filter((i) => i.done).map((i) => i.id))
)
);
const all = sections.flatMap((s) => s.items);
const doneCount = all.filter((i) => checked.has(i.id)).length;
const remaining = all.filter((i) => !checked.has(i.id));
const estimate = remaining.reduce((sum, i) => sum + i.price, 0);
const toggle = (item: GroceryItem, done: boolean) => {
setChecked((prev) => {
const copy = new Set(prev);
if (done) copy.add(item.id);
else copy.delete(item.id);
return copy;
});
onToggleItem?.(item, done);
};
const submitDraft = () => {
const name = draft.trim();
if (!name) return;
haptics.light();
setDraft("");
onAddItem?.(name);
};
return (
<World primary="#E2503B">
<SafeAreaView className="flex-1 bg-[#E4E9DF] dark:bg-[#161D11]" edges={["top"]}>
<Mount>
<View className="px-6 pb-1 pt-4">
<Text variant="h2" accessibilityRole="header">
{title}
</Text>
<Text variant="muted" className="text-xs">
{meta}
</Text>
{/* Freshness hint — shared lists live or die on sync trust. */}
<Text variant="muted" className="pt-1 text-[11px] text-success">
✓ Amara added 2 items 5 min ago
</Text>
</View>
</Mount>
{/* Gather progress — a stat hero, not a caption: the count leads,
the bar trails. */}
<Mount delay={40}>
<View className="gap-2 px-6 pb-3 pt-2">
<View
className="flex-row items-baseline gap-1.5"
accessibilityLabel={`${doneCount} of ${all.length} items gathered`}
>
<Text className="text-2xl font-bold tabular-nums tracking-tight">
{doneCount}
</Text>
<Text variant="muted">
{doneCount === all.length
? "· everything's in the cart"
: `of ${all.length} gathered`}
</Text>
</View>
<Progress value={all.length > 0 ? (doneCount / all.length) * 100 : 0} />
</View>
</Mount>
{/* Inline add — the list never makes you leave for a sheet. */}
<Mount delay={80}>
<View className="flex-row gap-2 px-6 pb-2">
<View className="flex-1">
<Input
glass
placeholder="Add an item…"
value={draft}
onChangeText={setDraft}
onSubmitEditing={submitDraft}
returnKeyType="done"
accessibilityLabel="Add an item to the list"
/>
</View>
<Button
variant="secondary"
size="icon"
haptic="light"
onPress={submitDraft}
disabled={draft.trim().length === 0}
accessibilityLabel="Add item"
>
<Icon name="plus" size="md" color="secondaryForeground" />
</Button>
</View>
</Mount>
<ScrollView
className="flex-1"
showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps="handled"
contentContainerStyle={{ paddingBottom: insets.bottom + 96 }}
>
{sections.map((section, s) => (
<Mount key={section.aisle} delay={120 + s * BLOCK_STAGGER}>
<AisleSection
section={section}
checked={checked}
currency={currency}
onToggle={toggle}
/>
</Mount>
))}
</ScrollView>
{onCheckout ? (
<StickyBottomBar>
<Button
haptic="heavy"
onPress={onCheckout}
disabled={remaining.length === 0}
accessibilityLabel={`Checkout, estimated total ${fmt(estimate, currency)}`}
icon={<Icon name="shopping-cart" size="sm" color="primaryForeground" />}
>
Checkout · est. {fmt(estimate, currency)}
</Button>
</StickyBottomBar>
) : null}
</SafeAreaView>
</World>
);
}
GroceryListScreen.displayName = "GroceryListScreen";
```
Screen: https://lumioui.dev/screens/food-grocery-list