Product screen

Installation

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

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

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

• •Wrap the app in GestureHandlerRootView and ThemeProvider.

Usage

// app/product/[id].tsx
import { Stack, router, useLocalSearchParams } from "expo-router";
import { ProductScreen } from "@/components/goodui-native/product-screen/product-screen";
import { useCart } from "@/lib/cart";
import { useProduct } from "@/lib/shop";

export default function ProductRoute() {
  const { id } = useLocalSearchParams<{ id: string }>();
  const product = useProduct(id); // { title, price, currency: "EUR", images, colors, sizes, rating, reviewCount, ... }
  const cart = useCart();
  return (
    <>
      <Stack.Screen options={{ headerShown: false }} />
      <ProductScreen
        product={product}
        cartCount={cart.count}
        onAddToCart={(item) => cart.add(item)} // return the promise; the photo flies in when it resolves
        onCartPress={() => router.push("/cart")}
        onBack={() => router.back()}
        onShare={() => share(product)}
        favorite={product.saved}
        onFavoriteChange={(saved) => api.setSaved(id, saved)}
        onImagePress={(index) => router.push(`/product/${id}/photos?index=${index}`)}
        onSeeAllReviews={() => router.push(`/product/${id}/reviews`)}
      />
    </>
  );
}

When to use

Examples

<ProductScreen onBack={() => router.back()} />

colors: [
  { value: "forest", label: "Forest", swatch: "#2F4A3A", imageIndex: 0 },
  { value: "sand", label: "Sand", swatch: "#C9B48A", imageIndex: 2 },
]

API reference

Motion and haptics

• •Add to cart: the button gathers into a spinner and opens into 'Added'; then the current photo lifts from the button and flies in an arc (x eases out, y eases in, a little upward throw) into the cart button, shrinking and turning, and the cart badge pops with the new count.
• •Price and total roll when the size or quantity changes. Picking a color with an imageIndex glides the gallery to that photo.
• •The gallery follows the finger, neighbours shrink and the active pill stretches (Carousel).
• •Reduced motion: no flight (the count just updates), digits change in place, the carousel settles on a short timing, swatch rings and chip highlights jump.

• •Haptic: tap on Add to cart, success or error when its promise settles (Button)
• •Haptic: select when a swipe or a pill changes the photo (Carousel)
• •Haptic: select on a color or size change (ColorPicker, ChipGroup); warning at the stepper's limits
• •Haptic: pop on the wishlist heart (LikeButton)

• •The flight is one absolutely positioned view driven by a single shared value on the UI thread; it mounts only while flying.
• •Positions are measured with measureInWindow when the add resolves, so the flight lands on the cart wherever the header puts it.

Accessibility

• •The gallery is one adjustable element ('<title> photos', 'Photo 2 of 4, Forest'); swipe up or down, or use arrow keys on the web.
• •The title is a header; the wishlist heart, share, back and cart are labelled buttons ('Cart, 2 items').
• •Colors are a swatch group named 'Color' with each swatch's name, or a chip group; sizes are a chip group where sold out sizes are disabled and say 'sold out' in their label.
• •The quantity stepper is adjustable and named 'Quantity, <title>'; 'Only n left' is visible text.
• •Each rating bar is read as '5 stars, 70 percent'. A successful add is announced: 'Added 2 to your cart'.
• •The flying photo is hidden from screen readers.

Notes for AI

Related