React Native (Animations and setState)

Question

I am facing a particular issue related to react native animations with setState (functional component), I have a countdown made with setInterval and each second I make a setState, whenever I have a setState the animation resets and restarts and I don't know why, I am using also useRef like this const opacity = new Animated.Value(0) const animatedValueRef = useRef(opacity), the animations is looping like this (each 250millis)

        Animated.timing(animatedValueRef.current, {
            toValue: 1,
            duration: 220,
            easing: Easing.ease,
            useNativeDriver: true,
        }).start((event) => {
           if(event.finished) {
               opacity.setValue(0);
               second();
           }
        });
    }

Thank you!

Edit: this is how I implemented the countdown:

    function step1(max, onoff) {

        let intervalId;
        let varCounter = 1;
        setAnimation(true); //animation starts
        irrigation(); //animation call
        let counter = function () {
            if (varCounter < max) {
                varCounter= varCounter + 1;
                setCounter(varCounter + "  " + onoff)
            } else {
                clearInterval(intervalId);
                setCounter(" ");
                setAnimation(false);
            }
        };
        intervalId = setInterval(()=>{counter()}, 1000);
    }

(The code needs to be refactored)

I am trying to make a countdown from 10 to 1 seconds, and during this time I am animating to entertain (in few words I am toogling a component from visible to invisible(loop)) — HichemProgramming, Feb 15 '21 at 15:28
so you want the words to go from invisible > visible > invisible > visible and just keeps looping for 10 seconds? — Wen W, Feb 15 '21 at 15:41
obviously the animation is more complex than what it should be, but in few words yes the skeleton of the animations is this... — HichemProgramming, Feb 15 '21 at 16:09

score 2 · Answer 1 · answered Feb 15 '21 at 15:19

2

Basically your component is re- render every time your component’s state changes. The component gets the updated state and React decides if it should re-render the component. By default React re-renders everything all the time.

answered Feb 15 '21 at 15:19

yairmea

260
2
9

Yes exactly but what should I do for avoid this issue? Thank you so much for answering – HichemProgramming Feb 15 '21 at 15:24
If component doesn't need to rerender when it changes, don't put it in state. You can declare them with `let` in your component and use that – yairmea Feb 15 '21 at 15:44
I need to render the countdown unfortunately..so I cannot remove the setState, I can edit the question to show you how I implemented the counddown – HichemProgramming Feb 15 '21 at 16:07
Yeah that can be great – yairmea Feb 15 '21 at 16:10
I put the code, thank you so much for your patience – HichemProgramming Feb 15 '21 at 16:23

score 0 · Answer 2 · answered Feb 15 '21 at 16:32

all you have to do is chain your animation. Your animated value will go from 0 to 1, then the second animation will make the value from 1 to 0. You just need to start the animation again after 1 second in your counter function. I suggest making the useNativeDriver: false. No need to setState at all.

    Animated.timing(animatedValueRef.current, {
        toValue: 1,
        duration: 220,
        easing: Easing.ease,
        useNativeDriver: true,
    }).start(() => {
        Animated.timing(animatedValueRef.current, {
          toValue: 0,
          duration: 220,
          easing: Easing.ease,
          useNativeDriver: true,
        }).start(())
    });
}

Hi thanks for the answer, I know that this code might work as well but the setState is used for something else and I have to use it, I tried this but the problem is not going..the problem is the reset of the animations when I have a set state — HichemProgramming, Feb 16 '21 at 07:21

React Native (Animations and setState)

2 Answers2