Browser upgrades follow-up

src/components/DappBrowser/BrowserContext.tsx

@@ -1,5 +1,6 @@
 import React, { createContext, useCallback, useContext, useRef } from 'react';
 import Animated, {
+  runOnJS,
   runOnUI,
   useAnimatedReaction,
   useAnimatedRef,
@@ -10,7 +11,9 @@ import Animated, {
 } from 'react-native-reanimated';
 import ViewShot from 'react-native-view-shot';
 import { SPRING_CONFIGS, TIMING_CONFIGS } from '@/components/animations/animationConfigs';
+import Routes from '@/navigation/routesNames';
 import { useBrowserStore } from '@/state/browser/browserStore';
+import { useNavigationStore } from '@/state/navigation/navigationStore';
 import { EXTRA_WEBVIEW_HEIGHT } from './Dimensions';
 import { RAINBOW_HOME } from './constants';
 import { useGestureManager } from './hooks/useGestureManager';
@@ -69,6 +72,7 @@ export const BrowserContextProvider = ({ children }: { children: React.ReactNode
   const { activeTabRef, extraWebViewHeight, goBack, goForward, shouldCollapseBottomBar, tabViewProgress } = useBrowserTabBarContext();
 
   const activeTabId = useSharedValue(useBrowserStore.getState().getActiveTabId());
+  const animatedActiveSwipeRoute = useNavigationStore(state => state.animatedActiveSwipeRoute);
   const animatedActiveTabIndex = useSharedValue(useBrowserStore.getState().activeTabIndex);
   const animatedScreenshotData = useSharedValue<AnimatedScreenshotData>({});
   const animatedTabUrls = useSharedValue<AnimatedTabUrls>(useBrowserStore.getState().persistedTabUrls);
@@ -152,14 +156,40 @@ export const BrowserContextProvider = ({ children }: { children: React.ReactNode
       }
 
       runOnUI(() => {
-        'worklet';
         const tabIdToUse = tabId || activeTabId.value;
         animatedTabUrls.modify(urls => ({ ...urls, [tabIdToUse]: normalizeUrlWorklet(url) }));
       })();
     },
     [activeTabId, activeTabInfo, animatedTabUrls, goToPage, refreshPage]
   );
 
+  const setWebViewHandlersEnabled = useCallback(
+    (enabled: boolean) => {
+      activeTabRef.current?.setActive(enabled);
+    },
+    [activeTabRef]
+  );
+
+  // Enables or disables WebView JS handlers when navigating to or away from the browser
+  // tab, and ensures the tab bar is always revealed when leaving the browser tab
+  useAnimatedReaction(
+    () => animatedActiveSwipeRoute.value === Routes.DAPP_BROWSER_SCREEN,
+    (isOnBrowserTab, prev) => {
+      if (activeTabInfo.value.isOnHomepage) return;
+
+      const browserBecameActive = isOnBrowserTab && prev === false;
+      const browserBecameInactive = !isOnBrowserTab && prev;
+
+      if (browserBecameActive) {
+        runOnJS(setWebViewHandlersEnabled)(true);
+      } else if (browserBecameInactive) {
+        runOnJS(setWebViewHandlersEnabled)(false);
+        if (shouldCollapseBottomBar.value) shouldCollapseBottomBar.value = false;
+      }
+    },
+    []
+  );
+
   return (
     <BrowserContext.Provider
       value={{

src/components/DappBrowser/hooks/useGestureManager.ts

@@ -1,9 +1,7 @@
 import { GestureResponderEvent, NativeSyntheticEvent } from 'react-native';
 import { runOnJS, useAnimatedReaction, useDerivedValue, useSharedValue } from 'react-native-reanimated';
 import { useCallback, useRef } from 'react';
-import Routes from '@/navigation/routesNames';
 import { useBrowserStore } from '@/state/browser/browserStore';
-import { useNavigationStore } from '@/state/navigation/navigationStore';
 import { clamp } from '@/__swaps__/utils/swaps';
 import { EXTRA_WEBVIEW_HEIGHT, GROW_WEBVIEW_THRESHOLD, SHRINK_WEBVIEW_THRESHOLD, WEBVIEW_HEIGHT } from '../Dimensions';
 import { ActiveTabCloseGestures, BrowserContextType, GestureManagerState, TabViewGestureStates, WebViewScrollEvent } from '../types';
@@ -35,8 +33,6 @@ export function useGestureManager({
   const tabViewGestureProgress = useSharedValue(0);
   const tabViewGestureState = useSharedValue(TabViewGestureStates.INACTIVE);
 
-  const activeSwipeRoute = useNavigationStore(state => state.animatedActiveSwipeRoute);
-
   const scrollPositionRef = useRef<number | undefined>(undefined);
   const startScrollPositionRef = useRef<number | undefined>(undefined);
   const touchPositionYRef = useRef<number | undefined>(undefined);
@@ -128,18 +124,6 @@ export function useGestureManager({
     []
   );
 
-  // Ensures the tab bar never remains collapsed when navigating away from the browser screen
-  useAnimatedReaction(
-    () => ({ isOnBrowserTab: activeSwipeRoute.value === Routes.DAPP_BROWSER_SCREEN }),
-    (current, prev) => {
-      const resetForInactiveBrowserTab = !current.isOnBrowserTab && prev?.isOnBrowserTab && shouldCollapseBottomBar.value;
-      if (resetForInactiveBrowserTab) {
-        shouldCollapseBottomBar.value = false;
-      }
-    },
-    []
-  );
-
   // Manages setting the last active homepage tab, which is used to determine which homepage should allow reordering favorites
   useAnimatedReaction(
     () => ({