title: React Native animation useEffect hook with dependencies array creates infinite loop
body: <p>I am trying to figure out how to make eslint with the rule <code>react-hooks/exhaustive-deps</code> happy and also use the build in <code>Animated</code> library in react native to make animations with useEffect.</p>
  
  <p>The following code should highlight the button when clicked, by overlaying it with a colored view.</p>
  
  <pre class="lang-js prettyprint-override"><code>const Component = props =&gt; {
    const [active, setActive] = useState(false);
    const [opacity, setOpacity] = useState(new Animated.Value(0));
  
    useEffect(() =&gt; {
      if (active) {
        Animated.timing(opacity, {
          toValue: 1,
          duration: 200,
          useNativeDriver: true
        }).start();
      } else {
        setOpacity(new Animated.Value(0))
      }
    }, [active, opacity]); // &lt;- Works fine without `opacity`, but eslint wants this
  
    return (
      &lt;View&gt;
        &lt;Animated.View style={{backgroundColor: "blue", opacity}} /&gt;
        &lt;TouchableOpacity onPress={()=&gt; setActive(!active)} /&gt;  
      &lt;/View&gt;
    )
  };
  </code></pre>
  
  <p>Is there any way of doing this (with useCallback, useMemo, etc.) without disabling the rule?</p>