Cart screen

Installation

$ npx shadcn@latest add @goodui-native-pro/cart-screen

Then run npx expo install --fix so react-native-reanimated, react-native-svg match your Expo SDK. Files land in components/goodui-native/cart-screen.

Pro screens install from the license-gated @goodui-native-pro registry. Setup: Pro access.

• •Wrap the app in GestureHandlerRootView and ThemeProvider, and render <Toaster /> once for the Undo toast.

Usage

// app/cart.tsx
import { Stack, router } from "expo-router";
import { CartScreen } from "@/components/goodui-native/cart-screen/cart-screen";
import { api, useCart } from "@/lib/cart";

export default function CartRoute() {
  const cart = useCart();
  return (
    <>
      <Stack.Screen options={{ headerShown: false }} />
      <CartScreen
        items={cart.items} // [{ id, title, variant, price, quantity, image }]
        onItemsChange={cart.setItems}
        currency="EUR"
        shippingFee={4.9}
        freeShippingOver={100}
        onApplyPromo={(code) => api.checkPromo(code)} // resolve { code, label, percentOff } or reject new Error("message")
        onCheckout={(summary) => router.push("/checkout")}
        onSaveForLater={(item) => api.saveForLater(item.id)}
        onBrowse={() => router.push("/shop")}
        onBack={() => router.back()}
      />
    </>
  );
}

When to use

Examples

<CartScreen />

<CartScreen items={items} onItemsChange={setItems} freeShippingOver={Infinity} undo={false} />

API reference

Motion and haptics

• •Every total rolls: the line price when its quantity changes, the subtotal, discount, delivery and total, and the checkout bar.
• •The free delivery meter fills on the smooth spring and turns green when the order qualifies.
• •Swipe left: the actions unfold with the finger; a long swipe removes, the row slides out and collapses, and the rows below close the gap on the smooth spring.
• •A wrong code shakes the field and slides the error in; a good one swaps the field for the code chip.
• •Reduced motion: digits change in place, the meter jumps, rows close the gap at once, and the field does not shake.

• •Haptic: tick on each quantity step, delete when the trash removes the item, warning at the limits (QuantityStepper)
• •Haptic: select when a swipe crosses the full-swipe threshold, delete when the remove action runs (SwipeActions); notify for the toast, undo on its Undo
• •Haptic: tap on Apply and Check out, success or error when Apply settles (Button); error when the field shows an error (TextField)
• •Haptic: tap on removing the promo chip

• •Quantities, swipes and rolls animate on the UI thread; React renders on item, promo and keyboard changes.
• •Rows render in a ScrollView: built for the tens of items a cart holds.

Accessibility

• •'Cart' is the header with the item count next to it.
• •Each row's stepper is adjustable and named 'Quantity, <title>'; at one, minus becomes a labelled remove button.
• •Swipe actions are also screen reader actions on the row (Remove, Save); a removal is announced, and Undo is in a toast.
• •The promo field announces its error under the field; an applied code is announced and shown as a chip with a remove button.
• •Totals are read as plain numbers; the free delivery line is visible text ('Add €12.40 more for free delivery').

Notes for AI

Related