How to make `rn-animated-progress-circle` loop endlessly

user_17260438 0
Viewed 122

I'm fairly new to react native. I was looking for a continuous circular loader and I found this amazing one on NPM rn-animated-progress-circle, it works perfectly for me but it does not animate continuously.

Do you know any other one that animates continuously? or do you know any way to make this one animate continuously.

<ProgressCircle
  value={0.4}
  size={200}
  thickness={0.87}
  color='#FFFFFF'
  unfilledColor='#000000'
  animationMethod='spring'
  shouldAnimateFirstValue={true}
  animationConfig={{ speed: 4 }}
/>
expo react-native reactjs javascript
1 Answers

hey there you can use this logic to iterate circle in infinity or u can put this for a second

import * as Progress from "react-native-progress";

const useProgress = (maxTimeInSeconds = 30) => {
    const [initialTime] = useState(() => +new Date());
    const [counter, setCounter] = useState(0);
    useEffect(() => {
        const intervalId = setInterval(() => {
            setCounter((t) => t + 1);
        }, 1000);
        return () => clearInterval(intervalId);
    }, []);

    const elapsedTime = Math.floor(((+new Date()) - initialTime) / 1000);
    if (elapsedTime == 30) {
        return maxTimeInSeconds;
    }
    
    return (elapsedTime % maxTimeInSeconds) / maxTimeInSeconds;
};

const progress = useProgress();

in progresscircle add progress={progress}

<Progress.Circle
  style={{ alignItems: "center" }}
  progress={progress}
   // indeterminate={this.state.indeterminate}
   size={Dimensions.get("window").width * 0.561}
   thickness={10}
   borderWidth={0}
   endAngle={10}
   strokeCap="round"
   color={"#354659"}
    // indeterminateAnimationDuration={1}
   unfilledColor={"#031830"}        

/>
user_140275870
Related