ReactNative: How to make background image fill up the portion that it should cover by flexbox - react-native

Question

I've been trying to get an image to fill up the space it should fill with flex. However, it only fills up to a certain portion of the space. The structure is as follows:
mainWrapper
navBarWrapper
image
buttonWrapper
mainWrapper is a View with flex: 1 so it covers the entire page.
navBarWrapper has a flex: 1
image has a flex: 7 and backgroundColor: 'pink' to see where it ends
buttonWrapper has a flex: 2.5 and backgroundColor: 'lightgrey' to see where it ends
In the screenshot, the image itself doesn't fill up the pink space entirely.
Screenshot
My simplified code is here:
<View style={styles.mainWrapper}>
<View style={styles.navBarWrapper}>
<NavigationBar
statusBar={this.statusBarConfig()}
leftButton={this.leftButtonConfig()}
title={this.titleConfig()}
style={styles.navBar}>
</NavigationBar>
</View>
<View style={styles.imageWrapper}>
<Image source={require('../assets/images/user_screen/user_screen_background.png')} style={styles.image}>
</Image>
</View>
<View style={styles.buttonWrapper}>
</View>
</View>
And the stylesheet
mainWrapper:{
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-start',
backgroundColor: 'white'
},
navBarWrapper:{
flex: 1,
},
navBar:{
flexDirection: 'row',
alignItems: 'center',
backgroundColor: "#1ca99e",
},
imageWrapper:{
flex: 7,
flexDirection: 'column',
backgroundColor: 'pink',
},
image:{
flex:1 ,
height: null,
width: null,
resizeMode: 'cover'
},
buttonWrapper:{
flex: 2.5,
flexDirection: 'row',
backgroundColor: 'lightgrey'
}

Answer 1

Give subcontainers flex values with respect to wrapping container. Since by default flexDirection is column when you give flex 1 outer container it will take up full height of the screen.
Assuming you need top 10% for navbar, bottom button container 25% of screen height, that gives us 65% of height for the imageWrapper.
mainWrapper:{
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-start',
backgroundColor: 'white'
},
navBarWrapper:{
flex: 0.1,
},
navBar:{
flexDirection: 'row',
alignItems: 'center',
backgroundColor: "#1ca99e",
},
imageWrapper:{
flex: 0.65,
flexDirection: 'column',
backgroundColor: 'pink',
},
image:{
flex:1 ,
height: null,
width: null,
resizeMode: 'cover'
},
buttonWrapper:{
flex: 0.25,
flexDirection: 'row',
backgroundColor: 'lightgrey'
}