Adding margin to component changes screen layout react-native - react-native

Question

I'm building a react-native app and I'm having a problem styling the components.
For some reason when I add a margin to one of the components the main component doesn't occupy the full height of the screen even though is "flex:1".
In this example the problem happens with the back button, if I use padding it works fine but I need to use margin so the user doesn't press the wrong component by mistake.
And the same problem happens in the rest of the app with different components that have a margin property.
Main component
body: {
flex: 1,
backgroundColor: 'green'
},
subHeader: {
backgroundColor: '#f4f4f4',
height: 95,
flexDirection: 'row'
},
vericalBar: {
width: 9
},
subHeaderDescription: {
flex: 1,
justifyContent: 'center',
marginLeft: 16
},
subHeaderLocation: {
color: '#2d2d2d',
fontSize: 14,
marginBottom: 10
},
subHeaderText: {
color: '#2d2d2d',
fontSize: 20
},
subHeaderStatus: {
alignItems: 'center',
justifyContent: 'center',
marginRight: 18
},
listDescription: {
backgroundColor: 'red',
flexGrow: 1,
paddingTop: 16,
paddingLeft: 20
},
taskDescription: {
color: '#2d2d2d',
fontSize: 16
}
<View style={localStyles.body}>
<Header navigation={this.props.navigation} />
<View style={localStyles.subHeader}>
<View style={[localStyles.vericalBar, { backgroundColor: task.color }]} />
<View style={localStyles.subHeaderDescription}>
<Text style={localStyles.subHeaderLocation}>{location.name}</Text>
<Text style={localStyles.subHeaderText}>{task.name}</Text>
</View>
{iconSelector(task)}
</View>
<BackButton navigation={this.props.navigation} />
<View style={localStyles.listDescription}>
<Text style={localStyles.taskDescription}>{task.description}</Text>
</View>
{returnStatus(task)}
<ReportIssueButton navigation={this.props.navigation} />
<Footer navigation={this.props.navigation} />
</View>
Back Button
<TouchableWithoutFeedback onPress={() => navigation.goBack()}>
<View style={localSytles.container}>
<Image style={{ width: 14, height: 14 }} source={require('../../Images/Back.png')} />
<Text style={localSytles.buttonText}>Back</Text>
</View>
</TouchableWithoutFeedback>
container: {
flexDirection: 'row',
height: 40,
paddingLeft: 20,
alignItems: 'center',
backgroundColor: 'blue'
},
buttonText: {
color: '#2d2d2d',
fontSize: 14,
marginLeft: 10
}

Answer 1

I've found the problem, the container "listDescription" had a "paddingTop: 16"
by removing that property it allowed the container to push the rest of the containers down.