CODEWITHSUNDEEP
javascriptreactjstypescriptreact-native
Paul Bernard
Paul Bernard

Reputation: 3

How do i loop animated-circular-progress component

I'm using the react-native-circular-progress component and I'm trying to loop an animation every 30 seconds.

i.e the animation is 30 seconds long and i want it to restart as soon as its done

The component exposes a function named reAnimate which I have put in a setInterval function as soon as the component mounts.

import React from 'react';
import { StyleSheet, Text, View,Dimensions, Easing } from 'react-native';
import { AnimatedCircularProgress } from 'react-native-circular-progress';

const MAX_POINTS = 30;
export default class App extends React.Component {
    state = {
        isMoving: false,
        pointsDelta: 0,
        points: 1,
    };

    componentDidMount(){

        setInterval(
            () => this.circularProgress.reAnimate(0,100, 30000,Easing.linear),
            30000
        );
    }

    render() {
        const { width } = Dimensions.get("window");
        const window = width - 120;
        const fill = (this.state.points / MAX_POINTS) * 100;
        return (
            <View style={styles.container} >

            <AnimatedCircularProgress
                size={window}
                width={7}
                backgroundWidth={5}
                fill={0}
                tintColor="#ef9837"
                backgroundColor="#3d5875"
                ref={(ref) => this.circularProgress = ref}
                arcSweepAngle={240}
                rotation={240}
                lineCap="round"
            >
                {fill => <Text style={styles.points}>{Math.round((MAX_POINTS * fill) / 100)}</Text>}

            </AnimatedCircularProgress>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    points: {
        textAlign: 'center',
        color: '#ef9837',
        fontSize: 50,
        fontWeight: '100',
    },
    container: {
        flex: 1,
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: '#0d131d',
        padding: 50,
    },
    pointsDelta: {
        color: '#4c6479',
        fontSize: 50,
        fontWeight: '100',
    },
    pointsDeltaActive: {
        color: '#fff',
    },
});

This is working... BUT... the animation only starts 30s after the component mounts. How do i get it to loop immediately?

Any help will be greatly appreciated.

Thank you.

Upvotes: 0

Views: 1890

Answers (1)

fayeed
fayeed

Reputation: 2485

The reason is setInterval will not fire immediately it will start after the duration you passed i.e 30 mins, So all you have to do is make a call initially before setting the interval, also don't forget to clear the interval.

Here's how I would it:

componentDidMount(){
  this.circularProgress.animate(100, 30000,Easing.linear);

  this.intervalId = setInterval(
    () => this.circularProgress.reAnimate(0,100, 30000,Easing.linear),
    30000
  );
}

componentWillUnmount() {
  clearInterval(this.intervalId);
}

Upvotes: 1

Related Questions