flex not working in ScrollView in react-native

Question

I have a very basic styling question in react native

below is my code:

[![return (
            <View style={{ flex: 1, backgroundColor: "blue" }}>
                <ScrollView style={{ flex: 1, backgroundColor: "blue" }}>
                    <View style={{ flex: 1, backgroundColor: "red" }}>
                        <Text>Hello</Text>
                    </View>
                    <View style={{ flex: 1, backgroundColor: "orange" }}>
                        <Text>Hello</Text>
                    </View>
                    <View style={{ flex: 1, backgroundColor: "green" }}>
                        <Text>Hello</Text>
                    </View>
                </ScrollView>
                <ScrollView style={{ flex: 1, backgroundColor: "blue" }}>
                    <View style={{ flex: 1, backgroundColor: "red" }}>
                        <Text>Hello</Text>
                    </View>
                    <View style={{ flex: 1, backgroundColor: "orange" }}>
                        <Text>Hello</Text>
                    </View>
                    <View style={{ flex: 1, backgroundColor: "green" }}>
                        <Text>Hello</Text>
                    </View>
                </ScrollView>
            </View>
        );

I just want to know why am I getting blue space between 2 ScrollVie? If I remove ScrollView then my flex property is working fine.

Answer 1

The styles you are passings to the ScrollView should be passed in the ScrollView Container like this

<ScrollView 
contentContainerStyle={{
 flex: 1 // or flexGrow: 1
}}
> ... </ScrollView >

this can help you to understand

Answer 2

The reason is that you are giving flex:1 for the parent view So it takes a maximum screen height. And also the child ScrollViews has flex: 1. If you change the background color of the scroll view to some other color you can notice that it is the scrollView that is stretched and not the Parent View.

You can remove the flex property of the parent view so that your ScrollView will not be stretched to take up half the screen.

Answer 3

Change your ScrollView to:

<ScrollView 
... other stuff
// Add here
contentContainerStyle={{
 flex: 1 // or flexGrow: 1
}}
>

Issue on React Native repo