Back to components
Commerce component
Product Header (Detail)
Full product detail header with image gallery, color/size selector, wishlist, and sticky add-to-cart.
Install
What it does
- Horizontal image gallery with dots indicator
- Color variant selector (circular swatches)
- Size selector (pill buttons)
- Rating and review count display
- Wishlist toggle with heart icon
- Sticky bottom add-to-cart bar with price
- Description section with read-more
When to use
Use it
Product detail screens, PDP (product detail page) in e-commerce apps.
Skip it
Product list cards (use product-card component).
Prerequisites
- Expo project with expo-image
Files & routes added
- components/commerce/product-header.tsx