microsoft / microsoft/react-native-windows

Animated.Value cannot have a listener attatched to it

Open
#4,311 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Environment

react-native-cli: 2.0.1
react-native: 0.61.5
System:
OS: Windows 10 10.0.18363
CPU: (12) x64 Intel(R) Xeon(R) W-2133 CPU @ 3.60GHz
Memory: 15.79 GB / 31.73 GB
Binaries:
Node: 10.16.3 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
npmPackages:
react: 16.9.0 => 16.9.0
react-native: ^0.61.5 => 0.61.5
react-native-windows: 0.61.0-beta.22 => 0.61.0-beta.44
Installed UWP SDKs:
10.0.17763.0
10.0.18362.0

Steps to Reproduce
const myAnimatedValue = useAnimatedValue(0);
myAnimatedValue.addListener(({value}) => console.log(value));

useEffect(() => {
  const animation = Animated.parallel([
    Animated.sequence([
      Animated.timing(myAnimatedValue, {
        toValue: 100,
        delay: 0,
        duration: 300,
        easing: Easing.linear,
        useNativeDriver: true,
      }),
    ]),
  ]);
animation.start();
}, []);
Expected Behavior

The console prints the value as it changes

Actual Behavior

Nothing happens

Additional context

Adam Gorman(adamgor)
Austin Beaulieu(aubeauli)

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

Reproduce the issue with the provided Animated.Value.addListener and Animated.timing example on React Native Windows, then trace the Animated.Value listener path and native-driver animation entry point. Done means the listener callback logs changing values while the native-driven animation runs.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
desktop
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 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.