React Native LayoutAnimation scrollView container size

Question

I have some components wrapped in a ScrollView and for some condition the bottom most component shouldn't render. When that happens, I use LayoutAnimation to hide it. The problem is that when the component disappear, the ScrollView jumps to the new content height directly, without any animation at all. I want to use LayoutAnimation since I have screens where the contents height is unknown.

Example image

If you look at the image, when the button is pressed, the screen will instantly jump to the blue box without any animation.

state = { showGreenBox: false };

  renderBottomBox() {
    if (this.state.showGreenBox) {
      return (
        <View style={{ height: 300, width: 100, backgroundColor: 'green' }} />
      );
    }
  }

  render() {
    return (
      <ScrollView>
        <View style={{ height: 300, width: 100, backgroundColor: 'red' }} />
        <View style={{ height: 300, width: 100, backgroundColor: 'blue' }} />
        {this.renderBottomBox()}

        <TouchableOpacity
          onPress={() => {
            LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
            this.setState({ showGreenBox: !this.state.showGreenBox });
          }}
        >
          <Text>Press to collapse green box</Text>
        </TouchableOpacity>
      </ScrollView>
    );
  }