React native minheight justify content - react-native

Question

I try to set a minHeight for a View (half height of a screen) and in this View the items need to be space-between.
Example without space between :
<ScrollView>
<View style={{minHeight:height}>
<View>
<Text style={{textAlign: 'center',fontFamily: 'Roboto',fontStyle: 'normal',fontWeight: 'normal',fontSize: 18,marginTop: 20}}>{contact.name}
</Text>
</View>
<View style={{backgroundColor:'grey', height: 20}}/>
</View>
</ScrollView>
When I try without the space-between , the height of the view is half screen but if i add space-between :
<ScrollView>
<View style={{minHeight:height,justifyContent:'space-between'}}>
<View>
<Text style={{textAlign: 'center',fontFamily: 'Roboto',fontStyle: 'normal',fontWeight: 'normal',fontSize: 18,marginTop: 20}}>{contact.name}
</Text>
</View>
<View style={{backgroundColor:'grey', height: 20}}/>
</View>
</ScrollView>
The height of the view is increase and I don't know why. I want the height is equals to half height if the view can contains the items. And if the items in the view are too big , the height of the view will increase.
How can I solve this ?
I have made an example with expo :
Example
Try to remove justify content. Y ou will understand what I mean.
EDIT
this is my code with the bug :
<View style={{flex:1}}>
<View style={{minHeight:'50%', backgroundColor:'blank',justifyContent: 'space-between'}}>
<Text style={{textAlign: 'center',fontFamily: 'Roboto',fontStyle: 'normal',fontWeight: 'normal',fontSize: 18,marginTop: 20}}>hello </Text>
<View style={{backgroundColor:'grey', height: 20}}/>
</View>
<Text>test</Text>
</View>
The result :
The grey bar should be at the middle on the screen

Answer 1

<ScrollView>
<View style={{minHeight:'50%', backgroundColor:'green'}}>
<Text style={{textAlign: 'center',fontFamily: 'Roboto',fontStyle: 'normal',fontWeight: 'normal',fontSize: 18,marginTop: 20}}>hello
</Text>
</View>
<View style={{minHeight:'50%', backgroundColor:'red'}}>
<Text style={{textAlign: 'center',fontFamily: 'Roboto',fontStyle: 'normal',fontWeight: 'normal',fontSize: 18,marginTop: 20}}>hello1
</Text>
</View>
</ScrollView>
You can set minHeight:'50%' and it will help to divide your component in half screen.
Your Solution:
<View style={{ flex: 1 }}>
<View style={{ minHeight: '50%', backgroundColor: 'green', justifyContent: 'space-between' }}>
<Text style={{ height: 130, textAlign: 'center', fontStyle: 'normal', fontWeight: 'normal', fontSize: 18, marginTop: 0, backgroundColor: 'red' }}>hello </Text>
<Text style={{ height: 130, textAlign: 'center', fontStyle: 'normal', fontWeight: 'normal', fontSize: 18, marginTop: 0, backgroundColor: 'blue' }}>hello </Text>
<Text style={{ height: 130, textAlign: 'center', fontStyle: 'normal', fontWeight: 'normal', fontSize: 18, marginTop: 0, backgroundColor: 'yellow' }}>hello </Text>
<Text style={{ height: 130, textAlign: 'center', fontStyle: 'normal', fontWeight: 'normal', fontSize: 18, marginTop: 0, backgroundColor: 'blue' }}>hello </Text>
<View style={{ justifyContent: 'flex-end', backgroundColor: 'grey', height: 20 }} />
</View>
<Text>test</Text>
</View>