How to divide screen to two parts in react-native? - react-native

Question

I'm new in react-native, and I'm trying to divide screen to tow part, the first part is the header or the navigation bar wish have a specific height about 40px the second part is the body or the content of the app wish his height must be the available height on the phone screen, I tried to use flex box method but it's not working!
That's my code:
<View style={styles.mainContainer}>
<View style={styles.navBar}>
</View>
<View style={styles.body}>
</View>
</View>
Style:
mainContainer: {
height: '100%',
display: 'flex',
flexDirection: 'column',
},
navBar: {
display: 'flex',
flexDirection: 'row-reverse',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: '#f1f1f1',
height: 30,
},
body: {
flex: 3,
display: 'flex',
},

Answer 1

just use this way, i hope this will work.
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF'}}>
<View style={{flex:1, backgroundColor:"green"}}>
<Text>hello world 1.........</Text>
<Text>hello world 1.........</Text>
<Text>hello world 1.........</Text>
<Text>hello world 1.........</Text>
</View>
<View style={{flex:1, backgroundColor:"yellow"}}>
<Text>hello world 2.........</Text>
<Text>hello world 2.........</Text>
<Text>hello world 2.........</Text>
<Text>hello world 2.........</Text>
</View>
</View>

Answer 2

Your code works perfectly fine. See it running on Snack at: https://snack.expo.io/S1LHFmFyG
It's likely that you use an older version of React Native that doesn't support percentages. They landed early this year so you need RN v0.42.3 or later in order to use them.
On a side note, there's a few unnecessary lines of code there in case you would like to make it more DRY. You don't need to declare display as it's flex by default, flexDirection is also set to column by default, and if you want a stripe of 40px your height should be 40 but I'm sure you're aware of that.