Final Project: Build an Animated Loading Spinner

Time to combine shapes, animated values, transforms, and gestures into one real piece of UI: a custom animated loading spinner.

Requirements

1. Render at least two Skia shapes inside a single Canvas (for example an outer ring built from a stroked Circle and an inner accent shape).
2. Drive a continuous rotation using a useValue and runTiming, looping forever (re-triggering the animation each time it completes, as shown in the transforms lesson).
3. Animate at least one more property besides rotation, radius, opacity, or color, using useComputedValue to derive it from your rotation value.
4. Add a tappable/draggable element (even a simple GestureDetector wrapping the whole Canvas) that triggers a runSpring animation, a "pulse" on tap is enough.
5. Wrap the whole thing in a reusable <Spinner /> component that accepts a size prop and works at any size.

Stretch goals

• Add a second, independent ring rotating in the opposite direction at a different speed.
• Fade the spinner in with runTiming on an opacity value when it first mounts.
• Turn it into a progress ring: accept a progress prop (0-1) and animate the stroke's arc length to match instead of spinning forever.

Submit a link to your finished project (a repo or gist) below, an instructor will review it before you can mark this lesson complete. Good luck!