CLOSED White space between header and image background React-Native - reactjs

Question

I have a little problem in my react-native mobile app.
There is a Space between the header and the Background Image.
How can I remove it, like the Background Image is next to the Header ?
Image
App.js
import AppNavigator from './navigation/AppNavigator';
import Header from './components/Header';
export default function App(props) {
const [isLoadingComplete, setLoadingComplete] = useState(false);
if (!isLoadingComplete && !props.skipLoadingScreen) {
return (
<AppLoading
startAsync={loadResourcesAsync}
onError={handleLoadingError}
onFinish={() => handleFinishLoading(setLoadingComplete)}
/>
);
} else {
return (
<View style={styles.container}>
<Header title="Header" />
{Platform.OS === 'ios' && <StatusBar backgroundColor="#C2185B" barStyle="default" />}
<AppNavigator />
</View>
);
}
}
Header.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const Header = props => {
return (
<View style={styles.header}>
<Text style={styles.headerTitle}>MyStadium</Text>
</View>
)
};
const styles = StyleSheet.create({
header: {
width: '100%',
height:90,
backgroundColor: 'black',
paddingTop: 36,
alignItems: 'center',
justifyContent:'center',
},
headerTitle: {
color:'white',
fontSize: 18
}
});
export default Header;
And The AppNavigator is the base file in the tabs pre-config react-native project.
Thanks for your help

Answer 1

remove paddingTop: 36 from container styles
like below
const styles = StyleSheet.create({
header: {
width: '100%',
height: 90,
backgroundColor: 'black',
alignItems: 'center',
justifyContent:'center',
},
headerTitle: {
color:'white',
fontSize: 18
}
});

Answer 2

Ok I got this !
Just have to remove my Header.js and use de navigationOptions like this
HomeScreen.navigationOptions = {
title: 'MyStadium',
headerStyle: {
backgroundColor: 'black'
},
headerTintColor: 'white',
headerTitleStyle: {
fontWeight: 'bold'
}
};