Cannot get rid of white section at the top of iPhone X emulator - react-native

Question

I just started learning and building an app with react native. Never used xCode before but am using the iPhone X emulator. The login and register screens render fine by themselves. But as soon as I use react navigator, I get this white section at the top and I cannot get rid of it. Please help.
I added SafeAreaView and played around with the various settings but that does not help.
Here is App.js
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { createAppContainer, createStackNavigator, SafeAreaView } from 'react-navigation';
import LoginScreen from './components/pages/LoginScreen.js'
import RegisterScreen from './components/pages/RegisterScreen.js'
export default class App extends Component<Props> {
render() {
return (
<SafeAreaView style={styles.safeArea} forceInset={{ top: 'never' }}>
<AppStackNavigator style={styles.container}/>
</SafeAreaView>
);
}
}
const AppStackNavigator = createAppContainer(createStackNavigator ({
Login: LoginScreen,
Register: RegisterScreen
}))
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#212121',
marginVertical: 40,
},
safeArea: {
flex: 1,
backgroundColor: '#212121',
}
});

Answer 1

Try this:
const AppStackNavigator = createAppContainer(
createStackNavigator({
Login: {
screen: LoginScreen,
navigationOptions: {
header: null,
},
},
Register: RegisterScreen,
}),
);
-
import { getStatusBarHeight } from 'react-native-iphone-x-helper';
class LoginScreen extends React.Component {
render() {
<View style={{ flex: 1, backgroundColor: PRIMARY_COLOR }}>
<SafeAreaView style={{ flex: 1, marginTop: -getStatusBarHeight() }}>
{/* Content */}
</SafeAreaView>
</View>;
}
}

Answer 2

Try react-native-iphone-x-helper