flex not working in ScrollView in react-native

user_7493971 0
Viewed 401

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>
        );

enter image description here

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.

react-native
3 Answers

Change your ScrollView to:

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

enter image description here

Issue on React Native repo

user_75993770

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.

user_131844240

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

user_119494960
Related