title: React Native Animation push animation downward, not upward over existing view
body: <p>I am trying to have my Animated View come downward and over the content of the ScrollView instead of over my top fixed position bar, but when the Animation begins the animated view ends up eating the space of the container bar. I have played with paddingTop, marginTop, but seems to be a hack. </p>
  
  <p>Here is a self contained code sample that shows what I'm trying to do: </p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    AppRegistry, StyleSheet, Text, View, Animated, Dimensions, ScrollView,
    Button
  } from 'react-native';
  
  const { width } = Dimensions.get('window');
  
  
  const make_text = (text='Hello', color='blue') =&gt; (
    &lt;Text
      style={{textAlign: 'center', fontSize: 24, backgroundColor: color, margin: 20}}&gt;
      {text}
    &lt;/Text&gt;
  );
  
  class Fix_bar extends Component {
  
    state = { height: new Animated.Value(0) };
  
    expand_dropdown = () =&gt; {
      Animated.timing(this.state.height, {
        toValue: 100
      }).start();
    }
  
    fold_dropdown = () =&gt; {
      Animated.timing(this.state.height, {
        toValue: 0
      }).start();
    }
  
  
    render () {
  
      const s = {
        position: 'absolute', height: 150, backgroundColor: 'red', paddingTop: 20, width
      };
  
      return (
        &lt;View style={s}&gt;
          &lt;View style={{flexDirection: 'row', flex: 1, justifyContent: 'space-between'}}&gt;
            &lt;Text style={{fontSize: 24, paddingTop: 50}}&gt; Left side thing&lt;/Text&gt;
            &lt;Text style={{fontSize: 24, paddingTop: 50}}&gt; Right side thing&lt;/Text&gt;
          &lt;/View&gt;
  
          &lt;Button title={'Expand'} onPress={this.expand_dropdown}/&gt;
          &lt;Button title={'Fold'} onPress={this.fold_dropdown}/&gt;
  
          &lt;View style={{backgroundColor: 'black', height: 1}}/&gt;
          &lt;Animated.View style={{height: this.state.height}}&gt;
            {make_text('world', 'aliceblue')}
            {make_text('world', 'aliceblue')}
            {make_text('world', 'aliceblue')}
          &lt;/Animated.View&gt;
        &lt;/View&gt;
      );
    }
  }
  
  class animate_example extends Component {
    render() {
      return (
        &lt;View style={{backgroundColor: 'orange', flex: 1}}&gt;
          &lt;Fix_bar/&gt;
          &lt;ScrollView style={{marginTop: 150}}&gt;
            &lt;View style={{justifyContent: 'space-between'}}&gt;
              {make_text()}
              {make_text()}
              {make_text()}
              {make_text()}
              {make_text()}
            &lt;/View&gt;
          &lt;/ScrollView&gt;
        &lt;/View&gt;
      );
    }
  }
  
  
  
  AppRegistry.registerComponent('animate_example', () =&gt; animate_example);
  </code></pre>
  
  <p>One idea I had was to make a trailing View in that fix_bar component with transparency with the height that I intend for the dropdown but haven't explored that idea. </p>