React Native Animated singleValue.stopTracking is not a function

user_3750636 0
Viewed 30636

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?

react-native
3 Answers

I run into this issue sometimes (React hooks instead) when I forget to set my variable to the .current of the ref:

function MyComponent() {
    const animatedValue = useRef(new Animated.Value(0.0)).current; // Notice the .current
}

This may not necessarily answer the original question, but developers who encounter this error while using React hooks may end up here so maybe it will help someone.

user_53947860

I ran into this issue because I used the animated value (2) instead of the object (1):

const animatedValue = useRef(new Animated.Value(0.0)).current; // (1)
const transform = animatedValue.interpolate({
  inputRange: [0.0, 1.0],
  outputRange: [0, 100]
}); // (2)

Animated.timing(animatedValue, { // USE animatedValue, NOT transform HERE!
  toValue: 1.0,
  duration: 3000,
});

Hope this can help anyone that was new to React Native Animation (like me :) )...

user_86578370
Related