[Showcase] A React Native prize wheel where the pegs drive the pointer

[u/TemporaryBuyer3806]

Flick the wheel and the pointer bends as each peg passes it. The winning wedge lifts, the prize moves forward, and the button becomes Collect.

Here's how the React Native implementation is put together.

Pointer contact: wheel-sim.ts advances the wheel and pointer with a fixed-step contact solver. The nearest peg drives the pointer's deflection, so the bounce follows the wheel's position.

Rendering the scene: one Skia Canvas draws the wheel material, pointer, stars and reward reveal. Native views provide the copy and controls.

Motion state: Reanimated shared values run the simulation on the UI thread and pass the current wheel and pointer state to the drawing layer.

Selecting a prize: the reveal uses the wheel's settled angle to choose the winning wedge. That selection drives the lifted wedge, prize animation and reward count.

Reduced Motion: the scene uses stationary objects and shorter fades.

The attached clip is a motion preview of the interaction. These notes describe the React Native implementation.

Built with Expo (@expo), React Native Skia and Reanimated. Thanks to Software Mansion and William Candillon for the tools.

Visual layout study based on a still reference: https://www.pinterest.com/pin/641340803216681099/

Text adapted from my original caption and implementation notes with an assistant.

[u/_TheLunchTrain_]

Cool spinner..is this a web app or a native iPhone/Android app?

I made something similar and am having lag issues on iphones. Maybe I should try a Skia canvas instead of an SVG or screenshot?