animated doesn't work without forceUpdate for 2nd animation

Description

I have a component and everytime the prop data is changed I want to animate the component in order to adjust it to the new height. The Animated.View gets an Value as a height style prop, but when I change the Value after componentDidUpdate the Value is not updated, unless I call forceUpdate and then it works.

Code

function runTiming(clock: Animated.Clock, startValue: Animated.Value<number>, destValue: Animated.Value<number>, duration: number) {
  const state = getInitialState(startValue);
  const config = getConfig(destValue,duration);

  return block([
    cond(clockRunning(clock), 0, [

      set(state.finished, 0),
      set(state.time, 0),
      set(state.position, startValue),
      set(state.frameTime, 0),
      set(config.toValue, destValue),
      startClock(clock),
    ]),
    timing(clock, state, config),
    cond(state.finished, stopClock(clock)),
    state.position,
  ]);
}

export class Component extends PureComponent<PropsType> {

  heightAnimation: any;

  constructor(props: PropsType) {
    super(props);
    this.heightAnimation = new Animated.Value(0);
    this.animate();
  }

  componentDidUpdate(prevProps: PropsType) {
    if (propsChangedAndNeedToUpdateHeight) {
      this.animate()
    }
  }

  animate = () => {
    this.heightAnimation = runTiming(new Clock(), new Animated.Value(oldHeight), new Animated.Value(destHeightValue), 400);
    this.forceUpdate(); //I want to delete this line
  }

  render() {
      return (
        <Animated.View style={{
          height: this.heightAnimation
        }
        }>
          {MyComponent}
        </Animated.View>
      );
  }
}

Package versions

• React:
• React Native:
• React Native Reanimated:

[noobvim]

We know we can initialize an animation based on props. All we’re looking to do is update an animation based on props. The same thing we’re able to do everywhere else in React.

[jakub-gonet]

To update Animated.Value you need to use .setValue as @terrysahaidak suggested. forceUpdate detaches and reattaches nodes in the native side, that’s why it’s working.