fix: Fix UI issue related to SafeAreaView top inset recalculation cp-7.73.0 (#28622)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

We're experiencing an issue where the SafeAreaView top padding gets
recalculated upon component mount, which results in bad UI. This PR
reduces the blast radius of the changes by consolidating all
SafeAreaView imports to `react-native-safe-area-context`. We then create
a shim for the module, which handles applying top insets via style
instead. Changes also includes:
- Consolidate safe area context mocks in test setup file
- Remove unused safe area mocks within test files
- Update snapshots

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry:

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I've included tests if applicable
- [ ] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Touches SafeAreaView usage across many screens, so incorrect
inset/edge handling could cause widespread layout regressions on
iOS/Android despite being mostly mechanical changes.
> 
> **Overview**
> Standardizes `SafeAreaView` usage by switching many components from
`react-native` to `react-native-safe-area-context` (including adding
explicit `edges` in a few places) to avoid incorrect top-inset
recalculation on mount.
> 
> Refactors navigation/header configuration for
`DeFiProtocolPositionDetails` by moving `setOptions` logic out of the
component and into `MainNavigator` options via
`getDeFiProtocolPositionDetailsNavbarOptions` (now explicitly sets
`headerShown: true`).
> 
> Cleans up tests by removing per-file safe-area mocks in favor of the
centralized jest mock in `testSetupView.js`, and updates
snapshots/expectations accordingly.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
f88a0cf. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: Cal-L

app/component-library/components-temp/HeaderRoot/HeaderRoot.test.tsx

@@ -9,10 +9,6 @@ import { IconName } from '@metamask/design-system-react-native';
 // Internal dependencies.
 import HeaderRoot from './HeaderRoot';
 
-jest.mock('react-native-safe-area-context', () => ({
-  useSafeAreaInsets: () => ({ top: 44, bottom: 34, left: 0, right: 0 }),
-}));
-
 const CONTAINER_TEST_ID = 'header-root-container';
 const LEFT_CHILDREN_TEST_ID = 'header-root-left-children';
 const END_ACCESSORY_TEST_ID = 'header-root-end-accessory';
@@ -250,7 +246,7 @@ describe('HeaderRoot', () => {
       expect(container.props.style).toEqual(
         expect.arrayContaining([
           expect.anything(),
-          expect.objectContaining({ marginTop: 44 }),
+          expect.objectContaining({ marginTop: expect.any(Number) }),
         ]),
       );
     });

app/component-library/components-temp/HeaderStandardAnimated/HeaderStandardAnimated.test.tsx

@@ -18,10 +18,6 @@ jest.mock('react-native-reanimated', () => {
   return Reanimated;
 });
 
-jest.mock('react-native-safe-area-context', () => ({
-  useSafeAreaInsets: () => ({ top: 44, bottom: 34, left: 0, right: 0 }),
-}));
-
 const CONTAINER_TEST_ID = 'header-standard-animated-container';
 const TITLE_TEST_ID = 'header-standard-animated-title';
 const SUBTITLE_TEST_ID = 'header-standard-animated-subtitle';

app/component-library/components-temp/MultichainAccounts/MultichainAddWalletActions/MultichainAddWalletActions.tsx

@@ -1,6 +1,6 @@
 // Third party dependencies.
 import React, { Fragment, useCallback, useMemo } from 'react';
-import { SafeAreaView } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { useNavigation } from '@react-navigation/native';
 
 // External dependencies.
@@ -85,7 +85,7 @@ const MultichainAddWalletActions = ({
   );
 
   return (
-    <SafeAreaView>
+    <SafeAreaView edges={['bottom']}>
       <Fragment>
         {actionConfigs.map(
           (config) =>

app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.test.tsx

@@ -21,20 +21,6 @@ jest.mock('react-native', () => {
   };
 });
 
-jest.mock('react-native-safe-area-context', () => {
-  // using disting digits for mock rects to make sure they are not mixed up
-  const inset = { top: 1, right: 2, bottom: 3, left: 4 };
-  const frame = { width: 5, height: 6, x: 7, y: 8 };
-  return {
-    SafeAreaProvider: jest.fn().mockImplementation(({ children }) => children),
-    SafeAreaConsumer: jest
-      .fn()
-      .mockImplementation(({ children }) => children(inset)),
-    useSafeAreaInsets: jest.fn().mockImplementation(() => inset),
-    useSafeAreaFrame: jest.fn().mockImplementation(() => frame),
-  };
-});
-
 jest.mock('@react-navigation/native', () => {
   const actualNav = jest.requireActual('@react-navigation/native');
   return {

app/component-library/components/Toast/Toast.test.tsx

@@ -25,10 +25,6 @@ jest.mock('react-native-reanimated', () => ({
 }));
 
 // Mock safe area context
-jest.mock('react-native-safe-area-context', () => ({
-  useSafeAreaInsets: () => ({ bottom: 0, top: 0, left: 0, right: 0 }),
-}));
-
 describe('Toast', () => {
   let toastRef: React.RefObject<ToastRef>;
 

app/components/Base/InfoModal.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { StyleSheet, View, TouchableOpacity, SafeAreaView } from 'react-native';
+import { StyleSheet, View, TouchableOpacity } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import Modal from 'react-native-modal';
 import IonicIcon from 'react-native-vector-icons/Ionicons';
 import Text from './Text';

app/components/Nav/App/App.test.tsx

@@ -453,21 +453,6 @@ describe('App', () => {
     };
 
     beforeAll(() => {
-      jest.mock('react-native-safe-area-context', () => {
-        const inset = { top: 0, right: 0, bottom: 0, left: 0 };
-        const frame = { width: 0, height: 0, x: 0, y: 0 };
-        return {
-          SafeAreaProvider: jest
-            .fn()
-            .mockImplementation(({ children }) => children),
-          SafeAreaConsumer: jest
-            .fn()
-            .mockImplementation(({ children }) => children(inset)),
-          useSafeAreaInsets: jest.fn().mockImplementation(() => inset),
-          useSafeAreaFrame: jest.fn().mockImplementation(() => frame),
-        };
-      });
-
       // Mock the storage item to simulate existing user and bypass onboarding
       jest.spyOn(StorageWrapper, 'getItem').mockImplementation(async (key) => {
         if (key === EXISTING_USER) {

app/components/Nav/Main/MainNavigator.js

@@ -142,6 +142,7 @@ import CampaignTourStepView from '../../UI/Rewards/Views/CampaignTourStepView';
 import { selectRewardsSubscriptionId } from '../../../selectors/rewards';
 import SitesFullView from '../../Views/SitesFullView/SitesFullView';
 import { TokenDetails } from '../../UI/TokenDetails/Views/TokenDetails';
+import { getDeFiProtocolPositionDetailsNavbarOptions } from '../../UI/Navbar';
 
 const Stack = createStackNavigator();
 const Tab = createBottomTabNavigator();
@@ -1310,7 +1311,10 @@ const MainNavigator = () => {
       <Stack.Screen
         name="DeFiProtocolPositionDetails"
         component={DeFiProtocolPositionDetails}
-        options={{ headerShown: true, ...slideFromRightAnimation }}
+        options={({ navigation }) => ({
+          ...slideFromRightAnimation,
+          ...getDeFiProtocolPositionDetailsNavbarOptions(navigation),
+        })}
       />
       {
         ///: BEGIN:ONLY_INCLUDE_IF(sample-feature)

app/components/Nav/Main/__snapshots__/MainNavigator.test.tsx.snap

@@ -387,13 +387,7 @@ exports[`MainNavigator Tab Bar Visibility hides tab bar when browser is active 1
   <Screen
     component={[Function]}
     name="DeFiProtocolPositionDetails"
-    options={
-      {
-        "animationEnabled": true,
-        "cardStyleInterpolator": [Function],
-        "headerShown": true,
-      }
-    }
+    options={[Function]}
   />
   <Screen
     component={[Function]}
@@ -816,13 +810,7 @@ exports[`MainNavigator Tab Bar Visibility shows tab bar when not in browser 1`]
   <Screen
     component={[Function]}
     name="DeFiProtocolPositionDetails"
-    options={
-      {
-        "animationEnabled": true,
-        "cardStyleInterpolator": [Function],
-        "headerShown": true,
-      }
-    }
+    options={[Function]}
   />
   <Screen
     component={[Function]}
@@ -1245,13 +1233,7 @@ exports[`MainNavigator matches rendered snapshot 1`] = `
   <Screen
     component={[Function]}
     name="DeFiProtocolPositionDetails"
-    options={
-      {
-        "animationEnabled": true,
-        "cardStyleInterpolator": [Function],
-        "headerShown": true,
-      }
-    }
+    options={[Function]}
   />
   <Screen
     component={[Function]}

app/components/UI/AccountNetworkIndicator/__snapshots__/AccountNetworkIndicator.test.tsx.snap

@@ -8,8 +8,7 @@ exports[`AccountNetworkIndicator should render correctly 1`] = `
     }
   }
 >
-  <RNCSafeAreaProvider
-    onInsetsChange={[Function]}
+  <View
     style={
       [
         {
@@ -440,6 +439,6 @@ exports[`AccountNetworkIndicator should render correctly 1`] = `
         </RNSScreen>
       </RNSScreenContainer>
     </View>
-  </RNCSafeAreaProvider>
+  </View>
 </View>
 `;