Skip to content

feat: modernize progress indicators to latest Material Design specs#4995

Open
adrcotfas wants to merge 4 commits into
mainfrom
@adrcotfas/progress_indicators
Open

feat: modernize progress indicators to latest Material Design specs#4995
adrcotfas wants to merge 4 commits into
mainfrom
@adrcotfas/progress_indicators

Conversation

@adrcotfas

@adrcotfas adrcotfas commented Jun 11, 2026

Copy link
Copy Markdown
Collaborator
Simulator.Screen.Recording.-.iPhone.16e.-.2026-06-11.at.16.59.00.mov

Motivation

Replace the legacy ProgressBar and ActivityIndicator with a token-driven
Material Design 3 progress indicator family. Four components cover the
linear and circular shapes, each in a standard and an expressive "wavy"
variant, with determinate and indeterminate modes.

  • Add LinearProgressIndicator and CircularProgressIndicator (standard)
    and LinearWavyProgressIndicator and CircularWavyProgressIndicator
    (expressive wave), built on react-native-svg with shared spec tokens.
  • progress accepts a number or a Reanimated SharedValue<number>, so a
    caller-animated value glides on the UI thread with no re-renders.
  • Indeterminate timing follows the MD3 motion spec (linear spin + breathing
    sweep for circular; two-segment travel for linear).
  • Wavy variants animate a traveling wave that flattens near 0% and 100%;
    amplitude, wavelength, and waveSpeed are configurable. Wave geometry
    is computed in worklets (wavePath.ts).
  • Migrate the internal loading spinner in Button, IconButton, and Searchbar
    to the standard indeterminate CircularProgressIndicator.
  • Add react-native-svg as a dependency (peer >= 15.0.0).
  • Rework the example screen

BREAKING CHANGE: The progress components were redesigned for MD3 with no deprecation aliases.

  • ProgressBar and ProgressBarProps are removed. Use
    LinearProgressIndicator (or LinearWavyProgressIndicator). The
    progress prop is the same 0..1 range; indeterminate replaces the old
    indeterminate behavior.
  • ActivityIndicator and ActivityIndicatorProps are removed. Use
    CircularProgressIndicator indeterminate.

Related issue

Test plan

  • Lint, typescript, existing and new tests pass
  • manual visual inspection on all platforms

@adrcotfas adrcotfas requested a review from satya164 June 11, 2026 14:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant