title: React Native/reanimated pattern for dependent animations
body: <p>Question is about patterns for organizing multicomponent animations that depend on each other. Here is an example.</p>
  <p>Consider this inner component:</p>
  <pre><code>export default function InnerComponent({ startAnimation }: {startAnimation: boolean}) {
      const xVal = useSharedValue(0);
  
      const animation = useAnimatedStyle(() =&gt; {
          return {
              translateX: xVal.value,
          };
      }, []);
  
      useEffect(() =&gt; {
          if (startAnimation) {
              xVal.value = withTiming(50, { duration: 500 });
          }
      }, [startAnimation, xVal]);
  
      return &lt;Animated.View style={animation}&gt;
          &lt;Text&gt; Inner Hello world &lt;/Text&gt;
      &lt;/Animated.View&gt;;
  }
  </code></pre>
  <p>These guys start an animation which takes 500ms. The animation is scoped inside the component.</p>
  <p>So for example, if we use this component like the following:</p>
  <pre><code>export default function () {
  
      const outerVal = useSharedValue(0);
      const animation = useAnimatedStyle(() =&gt; {
          return {
              translateX: outerVal.value,
          };
      }, []);
  
      useEffect(() =&gt; {
          // 500 delay from inner component animations
          outerVal.value = withDelay(500, withTiming(50, { duration: 1000 }));
      }, [outerVal]);
  
      return (
          &lt;&gt;
              &lt;Animated.View style={animation}&gt;
                  &lt;Text&gt;Outer Hello world&lt;/Text&gt;
              &lt;/Animated.View&gt;
              {Array(6).fill(1).map((el, index) =&gt; {
                  return &lt;InnerComponent key={index} startAnimation={true} /&gt;;
              })}
  
          &lt;/&gt;
      );
  }
  </code></pre>
  <p>Here I have an outer component which uses 6 of inner components. The requirement is: <strong>Run an animation in outer component AFTER all animations in InnerComponents are finished</strong></p>
  <p>One way is like I did in this example. I.e. fix a delay of same MS as the child animations take. But, coming from backend background, this approach seems hacky and <strong>incorrect</strong>.</p>
  <p>On the other hand, I don't have access to animations of InnerComponents in order to correctly organize the outer one.</p>
  <p>Question is: What patterns are there to correctly organized dependant animations?</p>