Browser upgrades follow-up (#6300)

* Enable/disable WebView JS handlers when navigating to or away from the browser tab, remove unnecessary 'worklet' directive

* Patch Reanimated to cache all worklets

This avoids repeated serialization of worklets, which based on thorough testing of the app, can be safely cached — it noticeably smooths out gesture-driven interactions and should speed up anything that involves frequently/repeatedly called worklets

* [Android] Fix duplicate tab button context menu

If you tapped around the edge of the tab button, you'd see a different context menu pop up than if you long pressed — this removes the duplicate menu

* Fix Podfile.lock

ios/Podfile.lock

@@ -1751,7 +1751,7 @@ PODS:
     - React-Core
   - RNReactNativeHapticFeedback (2.2.0):
     - React-Core
-  - RNReanimated (3.16.2):
+  - RNReanimated (3.16.3):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1771,10 +1771,10 @@ PODS:
     - React-utils
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNReanimated/reanimated (= 3.16.2)
-    - RNReanimated/worklets (= 3.16.2)
+    - RNReanimated/reanimated (= 3.16.3)
+    - RNReanimated/worklets (= 3.16.3)
     - Yoga
-  - RNReanimated/reanimated (3.16.2):
+  - RNReanimated/reanimated (3.16.3):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1794,9 +1794,9 @@ PODS:
     - React-utils
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNReanimated/reanimated/apple (= 3.16.2)
+    - RNReanimated/reanimated/apple (= 3.16.3)
     - Yoga
-  - RNReanimated/reanimated/apple (3.16.2):
+  - RNReanimated/reanimated/apple (3.16.3):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1817,7 +1817,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNReanimated/worklets (3.16.2):
+  - RNReanimated/worklets (3.16.3):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2574,7 +2574,7 @@ SPEC CHECKSUMS:
   RNOS: 31db6fa4a197d179afbba9e6b4d28d450a7f250b
   RNPermissions: 4e3714e18afe7141d000beae3755e5b5fb2f5e05
   RNReactNativeHapticFeedback: ec56a5f81c3941206fd85625fa669ffc7b4545f9
-  RNReanimated: 30ed0985f2b8dc16a76c23362cabe8dd5166b64f
+  RNReanimated: e1c250aeb93d6738eaf51e3d93871873a0c41b81
   RNRudderSdk: 805d4b7064714f3295bf5f152d3812cc67f67a93
   RNScreens: 6b641f232990a9d505a6d139fd18c3c759c9d290
   RNSentry: 6a5d9f48370070c1d4697dfe74044b7f45512420

package.json

@@ -254,7 +254,7 @@
     "react-native-quick-md5": "3.0.6",
     "react-native-radial-gradient": "rainbow-me/react-native-radial-gradient#b99ab59d27dba70364ef516bd5193c37657ba95c",
     "react-native-randombytes": "3.5.3",
-    "react-native-reanimated": "3.16.2",
+    "react-native-reanimated": "3.16.3",
     "react-native-redash": "16.3.0",
     "react-native-restart": "0.0.22",
     "react-native-safe-area-context": "4.14.0",

patches/react-native-reanimated+3.16.2.patch → patches/react-native-reanimated+3.16.3.patch

@@ -1,3 +1,21 @@
+diff --git a/node_modules/react-native-reanimated/Common/cpp/worklets/SharedItems/Shareables.cpp b/node_modules/react-native-reanimated/Common/cpp/worklets/SharedItems/Shareables.cpp
+index 4087065..f22bd06 100644
+--- a/node_modules/react-native-reanimated/Common/cpp/worklets/SharedItems/Shareables.cpp
++++ b/node_modules/react-native-reanimated/Common/cpp/worklets/SharedItems/Shareables.cpp
+@@ -47,7 +47,12 @@ jsi::Value makeShareableClone(
+   if (value.isObject()) {
+     auto object = value.asObject(rt);
+     if (!object.getProperty(rt, "__workletHash").isUndefined()) {
+-      shareable = std::make_shared<ShareableWorklet>(rt, object);
++      if (shouldRetainRemote.isBool() && shouldRetainRemote.getBool()) {
++        shareable =
++            std::make_shared<RetainingShareable<ShareableWorklet>>(rt, object);
++      } else {
++        shareable = std::make_shared<ShareableWorklet>(rt, object);
++      }
+     } else if (!object.getProperty(rt, "__init").isUndefined()) {
+       shareable = std::make_shared<ShareableHandle>(rt, object);
+     } else if (object.isFunction(rt)) {
 diff --git a/node_modules/react-native-reanimated/apple/reanimated/apple/REANodesManager.mm b/node_modules/react-native-reanimated/apple/reanimated/apple/REANodesManager.mm
 index ec86d08..b043442 100644
 --- a/node_modules/react-native-reanimated/apple/reanimated/apple/REANodesManager.mm
@@ -42,3 +60,32 @@ index 39c77a1..8bcbc7e 100644
      textShadowRadius: true,
      textShadowOffset: true,
      letterSpacing: true,
+diff --git a/node_modules/react-native-reanimated/src/shareables.ts b/node_modules/react-native-reanimated/src/shareables.ts
+index 44e961f..1b57980 100644
+--- a/node_modules/react-native-reanimated/src/shareables.ts
++++ b/node_modules/react-native-reanimated/src/shareables.ts
+@@ -128,6 +128,7 @@ export function makeShareableCloneRecursive<T>(
+   const type = typeof value;
+   const isTypeObject = type === 'object';
+   const isTypeFunction = type === 'function';
++  let isCacheableWorklet = false;
+   if ((isTypeObject || isTypeFunction) && value !== null) {
+     const cached = shareableMappingCache.get(value);
+     if (cached === shareableMappingFlag) {
+@@ -166,6 +167,7 @@ export function makeShareableCloneRecursive<T>(
+       } else if (isPlainJSObject(value) || isTypeFunction) {
+         toAdapt = {};
+         if (isWorkletFunction(value)) {
++          isCacheableWorklet = true;
+           if (__DEV__) {
+             const babelVersion = value.__initData.version;
+             if (babelVersion !== undefined && babelVersion !== jsVersion) {
+@@ -275,7 +277,7 @@ Offending code was: \`${getWorkletCode(value)}\``);
+       }
+       const adapted = NativeReanimatedModule.makeShareableClone(
+         toAdapt,
+-        shouldPersistRemote,
++        shouldPersistRemote || isCacheableWorklet,
+         value
+       );
+       shareableMappingCache.set(value, adapted);

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(
     () => ({