fix: headerHeight on phones with dynamic island (#11338)

**Motivation**

The headerHeight is currently 5px too tall on phones with Dynamic
Island.
(As the statusbar became taller)
Also fixes incorrect height returned from the `useHeaderHeight()` hook:
#10989

<img width="452" alt="Scherm­afbeelding 2023-04-20 om 11 05 13"
src="https://user-images.githubusercontent.com/12894112/233316980-f9b0d7fe-d0fe-445c-9340-fdd3a4e8be8e.png">

<img width="460" alt="Scherm­afbeelding 2023-04-20 om 11 05 22"
src="https://user-images.githubusercontent.com/12894112/233317065-e966e1ef-fe10-4723-9a91-bf4bccb4d526.png">

**Test plan**

Compare the headers between using the Stack Navigator and the Native
Stack navigator (on an iPhone 14 simulator). You will notice the
headerHeight is 5px larger on the (non-native) Stack Navigator.

---------

Co-authored-by: Kacper Kapuściak <39658211+kacperkapusciak@users.noreply.github.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

packages/elements/src/Header/Header.tsx

@@ -48,6 +48,10 @@ export default function Header(props: Props) {
 
   const isParentHeaderShown = React.useContext(HeaderShownContext);
 
+  // On models with Dynamic Island the status bar height is smaller than the safe area top inset.
+  const hasDynamicIsland = Platform.OS === 'ios' && insets.top > 50;
+  const statusBarHeight = hasDynamicIsland ? insets.top - 5 : insets.top;
+
   const {
     layout = frame,
     modal = false,
@@ -73,7 +77,7 @@ export default function Header(props: Props) {
     headerShadowVisible,
     headerPressColor,
     headerPressOpacity,
-    headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,
+    headerStatusBarHeight = isParentHeaderShown ? 0 : statusBarHeight,
   } = props;
 
   const defaultHeight = getDefaultHeaderHeight(

packages/native-stack/src/views/NativeStackView.native.tsx

@@ -220,9 +220,17 @@ const SceneView = ({
       ? 0
       : insets.top;
 
+  // On models with Dynamic Island the status bar height is smaller than the safe area top inset.
+  const hasDynamicIsland = Platform.OS === 'ios' && topInset > 50;
+  const statusBarHeight = hasDynamicIsland ? topInset - 5 : topInset;
+
   const { preventedRoutes } = usePreventRemoveContext();
 
-  const defaultHeaderHeight = getDefaultHeaderHeight(frame, isModal, topInset);
+  const defaultHeaderHeight = getDefaultHeaderHeight(
+    frame,
+    isModal,
+    statusBarHeight
+  );
 
   const [customHeaderHeight, setCustomHeaderHeight] =
     React.useState(defaultHeaderHeight);