Circular progress in react-native

Question

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.

Fidan Hakaj · Accepted Answer · 2017-02-21 13:00:00Z

5

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>

answered Feb 21, 2017 at 13:00

Fidan Hakaj

7,1733 gold badges34 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Circular progress in react-native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related