Skip to content
Native Animation
Donut Spend Breakdown animation preview

This preview uses fictional demo content. See the props below for the customization options available in this component.

npx nativeanimation add donut-spend-breakdown
ChartSkia

Donut Spend Breakdown

A spending donut with animated period changes and category selection, with configurable categories, copy, fonts, and accent color.

$9 for this animation

Add to your project

Copy the component and its assets into your app with the Native Animation CLI, or paste the agent prompt into Claude Code, Codex or Cursor once the MCP server is connected.

About this animation

A spending donut with animated period changes and category selection, with configurable categories, copy, fonts, and accent color.

Why this one

Round caps are included in the chart's geometry rather than painted across a tiny gap. Each segment keeps a seven-point separation, including when the selected stroke thickens. A restrained sage, sand, and slate palette sits on a deep green surface.

How it works

  1. A shared entrance progress sweeps through rounded Skia paths and reveals the legend.
  2. Period amounts interpolate on the UI thread; boundaries reserve cap and gap space before distributing the remaining circumference by category share.
  3. Selection increases stroke width and adds a blurred glow within the arc material, while other categories recede. The arcs stay on the same ring.
  4. Chart taps use the same boundaries as the rendered paths. Tap the center or the selected legend row to restore the total.
  5. The center amount is one formatted, tabular text run, with natural comma spacing and no negative tracking. UI-thread animated props keep amounts and percentages in sync with the geometry.
  6. The dashboard uses normal layout and scrolling, with a capped content width for tablets and small embedded containers. Reduced Motion removes sweeps, scaling, and spring interpolation.

Icons: Lucide (ISC).

Install

npx expo install expo-linear-gradient @shopify/react-native-skia react-native-gesture-handler react-native-reanimated react-native-worklets

Usage

import { DonutSpendBreakdown } from './DonutSpendBreakdown';

<DonutSpendBreakdown />;

<DonutSpendBreakdown
  brandName="Aster"
  title="Spending"
  dateLabel="October"
  comparisonLabel="−8% vs September"
  initialPeriod="month"
  onSelectionChange={(category) => saveFocus(category?.id)}
  onPeriodChange={(period) => savePeriod(period)}
/>

The forwarded ref exposes replay(), selectCategory(index | null), and setPeriod(period).

Props

PropTypeDefaultDescription
categoriesSpendCategory[]undefinedSpending categories. The first five are displayed.
initialPeriodSpendPeriod'month'Initially selected reporting period.
brandNamestring'Finance'Product name shown in the header.
titlestring'Spending'Screen heading.
dateLabelstring'October'Month label shown beside the heading.
comparisonLabelstring'−8% vs September'Comparison copy under the total.
fontFamilystringundefinedMain interface typeface.
mediumFontFamilystringundefinedMedium interface typeface.
monoFontFamilystringundefinedMonospaced typeface for amounts.
onSelectionChange(category: SpendCategory | null) => voidundefinedCalled after a category selection changes.
onPeriodChange(period: SpendPeriod) => voidundefinedCalled after the reporting period changes.
accessibilityLabelstring'Spending breakdown'Screen-reader label for the chart.
styleStyleProp<ViewStyle>undefinedOptional outer-container styling.
testIDstringundefinedTest identifier applied to the outer container.
accentColorstring'#B6D9C7'Accent used by the summary gradient.
durationnumber1050Entrance sweep duration in milliseconds.

Compatibility

Built for Expo SDK 58, React Native 0.88, Reanimated 4.7, React Native Worklets 0.13, and React Native Skia 2.14. Supports iOS, Android, and web. Works in Expo Go because all native dependencies are included in the SDK client.

Accessibility

The period tabs and every category row expose labeled button states and minimum 48-point targets. The donut exposes its current summary as an adjustable chart, while the rows provide a direct touch alternative to angular chart selection. Reduced Motion removes the drawing sweep, spring interpolation, scaling, and travel, replacing them with short fades and immediate geometry updates.

Layout

This is a dark dashboard surface. The host screen supplies safe-area insets. Content scrolls in short or landscape containers; the chart is capped at 300 points and the content at 440 points. The amount uses the provided monospaced font (Geist Mono in the demo), with tabular numerals and normal spacing. Very large custom amounts may require a smaller font.

More animations