React Native - Strange header at top of android virtual device - react-native

Question

I am just beginning to start developing in react native, after the struggle that was getting my dev environment setup; every app that I start has this strange large gray header. There is nothing in my code that signals it should be there, even removing everything leaves it there. Also outside of the app it is not present ie) in the playstore on the virtual device there is no gray header. Any tips or resources would be helpful!
import React from 'react';
import Header from './components/Header';
import { Text, View, StyleSheet, Platform, StatusBar } from 'react-native';
const App = () => {
return (
<>
<Header />
<View style={styles.container}>
<Text>Help</Text>
</View>
</>
);
};
const styles = StyleSheet.create({
container: {
padding: 0,
margin: 0,
paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
backgroundColor: 'lightgray',
},
});
export default App;
import React from 'react';
import { View, StyleSheet } from 'react-native';
const Header = () => {
return <View style={styles.container}></View>;
};
const styles = StyleSheet.create({
container: {
height: 20,
padding: 0,
margin: 0,
backgroundColor: 'dodgerblue',
},
});
export default Header;

Answer 1

Try to add this to your theme in styles.xml :
<item name="android:windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
or directly in your Manifest by setting activity like that :
<activity android:theme="#android:style/Theme.NoTitleBar.Fullscreen">