CODEWITHSUNDEEP
react-native
john doe
john doe

Reputation: 816

Circular progress in react-native

I am trying to create circular progress component in react-native(as shown in image).

I have tried going through the art library of react-native.But it seems a bit complicated to me.Just the outline of how this can be done will help me a lot.

P.S.: Library such as this does not help since it's not flexible enough to display numbers in the centre.

enter image description here

Upvotes: 3

Views: 13863

Answers (1)

Fidan Hakaj
Fidan Hakaj

Reputation: 7163

react-native-circular-progress lets you pass a children(fill) function as a child. It allows you to render any children components within the circular progress one.

Here is an example:

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

Upvotes: 5

Related Questions