ScrollView snaps back into place with { position: absolute}

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

You just need to specify the height of scrollView

scrollViewStyle: {
    position: 'absolute',
    paddingTop: 60,
    marginTop: 0 ,
    height: 300 //    <----
},

Answer 2

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;