# Goal Ring — Skia Progress Ring with Glow for React Native & Expo

> A progress ring for React Native drawn with Skia: a seamless gradient arc with a soft glow, a riding end dot and your content in the middle. Animate it, drive it with a shared value, or let people drag round it to set a goal. Light and dark.

- Kind: Mobile component (Charts)
- Price: Free
- License: MIT License. Do anything with it, keeping the copyright notice.
- Developer: UpFork
- Tags: chart, progress, react-native, expo, skia, reanimated, ring, fitness
- npm packages: @shopify/react-native-skia, expo-haptics, react-native-gesture-handler, react-native-reanimated, react-native-worklets
- Published: 2026-10-14
- Updated: 2026-10-14
- Page: https://upfork.dev/products/skia-progress-ring-react-native

## How to get it

It's a React Native component for Expo apps (Expo SDK 57), not a shadcn item: copy its folders into the app's root from its ZIP (Download source on its page) or through UpFork's MCP server (install_product), then install its packages with Expo:

```bash
npx expo install @shopify/react-native-skia expo-haptics react-native-gesture-handler react-native-reanimated react-native-worklets
```

It's free and in no plan: an AI assistant installs it through MCP with no account, and its ZIP downloads with a free UpFork account.

Step by step, with the App.tsx that shows it and Skia's web setup: https://upfork.dev/docs/mobile.

## About

Goal Ring draws progress the way fitness and storage apps do: a gradient arc with a soft glow and a bright dot riding its end, with whatever you like in the middle.

- **Drawn with Skia.** A real GPU-drawn arc, glow and gradient, smooth at any size. The gradient runs there and back, so a full ring never shows a seam.
- **Three ways to drive it.** Pass a number and it animates there; pass a Reanimated shared value and it follows frame by frame; or make it interactive and let people drag round it (or tap on it) to set a goal, with a haptic tick each tenth.
- **Light and dark**, any two colors, any size and thickness.
- **Accessible.** A progress bar for screen readers, or an adjustable control when it's interactive.