Making design work in Scroll View in React-Native

Question

I am currently trying to make a design work in React Native inside a Scroll View. The layout works as expected Without a Scroll View but With a Scroll View it gets stretched downwards. Any advice or suggestions will be appreciated. :)

Without ScrollView

<View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                <View style={{ position: 'absolute', flexDirection: 'column', justifyContent: 'flex-start' }}>
                    <LinearGradient
                        start={{ x: 0.0, y: 1.0 }} end={{ x: 1.0, y: 0.0 }}
                        colors={['#1E2AC0', '#347FC4']}
                        style={{ height: height * 0.4, width: width }}
                    />
                    <View style={{ height: height * 0.6, width: width, backgroundColor: '#FFFFFF', alignSelf: 'flex-end' }} />
                </View>
                <View style={{ paddingTop: height*0.6-30, width: width * 0.9, backgroundColor: 'transparent', alignSelf: 'center' }}>
                   //TextInput and Button
                </View>

            </View>

This looks the way I want it to look. However, I want the Views to go up when I scroll up. But when I use a scroll view this is what happens at the start. For some reason top gets stretched.

With ScrollView

<ScrollView>
   //Same Code as above
</ScrollView>

did you contain your code inside the scrollview or replace the parent view with a scrollview? If you havent done the latter, try it — Ryan Turnbull, Dec 31 '17 at 22:10
I know it sounds silly but have you tried wrapping your views with another View that has no style associated with it? — Gavin Thomas, Jan 01 '18 at 00:27

Making design work in Scroll View in React-Native

0 Answers0