From 8dc1c9fcfbbcfa892deeee6959f7f7088df7e1cf Mon Sep 17 00:00:00 2001
From: Vince Howard <vincenguyenhoward@gmail.com>
Date: Wed, 8 Jan 2025 09:01:56 -0700
Subject: [PATCH] fix(12849): alert toast blocking tab navigation (#12853)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## **Description**

We have received several complaints about our toast blocking our tab
navigation slowing down user experience


## **Related issues**

Fixes:
[#12849](https://github.com/MetaMask/metamask-mobile/issues/12849)

## **Manual testing steps**

1. On the wallet home page, click on the network selector on the top
left
2. Click on any network
3. The toast should pop up

## **Screenshots/Recordings**
### Android
| Before  | After |
|:---:|:---:|

|![before](https://github.com/user-attachments/assets/d4d28558-3e94-49ce-8a76-e2a0258d5e21)|![after](https://github.com/user-attachments/assets/e439f189-f4fc-4db9-b167-b17405e35205)|

### iOS
| Before  | After |
|:---:|:---:|

|![before](https://github.com/user-attachments/assets/bb0bb5ad-f5e1-4ffa-82bb-80454f2eb09c)|![after](https://github.com/user-attachments/assets/1ec31b56-2e40-4897-abfd-58fb4a573b69)|

### **Before**

NA

### **After**

NA

## **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.
---
 .../components/Navigation/TabBar/TabBar.constants.ts          | 4 +++-
 .../components/Navigation/TabBar/TabBar.styles.ts             | 4 ++--
 app/component-library/components/Toast/Toast.tsx              | 3 ++-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/component-library/components/Navigation/TabBar/TabBar.constants.ts b/app/component-library/components/Navigation/TabBar/TabBar.constants.ts
index 38e96d6d39e..3b389a7b7b2 100644
--- a/app/component-library/components/Navigation/TabBar/TabBar.constants.ts
+++ b/app/component-library/components/Navigation/TabBar/TabBar.constants.ts
@@ -2,7 +2,7 @@
 
 // Third party dependencies.
 import { IconName } from '../../Icons/Icon';
-
+import Device from '../../../../util/device';
 // Internal dependencies.
 import { IconByTabBarIconKey, TabBarIconKey } from './TabBar.types';
 
@@ -13,3 +13,5 @@ export const ICON_BY_TAB_BAR_ICON_KEY: IconByTabBarIconKey = {
   [TabBarIconKey.Activity]: IconName.Activity,
   [TabBarIconKey.Setting]: IconName.Setting,
 };
+
+export const TAB_BAR_HEIGHT = Device.isAndroid() ? 62 : 48;
diff --git a/app/component-library/components/Navigation/TabBar/TabBar.styles.ts b/app/component-library/components/Navigation/TabBar/TabBar.styles.ts
index f74fed8b87c..bbfbad0763b 100644
--- a/app/component-library/components/Navigation/TabBar/TabBar.styles.ts
+++ b/app/component-library/components/Navigation/TabBar/TabBar.styles.ts
@@ -7,7 +7,7 @@ import Device from '../../../../util/device';
 
 // Internal dependencies.
 import { TabBarStyleSheetVars } from './TabBar.types';
-
+import { TAB_BAR_HEIGHT } from './TabBar.constants';
 /**
  * Style sheet function for TabBar component.
  *
@@ -39,7 +39,7 @@ const styleSheet = (params: { vars: TabBarStyleSheetVars; theme: Theme }) => {
     base: {
       flexDirection: 'row',
       alignItems: 'center',
-      height: Device.isAndroid() ? 62 : 48,
+      height: TAB_BAR_HEIGHT,
       paddingHorizontal: 16,
       marginBottom: bottomInset,
       backgroundColor: colors.background.default,
diff --git a/app/component-library/components/Toast/Toast.tsx b/app/component-library/components/Toast/Toast.tsx
index 170b7543897..8c23d38b46d 100644
--- a/app/component-library/components/Toast/Toast.tsx
+++ b/app/component-library/components/Toast/Toast.tsx
@@ -40,6 +40,7 @@ import {
 import styles from './Toast.styles';
 import { ToastSelectorsIDs } from '../../../../e2e/selectors/wallet/ToastModal.selectors';
 import { ButtonProps } from '../Buttons/Button/Button.types';
+import { TAB_BAR_HEIGHT } from '../Navigation/TabBar/TabBar.constants';
 
 const visibilityDuration = 2750;
 const animationDuration = 250;
@@ -53,7 +54,7 @@ const Toast = forwardRef((_, ref: React.ForwardedRef<ToastRef>) => {
   const { bottom: bottomNotchSpacing } = useSafeAreaInsets();
   const translateYProgress = useSharedValue(screenHeight);
   const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{ translateY: translateYProgress.value }],
+    transform: [{ translateY: translateYProgress.value - TAB_BAR_HEIGHT }],
   }));
   const baseStyle: StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>> =
     useMemo(