refactor: drop safeAreaInsets option

Custom insets can be provided by wrapping the navigator in a SafeAreaProvider, so we don't need an option.

packages/stack/src/types.tsx

@@ -1,6 +1,5 @@
 import type * as React from 'react';
 import type { Animated, StyleProp, TextStyle, ViewStyle } from 'react-native';
-import type { EdgeInsets } from 'react-native-safe-area-context';
 import type {
   NavigationProp,
   ParamListBase,
@@ -149,10 +148,6 @@ export type StackHeaderProps = {
    * Layout of the screen.
    */
   layout: Layout;
-  /**
-   * Safe area insets to use in the header, e.g. to apply extra spacing for statusbar and notch.
-   */
-  insets: EdgeInsets;
   /**
    * Options for the back button.
    */
@@ -267,17 +262,6 @@ export type StackNavigationOptions = StackHeaderOptions &
      * Not supported on Web.
      */
     gestureVelocityImpact?: number;
-    /**
-     * Safe area insets for the screen. This is used to avoid elements like notch and status bar.
-     * By default, the device's safe area insets are automatically detected. You can override the behavior with this option.
-     * For example, to remove the extra spacing for status bar, pass `safeAreaInsets: { top: 0 }`.
-     */
-    safeAreaInsets?: {
-      top?: number;
-      right?: number;
-      bottom?: number;
-      left?: number;
-    };
     /**
      * Whether to detach the previous screen from the view hierarchy to save memory.
      * Set it to `false` if you need the previous screen to be seen through the active screen.

packages/stack/src/views/Header/Header.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { StackActions, useNavigationState } from '@react-navigation/native';
 import { getHeaderTitle, HeaderShownContext } from '@react-navigation/elements';
 
@@ -10,13 +11,14 @@ import type { StackHeaderProps } from '../../types';
 export default React.memo(function Header({
   back,
   layout,
-  insets,
   progress,
   options,
   route,
   navigation,
   styleInterpolator,
 }: StackHeaderProps) {
+  const insets = useSafeAreaInsets();
+
   let previousTitle;
 
   // The label for the left back button shows the title of the previous screen

packages/stack/src/views/Header/HeaderContainer.tsx

@@ -7,7 +7,6 @@ import {
   ParamListBase,
 } from '@react-navigation/native';
 import { HeaderBackContext, getHeaderTitle } from '@react-navigation/elements';
-import type { EdgeInsets } from 'react-native-safe-area-context';
 
 import Header from './Header';
 import {
@@ -28,7 +27,6 @@ import type {
 export type Props = {
   mode: 'float' | 'screen';
   layout: Layout;
-  insets: EdgeInsets;
   scenes: (Scene | undefined)[];
   getPreviousScene: (props: { route: Route<string> }) => Scene | undefined;
   getFocusedRoute: () => Route<string>;
@@ -45,7 +43,6 @@ export default function HeaderContainer({
   mode,
   scenes,
   layout,
-  insets,
   getPreviousScene,
   getFocusedRoute,
   onContentHeightChange,
@@ -105,7 +102,6 @@ export default function HeaderContainer({
 
         const props: StackHeaderProps = {
           layout,
-          insets,
           back: headerBack,
           progress: scene.progress,
           options: scene.descriptor.options,

packages/stack/src/views/Stack/CardContainer.tsx

@@ -274,7 +274,6 @@ function CardContainer({
             {renderHeader({
               mode: 'screen',
               layout,
-              insets,
               scenes: [previousScene, scene],
               getPreviousScene,
               getFocusedRoute,

packages/stack/src/views/Stack/CardStack.tsx

@@ -108,13 +108,8 @@ const getHeaderHeights = (
     const height =
       typeof style.height === 'number' ? style.height : previous[curr.key];
 
-    const safeAreaInsets = {
-      ...insets,
-      ...options.safeAreaInsets,
-    };
-
     const {
-      headerStatusBarHeight = isParentHeaderShown ? 0 : safeAreaInsets.top,
+      headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,
     } = options;
 
     acc[curr.key] =
@@ -420,13 +415,6 @@ export default class CardStack extends React.Component<Props, State> {
       };
     }
 
-    const {
-      top = insets.top,
-      right = insets.right,
-      bottom = insets.bottom,
-      left = insets.left,
-    } = focusedOptions.safeAreaInsets || {};
-
     let activeScreensLimit = 1;
 
     for (let i = scenes.length - 1; i >= 0; i--) {
@@ -465,7 +453,6 @@ export default class CardStack extends React.Component<Props, State> {
           {renderHeader({
             mode: 'float',
             layout,
-            insets: { top, right, bottom, left },
             scenes,
             getPreviousScene: this.getPreviousScene,
             getFocusedRoute: this.getFocusedRoute,
@@ -540,7 +527,6 @@ export default class CardStack extends React.Component<Props, State> {
             }
 
             const {
-              safeAreaInsets,
               headerShown = true,
               headerTransparent,
               cardShadowEnabled,
@@ -598,12 +584,10 @@ export default class CardStack extends React.Component<Props, State> {
               }
             }
 
-            const {
-              top: safeAreaInsetTop = insets.top,
-              right: safeAreaInsetRight = insets.right,
-              bottom: safeAreaInsetBottom = insets.bottom,
-              left: safeAreaInsetLeft = insets.left,
-            } = safeAreaInsets || {};
+            const safeAreaInsetTop = insets.top;
+            const safeAreaInsetRight = insets.right;
+            const safeAreaInsetBottom = insets.bottom;
+            const safeAreaInsetLeft = insets.left;
 
             const headerHeight =
               headerShown !== false ? headerHeights[route.key] : 0;