callstack / callstack/react-native-paper

feat: modernize progress indicators

Open
#4,971 0 comments 0 reactions 1 assignee Claimed by @adrcotfas View on GitHub
v6
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
12

Description

- Modernize progress indicators according to the MD3 Specs and reuse existing MD theme foundation tokens (motion, shape etc) where appropriate.
- Extract component tokens to a separate file for easier maintenance

# Current State

Existing "Activity Indicator" and "Progress Bar" components correspond to MD3 Progress Indicators.

## Activity Indicator

**MD3 spec:** Progress indicators (Circular)
**Specs link:** https://m3.material.io/components/progress-indicators/specs

### Color tokens

- [ ] No track color. MD3 requires a track arc behind the indicator (token: `secondaryContainer`); only `primary` is rendered

### Spacing / sizing

- [ ] Stroke width is `size / 10` (2.4dp @ small, 4.8dp @ large). MD3 specifies a fixed 4dp stroke for both indicator and track

### Behavior

- [ ] Arc ends are square (border clipping technique). MD3 requires rounded stroke caps
- [ ] No track rendered. MD3 always shows the inactive track arc
- [ ] M3 Expressive wavy circular and linear indicators not implemented

### Notes

- Rename to match MD3: **`CircularProgressIndicator`** and move to a “Progress Indicators” directory together with Linear Progress Indicator.
- Entire rendering approach is MD2-era (two clipped half-border views). MD3-compliant implementation needs SVG or canvas-based arc for rounded caps and track

## Progress Bar

**MD3 spec:** Linear progress indicator
**Specs link:** https://m3.material.io/components/progress-indicators/specs

### Color tokens

- Active indicator: `color || theme.colors.primary` ✅
- [ ] Track: `theme.colors.surfaceVariant`; spec requires `secondaryContainer` ❌
- [ ] No stop indicator rendered; spec defines a stop indicator at 100% (color `primary`)

### Spacing / sizing

- Height: 4dp ✅
- [ ] Track has no `borderRadius`; spec `corner.full` requires `borderRadius: 2` for 4dp height
- [ ] Active indicator fill has no `borderRadius`; same issue as track
- [ ] No 4dp horizontal inset from screen edges; spec shows 4dp padding on each side
- [ ] Configurable thickness not supported (M3 Expressive)
- [ ] Wavy shape (amplitude 3dp, wavelength 40dp, height 10dp) not supported (M3 Expressive)

### Behavior

- Determinate mode: progress value animates via `scaleX` ✅
- Indeterminate mode: looping translate + scaleX animation ✅
- Visibility fade in/out ✅
- RTL support ✅
- [ ] Stop indicator not shown at the end of the track

### Notes

- Should be renamed `LinearProgressIndicator` and placed in a shared `ProgressIndicator/` directory alongside `ActivityIndicator` (circular), matching MD3 naming
- `ProgressBar` name and the `color` prop (which bypasses the token system) are library-level issues to address at rename time

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.