Monday, 30 July 2018

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

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.



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

No comments:

Post a Comment