microsoft / microsoft/react-native-windows
Calling `setValue` in NativeAnimated does not update the state correctly
Nobody has claimed this yet.
- 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
- Add an example that calls
setValueduring an active animation - Observe the props side effect after calling
setValuewith the JS driver vs. the NativeAnimated driver. - 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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