"Warning: Trying to remove a child that doesn't exist" Why am I getting this warning in React Native?

Question

I'm getting a warning in React Native that I've narrowed down to one line and I've no clue why.

I've built a helper function to animate colors and values in a series like:

animate([this, "textColor", 250, "#fff1cc"]);
animate([this, "rise", 250, 25], [this, "rise", 250, 0]);

And that function is pretty simple, note the commented line causing the error:

// React Modules

import { Animated } from "react-native";

// Export

export default function func() {
  step(0, arguments);
}

// Extras

function step(index, args, delay = 0) {
  if (args[index]) {
    let argument = args[index];
    index++;
    handle(argument, delay, () => {
      step(index, args);
    });
  }
}

function handle(argument, delay = 0, callback) {
  let that = argument[0];
  let label = argument[1];
  let duration = argument[2];
  let endColor = argument[3];
  let startColor = argument[4];
  if (!that.interpolations) {
    that.interpolations = {};
  }
  if (!that.animations) {
    that.animations = {};
  }
  if (!that.animations[label]) {
    that.animations[label] = new Animated.Value(0);
  }
  if (typeof endColor == "string") {
    if (!startColor) {
      if (that.interpolations[label]) {
        startColor = JSON.stringify(that.interpolations[label]);
      } else {
        startColor = "#ffffff";
      }
    }
    that.interpolations[label] = that.animations[label].interpolate({
      inputRange: [0, 100],
      outputRange: [startColor, endColor]
    });
    startValue = 0;
    endValue = 100;
  } else {
    startValue = startColor || that.animations[label] || 0;
    // setting this to that.animations[label] causes the warning
    endValue = endColor;
  }
  Animated.timing(that.animations[label], { // warning triggered when
  // Animated.timing() executes while startValue is set to that.animations[label]
    toValue: startValue, 
    duration: 0
  }).start();
  Animated.timing(that.animations[label], {
    toValue: endValue,
    duration: duration || 500
  }).start(callback);
}

Other than that warning, the code works perfectly as expected. I'd hate to just ignore a warning I don't understand though. Should I report this as a bug to the React Native repo, or is the warning warranted? Stack trace, for those interested.

Answer 1

Well, I am not sure one hundred percent because I couldn't reproduce your error. Following your stack trace, in L193 we have:

singleValue.stopTracking();

This has a chain of operations that try to untrack the Animated value.

It treats the value passed to Animated.timing as an AnimatedValue and then it reaches the point where AnimatedWithChildren try to detach the children Value nodes of your animation. The only reason I have find is that the value you have send is not a Animated Value but rather a plain primitive.

So if you follow any example of the official documentation, you will see that startValue should be new Animated.Value(0) instead of 0. So the tracking, the detaching and all the animated flow, works properly over this value.

Only in part of your application, you will assign that.animations[label], that is a new Animated.Value, but in other ones you are directly assigning a integer like in startValue = 0;