Force a new WebView when the content process dies

Reloading the page by calling reload() on the ref doesn't successfully restart the WebView.

This was causing tabs to occasionally become blank after the app sat backgrounded for long enough, and upon returning to the app they'd be stuck.

This change forces a new WebView by providing a new key, which should resolve the issue.

src/components/DappBrowser/BrowserTab.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { memo, useCallback, useEffect, useRef } from 'react';
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { Freeze } from 'react-freeze';
 import { Linking, StyleSheet } from 'react-native';
 import Animated, { AnimatedStyle, DerivedValue, FadeIn, SharedValue, runOnUI, useAnimatedProps, withTiming } from 'react-native-reanimated';
@@ -38,7 +38,7 @@ import { useAnimatedTab } from './hooks/useAnimatedTab';
 import { useTabScreenshotProvider } from './hooks/useTabScreenshotProvider';
 import { freezeWebsite, getWebsiteMetadata, hideBanners, unfreezeWebsite } from './scripts';
 import { BrowserTabProps, ScreenshotType } from './types';
-import { isValidAppStoreUrl } from './utils';
+import { generateUniqueIdWorklet, isValidAppStoreUrl } from './utils';
 
 export const BrowserTab = memo(function BrowserTab({ addRecent, setLogo, setTitle, tabId }: BrowserTabProps) {
   const viewShotRef = useRef<ViewShot | null>(null);
@@ -173,6 +173,8 @@ const FreezableWebViewComponent = ({
   const { updateTabUrlWorklet } = useBrowserWorkletsContext();
   const { setParams } = useNavigation();
 
+  const [renderKey, setRenderKey] = useState(`${tabId}-0`);
+
   const currentMessengerRef = useRef<any>(null);
   const logoRef = useRef<string | null>(null);
   const titleRef = useRef<string | null>(null);
@@ -318,8 +320,11 @@ const FreezableWebViewComponent = ({
   );
 
   const handleOnContentProcessDidTerminate = useCallback(() => {
-    activeTabRef.current?.reload();
-  }, [activeTabRef]);
+    const currentUrl = useBrowserStore.getState().getTabUrl(tabId);
+    if (currentUrl) useBrowserStore.getState().goToPage(currentUrl, tabId);
+
+    setRenderKey(`${tabId}-${generateUniqueIdWorklet()}`);
+  }, [tabId]);
 
   useEffect(() => {
     if (isActiveTab) {
@@ -350,6 +355,7 @@ const FreezableWebViewComponent = ({
   return (
     <Freeze freeze={!isActiveTab}>
       <TabWebView
+        key={renderKey}
         onContentProcessDidTerminate={handleOnContentProcessDidTerminate}
         onLoad={handleOnLoad}
         onLoadProgress={handleOnLoadProgress}

src/state/browser/browserStore.ts

@@ -131,6 +131,7 @@ interface BrowserStore {
   getActiveTabTitle: () => string | undefined;
   getActiveTabUrl: () => string | undefined;
   getTabData: (tabId: TabId) => TabData | undefined;
+  getTabUrl: (tabId: TabId) => string | undefined;
   goToPage: (url: string, tabId?: TabId) => void;
   isOnHomepage: () => boolean;
   isTabActive: (tabId: TabId) => boolean;
@@ -170,6 +171,8 @@ export const useBrowserStore = create<BrowserStore>()(
 
         getTabData: tabId => get().tabsData.get(tabId) || { canGoBack: false, canGoForward: false, url: RAINBOW_HOME },
 
+        getTabUrl: tabId => get().persistedTabUrls[tabId],
+
         goToPage: (url, tabId) =>
           set(state => {
             const tabIdToUse = tabId || state.getActiveTabId();