microsoft / microsoft/react-native-windows

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

Open
#9,251 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area: Animation bug Partner: Facebook Workstream: Component Parity
Dominant language
C++
Stars
17.3k
Forks
1.2k
Avg merge
1d 13h
Merged PRs (30d)
33

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the NativeAnimated setValue path and reproduce the linked example, comparing the JS and NativeAnimated drivers after setValue(0) interrupts an active animation. Trace how the animation graph reaches the props node and view; done means the native driver stops the animation and updates the view prop to the value passed to setValue.

Written by the indexing model from the issue text.

Assessment

Tech stack
cpp, react-native
Domain
desktop, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.