Possible to have smooth animation on progress bar?

Is there a way to make the animation between progress changes to be smoother? It’s very choppy. I’ve tried slowing down the interval of the animation, but it falls behind. I’m using a custom hook courtesy of Dan Abramov to make sure that the timer is counting down correctly. I’m counting down by 1 second (1000 milliseconds), So I’m not sure how this could be fixed or if it’s on my end.

useInterval.js

import { useEffect, useRef } from 'react';

export default (callback, delay) => {
  const savedCallback = useRef();

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      const id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
};

useInterval(() => {
  if (time > 0) setTime(prevState => prevState - 1);
  else endTime();
}, 1000);


<ProgressBar
  progress={time / timer} //time and timer is some number out of a total, i.e. 10/25
  width={RFPercentage(40)}
  height={RFPercentage(1)}
  borderRadius={20}
  useNativeDriver
  animationType='spring'
  color={theme.accent}
/>

[StanislavMayorov]

We noticed a huge js performance issue when we rerender Circle to animate progress. <Progress.Circle progress={dymanicNumber}/> So we had to replace it to animated react-native-svg with useNativeDriver.

[sentientmachin3]

No, I implemented my own. It was not difficult actually, using Animated.timing you should get what you need in a hour or so.