1

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.

pratteek shaurya
  • 850
  • 2
  • 12
  • 34

3 Answers3

4

Change your ScrollView to:

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

enter image description here

Issue on React Native repo

Quang Thái
  • 649
  • 5
  • 17
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.

Anto Pravin
  • 378
  • 2
  • 9
2

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

Pankaj Chaturvedi
  • 198
  • 1
  • 9