React native, scrollView is trimming the empty 'view' components(having background color as well)

Question

New to react native, I have a view component with flex direction as row, now it is nested with two view components with background colours pink and blue respectively. It renders as expected.
without Scrollview image

<View style={{flex:1, flexDirection:'row'}}>
    <View style ={{flex:0.3, backgroundColor: 'pink'}}>
    </View>
    <View style ={{flex:0.7, backgroundColor: 'blue'}}>
    </View>
</View>

Now if i wrap above code inside scrollView then nothing is being rendered on screen. It is trimming the empty view components.I want scrollview also should render the empty view components with background colours. with scrollview image

<View style={{flex:1}}>
    <ScrollView style={{flex:1}}>
        //above code here
    </ScrollView>
</View>

score 2 · Accepted Answer · edited Mar 20 '21 at 11:21

2

change ScrollView style prop to contentContainerStyle like this:

 <ScrollView contentContainerStyle={{flex:1}}>

check this link: style vs contentContainerStyle

edited Mar 20 '21 at 11:21

Haidar Zeineddine

979
1
8
20

answered May 26 '19 at 08:31

Mervzs

1,114
7
21

it works, but can you explain me a little what's happening ?? – youstron sic May 26 '19 at 08:43
check the above link to know more about the difference between styles and contentContainerStyle in ScrollView – Mervzs May 26 '19 at 11:29
Thanks for the link, if i make contentContainerStyle to flex:1 then scrolling is not working. – youstron sic May 26 '19 at 11:43

React native, scrollView is trimming the empty 'view' components(having background color as well)

1 Answers1