title: React Native (Animations and setState)
body: <p>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
  <code>const opacity = new Animated.Value(0) const animatedValueRef = useRef(opacity)</code>, the animations is looping like this (each 250millis)</p>
  <pre><code>        Animated.timing(animatedValueRef.current, {
              toValue: 1,
              duration: 220,
              easing: Easing.ease,
              useNativeDriver: true,
          }).start((event) =&gt; {
             if(event.finished) {
                 opacity.setValue(0);
                 second();
             }
          });
      }
  </code></pre>
  <p>Thank you!</p>
  <p>Edit: this is how I implemented the countdown:</p>
  <pre><code>    function step1(max, onoff) {
  
          let intervalId;
          let varCounter = 1;
          setAnimation(true); //animation starts
          irrigation(); //animation call
          let counter = function () {
              if (varCounter &lt; max) {
                  varCounter= varCounter + 1;
                  setCounter(varCounter + &quot;  &quot; + onoff)
              } else {
                  clearInterval(intervalId);
                  setCounter(&quot; &quot;);
                  setAnimation(false);
              }
          };
          intervalId = setInterval(()=&gt;{counter()}, 1000);
      }
  </code></pre>
  <p>(The code needs to be refactored)</p>