react-native-progress

What is react-native-progress?

The react-native-progress package provides a set of customizable progress indicators for React Native applications. It includes various types of progress bars and spinners that can be used to indicate loading states or progress in your app.

What are react-native-progress's main functionalities?

Circular Progress

This feature allows you to create a circular progress indicator. The `Circle` component can be customized with size, progress, and text display options.

import React from 'react';
import { View } from 'react-native';
import { Circle } from 'react-native-progress';

const CircularProgressExample = () => (
  <View>
    <Circle size={100} progress={0.7} showsText={true} />
  </View>
);

export default CircularProgressExample;

Bar Progress

This feature allows you to create a horizontal bar progress indicator. The `Bar` component can be customized with progress and width options.

import React from 'react';
import { View } from 'react-native';
import { Bar } from 'react-native-progress';

const BarProgressExample = () => (
  <View>
    <Bar progress={0.5} width={200} />
  </View>
);

export default BarProgressExample;

Pie Progress

This feature allows you to create a pie chart-like progress indicator. The `Pie` component can be customized with size and progress options.

import React from 'react';
import { View } from 'react-native';
import { Pie } from 'react-native-progress';

const PieProgressExample = () => (
  <View>
    <Pie progress={0.3} size={100} />
  </View>
);

export default PieProgressExample;

Spinner

This feature allows you to create a spinner indicator. The `CircleSnail` component can be customized with different colors.

import React from 'react';
import { View } from 'react-native';
import { CircleSnail } from 'react-native-progress';

const SpinnerExample = () => (
  <View>
    <CircleSnail color={['red', 'green', 'blue']} />
  </View>
);

export default SpinnerExample;

Other packages similar to react-native-progress

react-native-loading-spinner-overlay

This package provides a customizable loading spinner overlay for React Native applications. It is similar to the spinner feature in react-native-progress but focuses solely on providing a full-screen loading indicator.

react-native-svg-charts

This package offers a variety of chart components, including progress charts, for React Native applications. It provides more advanced charting capabilities compared to react-native-progress, which focuses on simpler progress indicators.

react-native-indicator

This package provides a collection of animated indicators for React Native. It offers more variety in terms of animation styles compared to react-native-progress, which focuses on static progress indicators.

README

react-native-progress

Progress indicators and spinners for React Native using React Native SVG.

Installation

$ npm install react-native-progress --save

React Native SVG based components

To use the Pie or Circle components, you need to install React Native SVG in your project.

Usage

Note: If you don't want the React Native SVG based components and it's dependencies, do a deep require instead: import ProgressBar from 'react-native-progress/Bar';.

import * as Progress from 'react-native-progress';

<Progress.Bar progress={0.3} width={200} />
<Progress.Pie progress={0.4} size={50} />
<Progress.Circle size={30} indeterminate={true} />
<Progress.CircleSnail color={['red', 'green', 'blue']} />

Properties for all progress components

Prop	Description	Default
animated	Whether or not to animate changes to progress.	true
indeterminate	If set to true, the indicator will spin and progress prop will be ignored.	false
indeterminateAnimationDuration	Sets animation duration in milliseconds when indeterminate is set.	1000
progress	Progress of whatever the indicator is indicating. A number between 0 and 1.	0
color	Fill color of the indicator.	rgba(0, 122, 255, 1)
unfilledColor	Color of the remaining progress.	None
borderWidth	Width of outer border, set to 0 to remove.	1
borderColor	Color of outer border.	color

Progress.Bar

All of the props under Properties in addition to the following:

Prop	Description	Default
width	Full width of the progress bar, set to null to use automatic flexbox sizing.	150
height	Height of the progress bar.	6
borderRadius	Rounding of corners, set to 0 to disable.	4
useNativeDriver	Use native driver for the animations.	false
animationConfig	Config that is passed into the Animated function.	{ bounciness: 0 }
animationType	Animation type to animate the progress, one of: decay, timing, spring.	spring

Progress.Circle

All of the props under Properties in addition to the following:

Prop	Description	Default
size	Diameter of the circle.	40
endAngle	Determines the endAngle of the circle. A number between 0 and 1. The final endAngle would be the number multiplied by 2π	0.9
thickness	Thickness of the inner circle.	3
showsText	Whether or not to show a text representation of current progress.	false
formatText(progress)	A function returning a string to be displayed for the textual representation.	See source
textStyle	Styles for progress text, defaults to a same color as circle and fontSize proportional to size prop.	None
allowFontScaling	Whether or not to respect device font scale setting.	true
direction	Direction of the circle clockwise or counter-clockwise.	clockwise
strokeCap	Stroke Cap style for the circle butt, square or round.	butt
fill	Fill color of the inner circle.	None (transparent)

Progress.Pie

All of the props under Properties in addition to the following:

Prop	Description	Default
size	Diameter of the pie.	40

Progress.CircleSnail

Prop	Description	Default
animating	If the circle should animate.	true
hidesWhenStopped	If the circle should be removed when not animating.	false
size	Diameter of the circle.	40
color	Color of the circle, use an array of colors for rainbow effect.	rgba(0, 122, 255, 1)
thickness	Thickness of the circle.	3
duration	Duration of animation.	1000
spinDuration	Duration of spin (orbit) animation.	5000
strokeCap	Stroke Cap style for the circle butt, square or round.	round

Examples

• Example project bundled with this module
• react-native-image-progress

Changelog

Thanks

To Mandarin Drummond for giving me the NPM name.

License

MIT License. © Joel Arvidsson 2015-