React-native app header overlaps with the phone header - react-native

Question

I am using react-navigation to add custom header to my app. I am facing the same issue that is shown in the left image where the phone header overlaps with app's header. I tried to add SafeAreaView around my screen. But, it didn't make solve the problem.

Answer 1

it has two solutions. you can use
import React from 'react'
import {View,SafeAreaView, Text} from 'react-native'
const ConvertingFileScreen = () => {
return(
<SafeAreaView>
<Text>ConvertingFileScreen</Text>
</SafeAreaView>
)
}
export default ConvertingFileScreen;
or simply with giving a marginTop of StatusBar.height like this.
import React from 'react'
import {View,SafeAreaView,StatusBar, Text,} from 'react-native'
const ConvertingFileScreen = () => {
return(
<View style={{marginTop:StatusBar.currentHeight}}>
<Text>ConvertingFileScreen</Text>
</View>
)
}
export default ConvertingFileScreen;

Answer 2

You can use SafeAreaView or you can add some top spaces using useSafeAreaInsets from 'react-native-safe-area-context' It will solve the issue.
import React from 'react';
import { View,Text } from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
const ConvertingFileScreen = () => {
const { top } = useSafeAreaInsets();
return (
<View style={{marginTop: top}}>
<Text>HI React Native</Text>
</View>
)
}
Check for more details