Animated.Value.addListener not getting callback

[cani1see]

I made a demo at https://github.com/cani1see/AnimationDemo

I can't get any callback whether useNativeDriver or not.

https://github.com/cani1see/AnimationDemo/blob/f18418eb545fe5fcb5f631e0c55ca3f7cdfe2970/src/RotateWheel.js#L18

test in android don't know ios

react-native info
React Native Environment Info:
System:
OS: macOS 10.14.3
CPU: (8) x64 Intel(R) Core(TM) i7-4710HQ CPU @ 2.50GHz
Memory: 29.09 MB / 16.00 GB
Shell: 5.7.1 - /usr/local/bin/zsh
Binaries:
Node: 10.16.0 - /usr/local/bin/node
Yarn: 1.17.0 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
Android SDK:
API Levels: 15, 16, 17, 19, 21, 22, 23, 24, 25, 26, 27, 28
Build Tools: 19.1.0, 20.0.0, 21.1.2, 22.0.1, 23.0.1, 23.0.2, 23.0.3, 24.0.0, 24.0.1, 24.0.2, 24.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.3, 28.0.2, 28.0.3
System Images: android-28 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom_64
IDEs:
Android Studio: 3.4 AI-183.6156.11.34.5522156
Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.8 => 0.59.8
npmGlobalPackages:
create-react-native-app: 0.0.6
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7
react-native-macos-cli: 2.0.1

[react-native-bot]

Thanks for submitting your issue. Can you take another look at your description and make sure the issue template has been filled in its entirety?

👉 Click here if you want to take another look at the Bug Report issue template.

[cabelitos]

Hello @cani1see, how are you feeling today? I looked at your example and I concluded that this is NOT a react-native bug. You see, at line 23 (https://github.com/cani1see/AnimationDemo/blob/f18418eb545fe5fcb5f631e0c55ca3f7cdfe2970/src/RotateWheel.js#L23) you create a new Animated.Value before starting the animation, which overrides the callback listener register that you did in here https://github.com/cani1see/AnimationDemo/blob/f18418eb545fe5fcb5f631e0c55ca3f7cdfe2970/src/RotateWheel.js#L14
.
You have two options to fix this problem.
At line 23 you could replace the

this.rotateDeg = new Animated.Value(0)

to

this.rotateDeg.setValue(0)

This would lead to the following implementation

  rotateImgDelegate = () => {
    if (!this.state.rotating) {
      this.rotateDeg.setValue(0)
      this.setState({
        rotating: !this.state.rotating,
      }, () => {
        this.rotateImg();
      });
    } else {
      this.rotateToIndex(7)
    }
  };

Or if you really want to create a new Animated.Value you will need to do the following

  rotateImgDelegate = () => {
    if (!this.state.rotating) {
      this.rotateDeg = new Animated.Value(0)
       this.rotateDeg.addListener(this.rotateListener)
      this.setState({
        rotating: !this.state.rotating,
      }, () => {
        this.rotateImg();
      });
    } else {
      this.rotateToIndex(7)
    }
  };

By the way, you need to adjust your rotating state toggle since it needs to be updated using the prevState due to react batched state updates. Please look at https://reactjs.org/docs/react-component.html#setstate for more info.

[cani1see]

@cabelitos thank you

[cabelitos]

you're welcome!