chore(runway): cherry-pick fix: Fix UI issue related to SafeAreaView top inset recalculation

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

@@ -456,21 +456,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

@@ -141,6 +141,7 @@ import EndOfSeasonClaimBottomSheet from '../../UI/Rewards/components/EndOfSeason
 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();
@@ -1300,7 +1301,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

@@ -385,13 +385,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]}
@@ -803,13 +797,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]}
@@ -1221,13 +1209,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>
 `;

app/components/UI/AccountRightButton/__snapshots__/index.test.tsx.snap

@@ -8,8 +8,7 @@ exports[`AccountRightButton should render account avatar when selectedAddress is
     }
   }
 >
-  <RNCSafeAreaProvider
-    onInsetsChange={[Function]}
+  <View
     style={
       [
         {
@@ -387,7 +386,7 @@ exports[`AccountRightButton should render account avatar when selectedAddress is
         </RNSScreen>
       </RNSScreenContainer>
     </View>
-  </RNCSafeAreaProvider>
+  </View>
 </View>
 `;
 
@@ -399,8 +398,7 @@ exports[`AccountRightButton should render correct network name for non-EVM netwo
     }
   }
 >
-  <RNCSafeAreaProvider
-    onInsetsChange={[Function]}
+  <View
     style={
       [
         {
@@ -784,7 +782,7 @@ exports[`AccountRightButton should render correct network name for non-EVM netwo
         </RNSScreen>
       </RNSScreenContainer>
     </View>
-  </RNCSafeAreaProvider>
+  </View>
 </View>
 `;
 
@@ -796,8 +794,7 @@ exports[`AccountRightButton should render correctly 1`] = `
     }
   }
 >
-  <RNCSafeAreaProvider
-    onInsetsChange={[Function]}
+  <View
     style={
       [
         {
@@ -1175,7 +1172,7 @@ exports[`AccountRightButton should render correctly 1`] = `
         </RNSScreen>
       </RNSScreenContainer>
     </View>
-  </RNCSafeAreaProvider>
+  </View>
 </View>
 `;
 
@@ -1187,8 +1184,7 @@ exports[`AccountRightButton should render correctly when a EVM network is select
     }
   }
 >
-  <RNCSafeAreaProvider
-    onInsetsChange={[Function]}
+  <View
     style={
       [
         {
@@ -1566,7 +1562,7 @@ exports[`AccountRightButton should render correctly when a EVM network is select
         </RNSScreen>
       </RNSScreenContainer>
     </View>
-  </RNCSafeAreaProvider>
+  </View>
 </View>
 `;
 
@@ -1578,8 +1574,7 @@ exports[`AccountRightButton should render correctly when a non-EVM network is se
     }
   }
 >
-  <RNCSafeAreaProvider
-    onInsetsChange={[Function]}
+  <View
     style={
       [
         {
@@ -1957,7 +1952,7 @@ exports[`AccountRightButton should render correctly when a non-EVM network is se
         </RNSScreen>
       </RNSScreenContainer>
     </View>
-  </RNCSafeAreaProvider>
+  </View>
 </View>
 `;
 
@@ -1969,8 +1964,7 @@ exports[`AccountRightButton should render network avatar when selectedAddress is
     }
   }
 >
-  <RNCSafeAreaProvider
-    onInsetsChange={[Function]}
+  <View
     style={
       [
         {
@@ -2354,7 +2348,7 @@ exports[`AccountRightButton should render network avatar when selectedAddress is
         </RNSScreen>
       </RNSScreenContainer>
     </View>
-  </RNCSafeAreaProvider>
+  </View>
 </View>
 `;
 
@@ -2366,8 +2360,7 @@ exports[`AccountRightButton should render network avatar when selectedAddress is
     }
   }
 >
-  <RNCSafeAreaProvider
-    onInsetsChange={[Function]}
+  <View
     style={
       [
         {
@@ -2751,6 +2744,6 @@ exports[`AccountRightButton should render network avatar when selectedAddress is
         </RNSScreen>
       </RNSScreenContainer>
     </View>
-  </RNCSafeAreaProvider>
+  </View>
 </View>
 `;

app/components/UI/BasicFunctionality/BasicFunctionalityModal/BasicFunctionalityModal.test.js

@@ -32,19 +32,6 @@ const mockInitialState = {
   },
 };
 
-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),
-  };
-});
-
 jest.mock('@react-navigation/native', () => {
   const actualReactNavigation = jest.requireActual('@react-navigation/native');
   return {

app/components/UI/Bridge/components/ApprovalText/__snapshots__/ApprovalTooltip.test.tsx.snap

@@ -8,8 +8,7 @@ exports[`ApprovalTooltip renders correctly with given props 1`] = `
     }
   }
 >
-  <RNCSafeAreaProvider
-    onInsetsChange={[Function]}
+  <View
     style={
       [
         {
@@ -377,6 +376,6 @@ exports[`ApprovalTooltip renders correctly with given props 1`] = `
         </RNSScreen>
       </RNSScreenContainer>
     </View>
-  </RNCSafeAreaProvider>
+  </View>
 </View>
 `;

app/components/UI/Bridge/components/BlockaidModal/BlockaidModal.test.tsx

@@ -19,12 +19,6 @@ jest.mock('@react-navigation/native', () => ({
 }));
 
 // Mock safe area context (required for BottomSheet)
-jest.mock('react-native-safe-area-context', () => ({
-  useSafeAreaInsets: () => ({ top: 0, right: 0, bottom: 0, left: 0 }),
-  useSafeAreaFrame: () => ({ x: 0, y: 0, width: 390, height: 844 }),
-  SafeAreaProvider: ({ children }: { children: React.ReactNode }) => children,
-}));
-
 // Mock strings
 jest.mock('../../../../../../locales/i18n', () => ({
   strings: jest.fn((key: string) => {

app/components/UI/Bridge/components/BridgeTokenSelector/BridgeTokenSelector.test.tsx

@@ -457,11 +457,6 @@ jest.mock('../TokenSelectorItem', () => ({
   },
 }));
 
-jest.mock('react-native-safe-area-context', () => ({
-  SafeAreaView: ({ children }: { children: React.ReactNode }) => (
-    <>{children}</>
-  ),
-}));
 jest.mock('react-native-gesture-handler', () => {
   const { FlatList, ScrollView } = jest.requireActual('react-native');
   return { FlatList, ScrollView };