search

MrToph / react-native-progress-circle

A light-weight progress circle indicator for React Native.
MIT License
191 stars 83 forks source link

Dynamic percentage? #39

Open pepemiso16 opened 4 years ago

pepemiso16 commented 4 years ago

Is there any way on how to make the percentage dynamic, let's say we are fetching data from the API and we are going to show this progress circle?

CantFayle commented 4 years ago

Yes this is possible. Simply pass a variable into the percent prop.

<ProgressCircle
  percent={value}  // | {this.state.value} | {(value / total) * 100}
  radius={50}
  borderWidth={8}
  color='#FFFFFF'
  shadowColor='#323838'
  bgColor='#000000'
>
  <Text>
    {value}
  </Text>
</ProgressCircle>

You may be able to use the Animated API, or a Timeout or Interval if you want it to run on a timer.