I'm trying to make a screen which have a center View and two equally sized Views where each view has a minimum height to not shrink beyond it's content size, on Web (we're using react-native-web) it works as expected, the size is distributted equally, but on mobile it seems that it takes the minHeight and put the flexGrow on top of it making the two views of different sizes, is it as it should behave? it's a bug? if so, what could be a workaround for it?
Web:
| Top | Bottom |
|---------------------|------------------|
| 
| 
|
Mobile (Android Emulator):
| Top | Bottom |
|---------------------|------------------|
| 
| 
|
<Fragment>
<View style={{ minHeight: 80, flexGrow: 1, backgroundColor: 'red' }} />
<View style={{ minHeight: 402, backgroundColor: 'blue' }} />
<View
style={{
minHeight: 16,
flexGrow: 1,
backgroundColor: 'green',
}}
/>
</Fragment>