gitmyhub

react-native-progress

JavaScript ★ 3.7k updated 2y ago

Progress indicators and spinners for React Native

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.