How to make animation in React Native "permanent" with scaleY?

Question

I have been trying to use scaleY to shrink a box and make it invisible. However, when I do this, the items below the box (not absolutely positioned) do not move up to account for this box being gone.

When I use the inspector I see that the box is still taking up the same amount of space it was, even though it is no longer visible.

Here is the box that I am trying to make disappear:

<Animated.View style={{transform: [{
  scaleY: this.state.cardScale}]}} >
  ...
</View>

Here is my animation code (triggered on a button press):

Animated.timing(
  this.state.cardScale,
  {
    toValue: 0, //starts at 1
    duration: 1000,
  }
).start();

I'm wondering how to make this transformation permanent - i.e. make the final height of the box reflect what I have scaled it to be visible.

Answer 1

Transforming the scale does not change the height/width of the View. You can instead try animating the height of the view. You can store the initial height of the View using onLayout prop

<Animated.View onLayout=(e => this.setState({height: e.layout.height})) style={height: this.state.height} />

And then animate the height

Animated.timing(
      this.state.height,
      {
        toValue: 0, //starts at whatever initial height was
        duration: 1000,
      }
    ).start();