React Native/reanimated pattern for dependent animations

Question

Question is about patterns for organizing multicomponent animations that depend on each other. Here is an example.

Consider this inner component:

export default function InnerComponent({ startAnimation }: {startAnimation: boolean}) {
    const xVal = useSharedValue(0);

    const animation = useAnimatedStyle(() => {
        return {
            translateX: xVal.value,
        };
    }, []);

    useEffect(() => {
        if (startAnimation) {
            xVal.value = withTiming(50, { duration: 500 });
        }
    }, [startAnimation, xVal]);

    return <Animated.View style={animation}>
        <Text> Inner Hello world </Text>
    </Animated.View>;
}

These guys start an animation which takes 500ms. The animation is scoped inside the component.

So for example, if we use this component like the following:

export default function () {

    const outerVal = useSharedValue(0);
    const animation = useAnimatedStyle(() => {
        return {
            translateX: outerVal.value,
        };
    }, []);

    useEffect(() => {
        // 500 delay from inner component animations
        outerVal.value = withDelay(500, withTiming(50, { duration: 1000 }));
    }, [outerVal]);

    return (
        <>
            <Animated.View style={animation}>
                <Text>Outer Hello world</Text>
            </Animated.View>
            {Array(6).fill(1).map((el, index) => {
                return <InnerComponent key={index} startAnimation={true} />;
            })}

        </>
    );
}

Here I have an outer component which uses 6 of inner components. The requirement is: Run an animation in outer component AFTER all animations in InnerComponents are finished

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 incorrect.

On the other hand, I don't have access to animations of InnerComponents in order to correctly organize the outer one.

Question is: What patterns are there to correctly organized dependant animations?

React Native/reanimated pattern for dependent animations

0 Answers0