ScrollView with flex 1 makes it un-scrollable

Question

I'm trying to run flex on a ScrollView, and as long as the ScrollView has flex: 1 the scroll inside does not work. here is the expo fiddle (that you can run this code and play with) https://snack.expo.io/SySerKNp-

note that if you remove the flex: 1 from the ScrollView it does let scroll but then you lose the flex power ( the ability to let the red container down to push up the upper box (the ScrollView) ) so I must have a flex there.

p.s - I'm working only on android, and I haven't tested it on iPhone( I don't mind the result there )

any idea what am I missing ? why the ScrollView won't function right when it has a flex: 1 ? thanks !

Answer 1

Try using flexGrow: 1 instead of flex: 1 in scrollView content container style as follows.

<ScrollView contentContainerStyle={{ flexGrow: 1, borderColor: 'green', borderWidth: 5 }}>   <View style={styles.box1} />   <View style={styles.box2} />   <View style={styles.box1} /> </ScrollView> 

https://snack.expo.io/HkkEVoh6Z

Answer 2

I believe your problem is that you are telling the ScrollView to occupy all available space with flex=1 but the thing is that ScrollView works differently. It automatically renders all its children so it does work different with flex. That is the difference against a normal ListView or FlatList which have better performance.

I believe this snack solves that issue: https://snack.expo.io/SkxN9GOT-

Basically, I am getting the height of the device and setting the ScrollView with a fixed height, based on (screenHeight - the current height of the red box).