React Native Animated singleValue.stopTracking is not a function

Question

I have the following code to animate in React Native

Animated.timing(     this.state.absoluteChangeX,     {toValue: 0}, ).start(function() {     this.lastX = 0;     this.lastY = 0; });  

Pretty simple, but whenever it's triggered, I receive the error: singleValue.stopTracking is not a function

Here's where the error originates:

/react-native/Libraries/Animates/src/AnimtaedImplementation.js

var timing = function(   value: AnimatedValue | AnimatedValueXY,   config: TimingAnimationConfig, ): CompositeAnimation {   return maybeVectorAnim(value, config, timing) || {     start: function(callback?: ?EndCallback): void {       var singleValue: any = value;       var singleConfig: any = config;       singleValue.stopTracking(); // <--------------- HERE!!!       if (config.toValue instanceof Animated) {         singleValue.track(new AnimatedTracking(           singleValue,           config.toValue,           TimingAnimation,           singleConfig,           callback         ));       } else {         singleValue.animate(new TimingAnimation(singleConfig), callback);       }     },      stop: function(): void {       value.stopAnimation();     },   }; }; 

I'm not extremely versed in typeScript, but var singleValue: any means that "singleValue" could be any type. In my case, it's a number. Since numbers don't have methods, it would make sense that this would error.

Am I doing something wrong?

Answer 1

The value you wish to animate must be an instance of Animated.Value, or one of its subtypes. When you initialize your state, it should look something like this:

getInitialState() {   return { absoluteChangeX: new Animated.Value(0) }; } 

The fact that the type declaration in the framework method is any is just a lack of constraint, not an explicit invitation to pass any value into it.

See the Animated docs for more examples.