React Native Component for Creating animated, Circular Progress with ReactART

React Native Component for Creating animated, Circular Progress with ReactART

React Native component for creating animated, circular progress. Useful for displaying users points for example.

react-native-circular-progress

React Native component for creating animated, circular progress. Useful for displaying users points for example.

Example app

image

Installation

  1. Install this component and react-native-svg:

    npm i --save react-native-circular-progress react-native-svg

  2. Link native code for SVG:

    react-native link react-native-svg

Usage

import { AnimatedCircularProgress } from 'react-native-circular-progress';

<AnimatedCircularProgress
  size={120}
  width={15}
  fill={100}
  tintColor="#00e0ff"
  onAnimationComplete={() => console.log('onAnimationComplete')}
  backgroundColor="#3d5875" />

You can also define a function that'll receive current progress and for example display it inside the circle:

<AnimatedCircularProgress
  size={200}
  width={3}
  fill={this.state.fill}
  tintColor="#00e0ff"
  backgroundColor="#3d5875">
  {
    (fill) => (
      <Text>
        { this.state.fill }
      </Text>
    )
  }
</AnimatedCircularProgress>

You can also define a function that'll receive the location at the top of the progress circle and render a custom SVG element:

<AnimatedCircularProgress
  size={120}
  width={15}
  fill={100}
  tintColor="#00e0ff"
  backgroundColor="#3d5875"
  padding={10}
  renderCap={({ center }) => <Circle cx={center.x} cy={center.y} r="10" fill="blue" />}
  />

Finally, you can manually trigger a duration-based timing animation by putting a ref on the component and calling the animate(toValue, duration, easing) function like so:

<AnimatedCircularProgress
  ref={(ref) => this.circularProgress = ref}
  ...
/>
this.circularProgress.animate(100, 8000, Easing.quad); // Will fill the progress bar linearly in 8 seconds

The animate-function returns the timing animation so you can chain, run in parallel etc.

Configuration

You can configure the CircularProgress-component by passing the following props:

Name Type Default value Description
size number Animated.Value required
width number required Thickness of the progress line
backgroundWidth number width Thickness of background circle
fill number (0-100) 0 Current progress / fill
tintColor string black Color of the progress line
tintTransparency boolean true Transparency of the progress line
backgroundColor string If unspecified, no background line will be rendered
rotation number (-360 - 360) 90 Angle from which the progress starts from
lineCap string butt Shape used at ends of progress line. Possible values: butt, round, square
arcSweepAngle number (0-360) 360 If you don't want a full circle, specify the arc angle
style ViewPropTypes.style Extra styling for the main container
children function Pass a function as a child. It received the current fill-value as an argument
childrenContainerStyle ViewPropTypes.style Extra styling for the children container
padding number 0 Padding applied around the circle to allow for a cap that bleeds outside its boundary
dashedBackground object { width: 0, gap: 0 } Bar background as dashed type
dashedTint object { width: 0, gap: 0 } Bar tint as dashed type
renderCap function undefined Function that's invoked during rendering to draw at the tip of the progress circle

The following props can further be used on AnimatedCircularProgress:

Name Type Default value Description
prefill number (0-100) 0 Initial fill-value before animation starts
duration number 500 Duration of animation in ms
easing function Easing.out(Easing.ease) Animation easing function
onAnimationComplete function Function that's invoked when the animation completes (both on mount and if called with .animate())
onFillChange function Function that returns current progress on every change
tintColorSecondary string the same as tintColor To change fill color from tintColor to tintColorSecondary as animation progresses

AnimatedCircularProgress also exposes the following functions:

Name Arguments Description
animate (toVal: number, duration: number, ease: function) Animate the progress bar to a specific value
reAnimate (prefill: number, toVal: number, duration: number, ease: function) Re-run animation with a specified prefill-value

Running example app (Expo)

git clone https://github.com/bgryszko/react-native-circular-progress.git
cd react-native-circular-progress/example-app
yarn
yarn start

Authors

  • Bartosz Gryszko ([email protected])
  • Markus Lindqvist
  • Jacob Lauritzen
  • Special thanks to all contributors!

License

MIT

Special thanks

Special thanks to Chalk+Chisel for creating working environment where people grow. This component was created for one of the projects we're working on.

Download Details:

Author: bartgryszko

Source Code: https://github.com/bartgryszko/react-native-circular-progress

react-native react mobile-apps

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React Native App Developers India, React Native App Development Company

Hire React Native app developers India from a preferred React Native app development company by innovative industry leaders. Let's Discuss Your Project.

React Native Mobile App Development

Skenix is providing React Native Development Services with qualified React Native App Developers. Get the best React Native App Development Services.

How React Native Is Shaping Mobile App Development

Are you a mobile app developer looking for more efficient tools for your projects? Mobile app development is getting tougher and tougher as the market continues to grow. As a developer, you need to develop Apps which meet the demands of your users. To achieve this, adopt the right tools, like the React Native development framework.

Top React Native Mobile App Development Companies in USA

Looking for top React Native mobile app development company in USA for Startups & Enterprise? Find out the top list of React Native mobile app development company in USA.