How to animate it?

[syampolskiy]

can not find in documentation how to animate progress circle filling

[MrToph]

Hi, this is a non-animated component. If you're looking for something like a timer I also have this component.

If you want this component to have a fill animation, it's currently not possible 😬
But you can have a look at the other animated component and try it yourself

[g33ktony]

@syampolskiy you can use Animated with a listener to update a state with the value while changing.

const progress = React.useRef(new Animated.Value(0))
const [animatedProgress, setAnimatedProgress] = React.useState(0)

Animated.timing(progress.current, {
        toValue: props.percentage,
        delay: 500,
        duration: 750,
        easing: Easing.inOut(Easing.quad),
        useNativeDriver: true
      }).start()

progress.current.addListener(animated =>setAnimatedProgress(animated.value))