whatisgithub

What is react-native-progress?

oblador/react-native-progress — explained in plain English

Analysis updated 2026-07-03

3,667JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

In one sentence

A React Native library that adds animated progress bars, circles, pie charts, and loading spinners to iOS and Android mobile apps with a simple drop-in API.

Mindmap

mindmap
  root((react-native-progress))
    Components
      Bar
      Circle
      Pie
      CircleSnail
    Shared Options
      Color
      Animation
      Indeterminate mode
      Border style
    Setup
      npm install
      React Native SVG
    Use Cases
      File downloads
      Loading states
      Task completion
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Add a filling progress bar to show download or upload progress in a React Native app.

USE CASE 2

Show a spinning loading circle while waiting for data to load from an API.

USE CASE 3

Display a pie-style indicator filling up to represent task completion percentage.

USE CASE 4

Use an animated arc spinner for long-running tasks where completion time is unknown.

What is it built with?

JavaScriptReact NativeSVG

How does it compare?

oblador/react-native-progressgetgauge/taikothreepointone/glamor
Stars3,6673,6683,669
LanguageJavaScriptJavaScriptJavaScript
Setup difficultyeasyeasyeasy
Complexity2/52/52/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 30min

Circle and Pie components require installing react-native-svg as an additional dependency.

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

So what is it?

This is a JavaScript library that adds progress indicators and loading spinners to React Native apps. React Native is a framework developers use to build mobile apps for iOS and Android using JavaScript. Progress indicators are the visual elements that show how far along a task is: the horizontal bar that fills up during a file download, or the spinning circle that appears while a page loads. The library provides four types of components. The Bar is a horizontal filling bar. The Circle is a ring that fills around its edge as progress increases. The Pie fills in like a pie chart from empty to full. The CircleSnail is an animated spinning arc used for loading states where you do not know how long something will take. All four components share a set of common options: you can set the color of the filled portion and the unfilled portion, control whether changes animate smoothly, choose a border style, and switch any of them into an "indeterminate" spinning mode for when progress cannot be measured. Each component also has its own additional options, such as setting the thickness of a ring, showing a percentage number inside a circle, or changing the animation style for a bar. Installation is done through npm, the standard JavaScript package manager. The circle-shaped components require a separate library called React Native SVG to be installed alongside this one, since they are drawn using SVG graphics. The bar component works without that extra dependency. The library is released under the MIT license and is maintained by Joel Arvidsson.

Copy-paste prompts

Prompt 1
Add a circular progress indicator to my React Native screen that fills from 0 to 1 as a file downloads, using the react-native-progress Circle component.
Prompt 2
Show me how to use the react-native-progress Bar component to display upload progress with a custom color and smooth animation.
Prompt 3
I want a spinning loading indicator in my React Native app for when data is loading. How do I use the CircleSnail component from react-native-progress?
Prompt 4
How do I install react-native-progress and react-native-svg, then display a Pie progress indicator that shows a percentage label inside?

Frequently asked questions

What is react-native-progress?

A React Native library that adds animated progress bars, circles, pie charts, and loading spinners to iOS and Android mobile apps with a simple drop-in API.

What language is react-native-progress written in?

Mainly JavaScript. The stack also includes JavaScript, React Native, SVG.

What license does react-native-progress use?

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

How hard is react-native-progress to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is react-native-progress for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.