Build a mount fade-in with Animated API

WHAT THIS TESTS The interviewer wants to see that you know the three moving parts of the Animated API and how they fit together, plus awareness of the native driver for cheap transform and opacity animations.

A GOOD ANSWER COVERS You create an Animated.Value initialized to 0 and store it in a useRef so it is not recreated on every render. On mount, inside a useEffect with an empty dependency array, you call Animated.timing passing the value, a toValue of 1, a duration, an easing curve, and useNativeDriver set to true, then call .start() on the returned animation. In JSX you use Animated.View, not a plain View, and set its style opacity to the animated value directly. Animated.View knows how to subscribe to the value and update without triggering React re-renders.

COMMON WRONG ANSWERS Declaring the Animated.Value as a plain local variable so it resets each render. Pushing the value into useState and calling setState in a loop, which floods the JS thread. Forgetting useNativeDriver, so opacity is computed in JavaScript and can stutter. Trying to animate layout properties like height with the native driver, which is unsupported.

LIKELY FOLLOW-UPS How does the native driver actually help, what properties can it animate, how would you fade out on unmount, and how do you compose this with other animations.

ONE CONCRETE EXAMPLE const opacity = useRef(new Animated.Value(0)).current; useEffect runs Animated.timing on opacity with toValue 1, duration 400, useNativeDriver true, then start. The render returns Animated.View with style opacity bound to opacity wrapping the content. The component smoothly appears over 400 milliseconds with the work serialized to the native side, so a busy JS thread does not jank the fade.