One Animated.Value vs. Many for Controlling Transitions

Question

When implementing a transition animation that effects many different elements, or many instances of the same Component, is there a best practice regarding where to control the animation? I have toyed with two different methods but I am not sure which is better.

One option is for the highest-up Component in the tree to create a Animated.Value that serves as a timer going from 0 to 1. It passes this timer down to descendants as a prop, and the descendants use Value.interpolate to do what they need to with it. This fits with the React design principle of moving state up, but passing around an Animated.Value as a prop feels odd (though it works fine) and the value always needs to be interpolated to be useful.

The other option is to pass down a boolean prop, like "isTransitioning." The descendants each hold their own Animated.Value and have a useEffect hook which starts the animation when isTransitioning switches to true.

Answer 1

In my opinion we should refer to SRP here (Single Responsibility Principle - module should have one and only one reason to change) and DRY (Don't Repeat Yourself).

If in your particular situation descendants are separate components that can be reused somewhere else - this may be a good reason to put this functionality inside. But if this is a single indivisible component - it's better to keep only one Animated.Value and apply it to all children.

Optimization, btw, is the last think we should care about, if there are no obvious problems with this. Maintainability is the top priority.