ScrollView snaps back into place with { position: absolute} - react-native

Question

Because of the many layers displayed on my form and to create transparency effects, I need to place my ScrollView at an absolute position; unfortunately, when add the { position: 'absolute' } style, my ScrollView snaps back to the top after I release my finger.
I read all the relevant threads on stackoverflow to no avail.
Here's a screen capture of the code below: http://imgur.com/a/fd4ad
Here's the code I am using:
import React, { Component } from 'react';
import { View, ScrollView, Text } from 'react-native';
class HomeTest extends Component {
render() {
const { headerTextStyle, homeView, scrollViewStyle, textStyle } = styles;
return (
<View>
<ScrollView style={scrollViewStyle} contentContainerStyle={homeView}>
<Text style={textStyle}>I'd love to figure out why this is not working.........................</Text>
</ScrollView>
<Text style={headerTextStyle}>Header</Text>
</View>
);
}
}
const styles = {
headerTextStyle: {
fontSize: 40,
alignSelf: 'center'
},
scrollViewStyle: {
position: 'absolute',
paddingTop: 60,
marginTop: 0
},
homeView: {
alignItems: 'center',
justifyContent: 'center'
},
textStyle: {
fontSize: 96
},
};
export default HomeTest;

Answer 1

Solution found on GitHub: https://github.com/facebook/react-native/issues/5438
Alright, the secret was to add the following styling components: (I'll have to figure out why - and post it - later and brush up my CSS skills)
Add styling to the parent view (position: relative, flex: 1)
Add new styling properties to the scroll view (top, bottom, left, right)
Here's the updated code:
import React, { Component } from 'react';
import { View, ScrollView, Text } from 'react-native';
class HomeTest extends Component {
render() {
const { headerTextStyle, homeView, scrollViewStyle, textStyle, mainView } = styles;
return (
<View style={mainView}>
<ScrollView style={scrollViewStyle} contentContainerStyle={homeView}>
<Text style={textStyle}>I'd love to figure out why this is not working.........................</Text>
</ScrollView>
<Text style={headerTextStyle}>Header</Text>
</View>
);
}
}
const styles = {
headerTextStyle: {
fontSize: 40,
alignSelf: 'center'
},
scrollViewStyle: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
paddingTop: 60
},
homeView: {
alignItems: 'center',
justifyContent: 'center'
},
textStyle: {
fontSize: 96
},
mainView: {
flex: 1,
position: 'relative'
}
};
export default HomeTest;

Answer 2

You just need to specify the height of scrollView
scrollViewStyle: {
position: 'absolute',
paddingTop: 60,
marginTop: 0 ,
height: 300 // <----
},