[native-stack] Header is out of the safe area on Android

Moved from react-navigation/react-navigation#6797. Originally opened by @enheit

---

Current Behavior

The header navigation is rendered beyond safe area on Android devices.

Expected Behavior

The header should be rendered in ‘safe area’.

(this is how @react-navigation/stack works)

How to reproduce

Create a screen by using Screen.Stack from @react-navigation/native-stack

Your Environment

software	version
iOS or Android	Android (v9)
@react-navigation/native	^5.0.0-alpha.33
@react-navigation/native-stack	^5.0.0
react-native-screens	^2.0.0-beta.2
react-native	~0.61.4
expo	~36.0.0
node	v12.14.1
npm or yarn	6.13.4

[Erc93]

@WoLewicki I just realised that I might be running into a separate but similar issue. I seem to be getting the problem when using import { createNativeStackNavigator } from "react-native-screens/native-stack"; to create my stack. Using the stack navigator from react-navigation seems to fix my issue.

Here is an example: https://snack.expo.io/HqDtTeyzQ

[dougg0k]

I found a temp solution for Android while using Expo. In the Screen options, when declaring your header (left, center and right), you can add height and marginTop to it and that can help, maybe not in all cases though.

headerCenter: (props) => (
    <Text
      style={{
        color: "white",
        fontSize: 18,
        height: 40,
        marginTop: 30,
      }}
    >
      Title
    </Text>
  ),