callstack / callstack/react-native-paper

How to create Material 3: Determinate Circular Progress Indicator

Open
#4,209 4 comments 1 reaction 0 assignees View on GitHub
feature request Status: Approved
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
12

Description

### Ask your Question
I am looking to implement the determinate circular progress indicator as described [here](https://m3.material.io/components/progress-indicators/specs#16fa008b-87cd-4398-b026-b28bc2d14ad9). That way I can show the download progress between 0 and 100% as it slowly increases.

It seems that React Native Paper has:
- [An indeterminate circular progress indicator](https://callstack.github.io/react-native-paper/docs/components/ActivityIndicator)
- [A linear progress indicator](https://callstack.github.io/react-native-paper/docs/components/ProgressBar)

But not the specific thing I want, but maybe I'm missing something? Does it exist in react native paper, and if not, what are alternatives which work well? I saw [this](https://www.npmjs.com/package/react-native-circular-progress-indicator) library already. Or is this on the roadmap to be added to react native paper?

Contributor guide

Open the contributing guide

Research direction

Review the linked Material 3 progress-indicator specification and the React Native Paper ActivityIndicator and ProgressBar documentation first. Done means establishing whether a determinate circular variant is supported and, if not, reaching a clear decision about its scope or an appropriate alternative.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
frontend, mobile
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.