{"repo":"bartgryszko/react-native-circular-progress","free":true,"listed":false,"github":"https://github.com/bartgryszko/react-native-circular-progress","clone":"git clone https://github.com/bartgryszko/react-native-circular-progress.git","description":"React Native component for creating animated, circular progress with ReactART","language":"JavaScript","stars":2251,"topics":["react-native","fill","circle","animation","progress"],"license":"MIT","category":"mobile-apps","readme_excerpt":"react-native-circular-progress React Native component for creating animated, circular progress. Useful for displaying users points for example. Example app 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 You can also define a function that'll receive current progress and for example display it inside the circle: You can also define a function that'll receive the location at the top of the progress circle and render a custom SVG element: 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: 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 and height of circle 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 tintColorSecondary string black Secondary color of the progress line tintTransparency boolean true Transparency of the progress line backgroundColor string If u","default_branch":null,"files":null,"tree":[],"storefront":"/r/bartgryszko","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/bartgryszko/react-native-circular-progress/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}