React Native Animation push animation downward, not upward over existing view - reactjs

Question

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.
Here is a self contained code sample that shows what I'm trying to do:
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') => (
<Text
style={{textAlign: 'center', fontSize: 24, backgroundColor: color, margin: 20}}>
{text}
</Text>
);
class Fix_bar extends Component {
state = { height: new Animated.Value(0) };
expand_dropdown = () => {
Animated.timing(this.state.height, {
toValue: 100
}).start();
}
fold_dropdown = () => {
Animated.timing(this.state.height, {
toValue: 0
}).start();
}
render () {
const s = {
position: 'absolute', height: 150, backgroundColor: 'red', paddingTop: 20, width
};
return (
<View style={s}>
<View style={{flexDirection: 'row', flex: 1, justifyContent: 'space-between'}}>
<Text style={{fontSize: 24, paddingTop: 50}}> Left side thing</Text>
<Text style={{fontSize: 24, paddingTop: 50}}> Right side thing</Text>
</View>
<Button title={'Expand'} onPress={this.expand_dropdown}/>
<Button title={'Fold'} onPress={this.fold_dropdown}/>
<View style={{backgroundColor: 'black', height: 1}}/>
<Animated.View style={{height: this.state.height}}>
{make_text('world', 'aliceblue')}
{make_text('world', 'aliceblue')}
{make_text('world', 'aliceblue')}
</Animated.View>
</View>
);
}
}
class animate_example extends Component {
render() {
return (
<View style={{backgroundColor: 'orange', flex: 1}}>
<Fix_bar/>
<ScrollView style={{marginTop: 150}}>
<View style={{justifyContent: 'space-between'}}>
{make_text()}
{make_text()}
{make_text()}
{make_text()}
{make_text()}
</View>
</ScrollView>
</View>
);
}
}
AppRegistry.registerComponent('animate_example', () => animate_example);
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.

Answer 1

I would suggest the following hierarchy:
const ScrollViewContainer = () =>
<ScrollView style={{marginTop: 150}}>
<View style={{justifyContent: 'space-between'}}>
{make_text()}
{make_text()}
{make_text()}
{make_text()}
{make_text()}
</View>
</ScrollView>;
const ExpandableBar = (props: {expanded: boolean}) =>
<View style={{position: "absolute", top: 0, left: 0, right: 0, bottom: 0}} />
const render = () =>
<View>
<Fix_bar />
<View style={{flex: 1}}> // container which fills remaining space
<ScrollViewContainer />
<ExpandableBar />
</View>
Then in ExpandableBar you'd animate down if expanded is true. also please note that ExpandableBar should be a class (obviously).