Calling `setValue` in NativeAnimated does not update the state correctly

[rozele]

Problem Description

When you call setValue on an Animated.Value node, the expectation is that any active animations will be stopped and the prop node attached to the Animated.Value node will update with the correct value.

Steps To Reproduce

1. Add an example that calls setValue during an active animation
2. Observe the props side effect after calling setValue with the JS driver vs. the NativeAnimated driver.
3. The NativeAnimated driver stops the animation but keeps the current animation value.

Expected Results

The NativeAnimated driver must update the animation graph so that the Animated.Value setting propagates to the props animated node and the view's prop is updated correctly.

CLI version

npx react-native --version

Environment

npx react-native info

Target Platform Version

No response

Target Device(s)

No response

Visual Studio Version

No response

Build Configuration

No response

Snack, code example, screenshot, or link to a repository

In this example, I call setTimeout(..., 500) and call setValue(0) after 500ms. Notice that the JS driver updates the props back to their initial state, but the NativeAnimated driver stops the animation and the props do not get the correct value:

https://user-images.githubusercontent.com/1106239/145258694-a9159935-be08-41dd-87e7-776293fe1603.mp4

[ghost]

Many of our core contributors are taking some much needed vacation throughout December 2021. Thank you for being patient while we relax, recharge, and return to a normal responsiveness in January 2022. In the meantime feel free to continue to pose questions, open issues, and make feature requests - you just may not get a response right away.

[rozele]

Re-opening, as this is technically still a bug for the composition-based NativeAnimated implementation and the tick-based implementation is opt-in.

For a temporary workaround use:

// Animated.timing is an example, same syntax for any animation driver
Animated.timing({
  /* ... */,
  useNativeDriver: true,
  platformConfig: {
    useComposition: false,
  }
);