search

bartgryszko / react-native-circular-progress

React Native component for creating animated, circular progress with ReactART
MIT License
2.13k stars 424 forks source link

Customize the maximum value of full circle #284

Closed WrathChaos closed 2 years ago

WrathChaos commented 3 years ago

I added a new prop for maximum value which was 100 and its default is 100 now. I need to set a totally different maximum value logic and this prop simply solves it.

It makes the library more customizable now.

Thank you for the library tho! It is awesome! @bartgryszko

Here is the basic example of the maximumValue prop. In this example the maximumValue is 8 and fill is 2 so the circle is working with the maximum value now.

CleanShot 2021-07-28 at 1 10 53@2x
akhatriST commented 3 years ago

When will this be merged? Looks like a good feature @bartgryszko

WrathChaos commented 2 years ago

You can reach this feature with this one:

"react-native-circular-progress": "github:WrathChaos/react-native-circular-progress",

I think he did not maintain the library anymore. Maybe I can fork it and maintain it. Let's see.

akhatriST commented 2 years ago

Sure thanks 👍

SpeedOfSpin commented 2 years ago

In case someone needs this feature with the current version we can just percentages. So below will fill the bar to 250 out of a max of 500.

const maxvalue = 500;
<AnimatedCircularProgress
          size={200}
          width={3}
          backgroundWidth={30}
          fill={(250 / maxvalue) * 100}
          tintColor="#00e0ff"
          backgroundColor="#3d5875"
        >
          {fill => <Text style={styles.points}>{Math.round((maxvalue* fill) / 100)}</Text>}
        </AnimatedCircularProgress>