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
– HichemProgramming, Commented Feb 15, 2021 at 15:28
so you want the words to go from invisible > visible > invisible > visible and just keeps looping for 10 seconds? — Wen W
– Wen W, Commented Feb 15, 2021 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
– HichemProgramming, Commented Feb 15, 2021 at 16:09

yairmea · Accepted Answer · 2021-02-15 15:19:48Z

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, 2021 at 15:19

yairmea

2602 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

HichemProgramming Over a year ago

Yes exactly but what should I do for avoid this issue? Thank you so much for answering

yairmea Over a year ago

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

HichemProgramming Over a year ago

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

yairmea Over a year ago

Yeah that can be great

HichemProgramming Over a year ago

I put the code, thank you so much for your patience

Wen W · Accepted Answer · 2021-02-15 16:32:44Z

0

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(())
    });
}

answered Feb 15, 2021 at 16:32

Wen W

2,6371 gold badge12 silver badges16 bronze badges

1 Comment

HichemProgramming Over a year ago

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

Collectives™ on Stack Overflow

React Native (Animations and setState)

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related