Animation progress bar to move at Anti-Clockwise direction

[vinayak2095]

I want to move my progressBar Anti-clockwise ,how can i do that using this library.

[spikeisryu]

Me too. For instance, + value -> clockwise, - value -> anti-clockwise. Any plan to support this feature?

[nricardo]

You can use style prop with transform, something like: style={{ transform: [{ scaleX: -1 }] }}

[vinayak2095]

@nricardo Thanks ,This worked.

[spikeisryu]

@nricardo I tried it as you suggested and the bar moves as I want, but the inner contents are affected, too.

Is there another way to solve this issue?

[nricardo]

That's because probably applied the transform to the parent view where your progress and text are children off. The fix is simple: isolate those two parts and position absolute the inner contents on top of the circular progress... Hope that solves it...

[ManigandanRaamanathan]

@nricardo add the stated transform style on both progress bar and its child content

[jedashford]

You can use style prop with transform, something like: style={{ transform: [{ scaleX: -1 }] }}

PLEASE. Someone put this in the documentation!

[markusl]

@jedashford could you perhaps make a pull request of your improvement idea? :)

[Jongkeun]

This is a hacky way though.

<AnimatedCircularProgress
  ...propsYouWant
  style={{ transform: [{ scaleX: -1 }] }}>
  {() => (
    <View style={{ transform: [{ scaleX: -1 }] }}>
      <Text>This is reversed content!</Text>
    </View>
  )}
</AnimatedCircularProgress>

---

Oh I missed @ManigandanRaamanathan's comment