title: What are the implications of using interpolation over multiple Animated.Values?
body: <p>I have multiple animations running in parallel and I wondered if there are any benefits to having 3 Animated.Values over having a single Animated.Value and using interpolation.</p>
  <p>Consider the following approach with multiple values:</p>
  <pre class="lang-js prettyprint-override"><code>const opacityValue = useRef(new Animated.Value(0)).current;
  const rotationValue = useRef(new Animated.Value(0)).current;
  const scaleValue = useRef(new Animated.Value(0)).current;
  
  useEffect(() =&gt; {
    Animated.parallel(
      Animated.timing(opacityValue, ...),
      Animated.timing(rotationValue, ...),
      Animated.timing(scaleValue, ...),
    ).start();
  }, []);
  
  const rotate = rotationValue.interpolate([]);
  </code></pre>
  <p>Consider this same approach with a single Animated.Value and interpolation included:</p>
  <pre class="lang-js prettyprint-override"><code>const opacityValue = useRef(new Animated.Value(0)).current;
  
  useEffect(() =&gt; {
    Animated.timing(opacityValue, ...).start();
  }, []);
  
  const rotationValue = opacityValue.interpolate([]);
  const scaleValue = opacityValue.interpolate([]);
  </code></pre>
  <p>With the latter approach, only one animation is running on the native thread so could one assume that it is more performant?</p>
  <p>What are the implications of using one over the other?</p>
  <p>And is there any documentation that objectively describes in which situations one is better than the other?</p>