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 }}
/>
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"}
/>