React Animated - Can't interpolate descending value

Question

I'm trying to interpolate an animation value(movement) to bind it to another animation(width change) occurring at the same time. Why does the input range not support descending values? Am I thinking of this incorrectly?

The animation would be moving in an upward direction (to an offscreen point) so the y Value would have to descend. Obviously the animation works fine when moving in a downward(incrementing) direction. Is this feature simply not applicable to my situation? Is there some sort of work around I could use?

Thanks.

  state = {
    movementAnimation: new Animated.ValueXY({ x: 0, y: 100 }),
  };

  animateMove = () => {
    Animated.timing(this.state.movementAnimation, {
      toValue: { x: 0, y: -50 },
      duration: 500,
    }).start();
  };

  render() {
    const interpolateMovement = this.state.movementAnimation.y.interpolate({
      inputRange: [100, 20, -50],
      outputRange: ['100%', '50%', '100%'],
    });

    return (
      <View>
        <Animated.View
          style={[styles.card, this.state.movementAnimation.getLayout(),{ width: "100%"}]}>
          <Button onPress={this.animateMove}>GO!!!!!!</Button>
        </Animated.View>
      </View>
    );
  }
}

Answer 1

I checked your code a lot You have some minor problems in these lines

inputRange: [0, 1, 2], //Values should be in ascending order
outputRange: ['100', '50', '100'],// The numbers do not include percentages

You can now control the animation through

toValue: {x: 0, y: 2},

Now it works fine

<Button title={'GO!!!!!'} onPress={this.animateMove} />

I tried it !!

Answer 2

If you want a descending interpolation, do this

const style = a.interpolate({
  inputRange: [-value,+value],
  outputRange: [fromValue, toValue],
});