React Native Animated singleValue.stopTracking is not a function

Question

I have the following code for animating in React Native

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

Pretty simple, but whenever it fires, I get an error: singleValue.stopTracking is not a function

Here where the error occurs:

/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 am not very good at typeScript, but var singleValue: any means that "singleValue" can be any type. In my case, this is a number. Since numbers have no methods, it makes sense that this will be a mistake.

Am I doing something wrong?

Answer 1

The value you want 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 method of the any structure is simply the absence of a restriction, and not an explicit invitation to pass any value into it.

See Animated Documents for more details.