View is not full screen React-Native - react-native

Question

I'm starting to work with React-Native recently, Just try some simple screen but I faced with a problem when my app shown on my device (Installing APK 'app-debug.apk' on 'Redmi 5 Plus - 7.1.2') that The UI has strange black in center between status bar and content.
Please see the image :
App has strange black in center between status bar and content
import React, { Component } from 'react';
import {
View, StyleSheet, StatusBar, Text
} from 'react-native';
import Main from './src/components/Main';
type Props = {};
export default class App extends Component<Props> {
constructor(props) {
super(props);
this.state = {
titleText: "Bird's Nest",
bodyText: 'This is not really a bird nest.'
};
}
render() {
return (
<View style={styles.container}>
<Text style={styles.baseText}>
<Text style={styles.titleText} onPress={this.onPressTitle}>
{this.state.titleText}{'\n'}{'\n'}
</Text>
<Text numberOfLines={5}>
{this.state.bodyText}
</Text>
</Text>
{/* <Main /> */}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
baseText: {
fontFamily: 'Cochin',
},
titleText: {
fontSize: 20,
fontWeight: 'bold',
},
});
I try to hide status bar but the strange "Black Header" still there.
Result :Hiding StatusBar
`<View style={styles.container}>
<StatusBar
hidden={true}
backgroundColor="blue"
barStyle="light-content"
/>
<Text style={styles.baseText}>
<Text style={styles.titleText} onPress={this.onPressTitle}>
{this.state.titleText}{'\n'}{'\n'}
</Text>
<Text numberOfLines={5}>
{this.state.bodyText}
</Text>
</Text>
{/* <Main /> */}
</View>`

Answer 1

The problem is that my android phone screen was in special ratio (Xiaomi Redmi 5 plus), then I need to go to the setting area and grant Full screen permission to my app and it's working. Hope this can help the other.