React Native component for creating animated, circular progress with ReactART. Useful for displaying users points for example. Works on iOS & Android.
Looking for a circular slider? Take a look at my other component – react-native-circular-slider
npm i --save react-native-circular-progress
node_modules/react-native/Libraries/ART/ART.xcodeproj
Import CircularProgress or AnimatedCircularProgress.
import { AnimatedCircularProgress } from 'react-native-circular-progress';
Use as follows:
<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 style={styles.points}>
{ this.state.fill }
</Text>
)
}
</AnimatedCircularProgress>
Finally, you can manually trigger a duration-based timing animation by putting a ref on the component and calling the performLinearAnimation(toValue, duration)
function like so:
<AnimatedCircularProgress
ref='circularProgress'
...
/>
this.refs.circularProgress.performLinearAnimation(100, 8000); // Will fill the progress bar linearly in 8 seconds
You can configure the passing by following props:
array|number
, current, percentage fill (from 0 to 100)array|number
, color of a progress line,git clone https://github.com/bgryszko/react-native-circular-progress.git
cd react-native-circular-progress/example
yarn
yarn start
Bartosz Gryszko (b@gryszko.com
For new components and updates follow me on twitter.
MIT
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.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。