Donut Shop
A dessert shop screen where the products roll. Swipe and the donuts roll across the carousel like wheels; "+" grows into a stepper and an add-to-cart bar rises; tap the donut and it zooms out to the edge of the screen, still turning, beside its nutrition. The donuts are drawn — icing, sprinkles, drizzle — with light that stays put while they spin, or pass your own round product art.
Pro
9:41
Installation
Copies the screen into src/components/blocks along with every component it uses.
Props
| Prop | Type | Default |
|---|---|---|
| items { name, price, icing, topping?, toppingColor?, image?, nutrition? }. | DonutItem[] | 5 donuts |
| title Shop name, in a script face. | string | 'Dunats' |
| currency Prefix for prices. | string | '$' |
| background Page colour in light mode. | string | soft pink |
| initialIndex Donut shown first. | number | 0 |
| onIndexChange The centred donut changed. | (index: number) => void | — |
| onAddToCart Add to Cart pressed. | (item, quantity) => void | — |
| style Root style. | StyleProp<ViewStyle> | flex: 1 |
Source
Did you like the content?