react-native scrollview does now respect flex? - react-native

Question

I'm learning flex layout for react native. This is my code:
import React, { Component } from 'react';
import {
Text,
View,
ScrollView
} from 'react-native';
const style = {
container: {
flex:1,
flexDirection:'column',
flexWrap:'nowrap',
alignItems:'stretch',
},
title: {
flex:1,
backgroundColor:'blue',
},
terms: {
flex:8,
flexDirection:'column',
backgroundColor:'red',
},
termsText: {
padding:15,
flex:1,
},
check: {
flex:1,
backgroundColor:'yellow',
}
};
export default class Home extends Component {
constructor(props)
{
super(props);
}
render() {
return (
<View style={style.container}>
<Text style={style.title}>Terms and Conditions</Text>
<ScrollView style={style.terms}>
<Text style={style.termsText}>You must comply, or die...</Text>
</ScrollView>
<Text style={style.check}>Check mark here (tap to agree to terms)</Text>
</View>
);
}
}
And the result is this:
This is not what I expected. I was expecting the red area to take up 80% of the vertical height because style.terms.flex == 8. If I changed the contents of my render to this:
render() {
return (
<View style={style.container}>
<Text style={style.title}>Terms and Conditions</Text>
<Text style={style.terms}>You must comply, or die...</Text>
<Text style={style.check}>Check mark here (tap to agree to terms)</Text>
</View>
);
}
I am then able to get the red area to become 80% vertical height. Why does ScrollView not respect style.terms.flex?

Answer 1

"Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction)." From the react native docs. What you can do is use the Dimensions API of react native and give the ScrollView 80% of device height instead.
More on ScrollView
Dimensions

Answer 2

Use Dimensions Api for ScrollView
const { width, height } = Dimensions.get('window');
<ScrollView style={{ height: height * 0.8 }}>
<Text style={style.termsText}>You must comply, or die...</Text>
</ScrollView>
height * 0.8 get the 80 percentage of height with respect to the screen size