fix(EMI-1396): Fix Android hardware back button in WebViews (#9354)

Co-authored-by: George Kartalis <[email protected]>
artsy · Sep 29, 2023 · 6947da1 · 6947da1
1 parent cc5b0d6
commit 6947da1
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 30 deletions.
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -554,7 +554,7 @@ PODS:
     - React-Core
   - react-native-view-shot (3.4.0):
     - React-Core
-  - react-native-webview (11.22.7):
+  - react-native-webview (13.6.0):
     - React-Core
   - React-perflogger (0.70.13)
   - React-RCTActionSheet (0.70.13):
@@ -1299,7 +1299,7 @@ SPEC CHECKSUMS:
   react-native-shake: 62aa5681863203090a087842da70183c442b97f8
   react-native-slider: 241935e3ea8e47599c317f512f96ee8de607d4cb
   react-native-view-shot: a60a98a18c72bcaaaf2138f9aab960ae9b0d96c7
-  react-native-webview: 227ba9205abb8579116b69ea5774d9744267c65a
+  react-native-webview: 669ae162965f629a8d6a4bdd3b99a304d36ef1f2
   React-perflogger: c6702b0cb84be970b5fcb230162a229195295ece
   React-RCTActionSheet: cbe5a12f5417120bbc03c105c9ea9a4c6d2b5d84
   React-RCTAnimation: ac313d82cac7b1c90dd817de5eca6d367c66d588

diff --git a/package.json b/package.json
@@ -200,7 +200,7 @@
     "react-native-url-polyfill": "1.3.0",
     "react-native-view-shot": "3.4.0",
     "react-native-vimeo-iframe": "1.2.1",
-    "react-native-webview": "11.22.7",
+    "react-native-webview": "13.6.0",
     "react-relay": "14.1.0",
     "react-spring": "8.0.23",
     "react-tracking": "9.2.0",

diff --git a/src/app/Components/ArtsyWebView.tests.tsx b/src/app/Components/ArtsyWebView.tests.tsx
@@ -90,6 +90,7 @@ describe("ArtsyWebViewPage", () => {
       ...mockOnNavigationStateChange,
       url: "https://staging.artsy.net/non-native/this-doesnt-have-a-native-view-2",
     })
+
     fireEvent.press(screen.getByTestId("fancy-modal-header-right-button"))
     expect(Share.open).toHaveBeenLastCalledWith({
       url: "https://staging.artsy.net/non-native/this-doesnt-have-a-native-view-2",
@@ -134,7 +135,7 @@ describe("ArtsyWebViewPage", () => {
 
   it("sets the user agent correctly", () => {
     const tree = render()
-    expect(webViewProps(tree).userAgent).toBe(
+    expect(webViewProps(tree).applicationNameForUserAgent).toBe(
       `Artsy-Mobile ios Artsy-Mobile/${appJson().version} Eigen/some-build-number/${
         appJson().version
       }`

diff --git a/src/app/Components/ArtsyWebView.tsx b/src/app/Components/ArtsyWebView.tsx
@@ -6,7 +6,7 @@ import { matchRoute } from "app/routes"
 import { GlobalStore, getCurrentEmissionState } from "app/store/GlobalStore"
 import { GoBackProps, dismissModal, goBack, navigate } from "app/system/navigation/navigate"
 import { ArtsyKeyboardAvoidingView } from "app/utils/ArtsyKeyboardAvoidingView"
-import { useAndroidGoBack } from "app/utils/hooks/useBackHandler"
+import { useBackHandler } from "app/utils/hooks/useBackHandler"
 import { useDevToggle } from "app/utils/hooks/useDevToggle"
 import { useEnvironment } from "app/utils/hooks/useEnvironment"
 import { Schema } from "app/utils/track"
@@ -67,7 +67,6 @@ export const ArtsyWebViewPage = ({
   backAction?: () => void
 } & ArtsyWebViewConfig) => {
   const saInsets = useSafeAreaInsets()
-  useAndroidGoBack()
 
   const [canGoBack, setCanGoBack] = useState(false)
   const webURL = useEnvironment().webURL
@@ -108,28 +107,33 @@ export const ArtsyWebViewPage = ({
     }
   }
 
+  const handleBackButtonPress = () => {
+    if (isPresentedModally && !canGoBack) {
+      dismissModal()
+    } else if (!canGoBack) {
+      handleGoBack()
+    } else {
+      if (systemBackAction) {
+        systemBackAction()
+      } else {
+        ref.current?.goBack()
+      }
+    }
+  }
+
+  useBackHandler(() => {
+    handleBackButtonPress()
+    return true
+  })
+
+  const leftButton = useRightCloseButton && !canGoBack ? undefined : handleBackButtonPress
+
   return (
     <Flex flex={1} pt={isPresentedModally ? 0 : `${saInsets.top}px`} backgroundColor="white">
       <ArtsyKeyboardAvoidingView>
         <FancyModalHeader
           useXButton={!!isPresentedModally && !canGoBack}
-          onLeftButtonPress={
-            useRightCloseButton && !canGoBack
-              ? undefined
-              : () => {
-                  if (isPresentedModally && !canGoBack) {
-                    dismissModal()
-                  } else if (!canGoBack) {
-                    handleGoBack()
-                  } else {
-                    if (systemBackAction) {
-                      systemBackAction()
-                    } else {
-                      ref.current?.goBack()
-                    }
-                  }
-                }
-          }
+          onLeftButtonPress={leftButton}
           useShareButton={showShareButton}
           rightCloseButton={useRightCloseButton}
           onRightButtonPress={
@@ -258,7 +262,7 @@ export const ArtsyWebView = forwardRef<
           decelerationRate="normal"
           source={{ uri }}
           style={{ flex: 1 }}
-          userAgent={userAgent}
+          applicationNameForUserAgent={userAgent}
           onMessage={({ nativeEvent }) => {
             const data = nativeEvent.data
             try {
@@ -284,7 +288,7 @@ export const ArtsyWebView = forwardRef<
           onNavigationStateChange={onNavigationStateChange}
         />
         <ProgressBar loadProgress={loadProgress} />
-        {showIndicator ? (
+        {!!showIndicator && (
           <Flex
             position="absolute"
             top={50}
@@ -293,7 +297,7 @@ export const ArtsyWebView = forwardRef<
           >
             <Text color="red">webview</Text>
           </Flex>
-        ) : null}
+        )}
       </SafeAreaView>
     )
   }

diff --git a/src/setupJest.tsx b/src/setupJest.tsx
@@ -133,6 +133,18 @@ jest.mock("@react-navigation/native", () => {
   }
 })
 
+jest.mock("react-native-webview", () => {
+  const React = require("react")
+  const { View } = require("react-native")
+
+  return {
+    __esModule: true,
+    default: React.forwardRef((props: any, ref: any) => {
+      return <View ref={ref} {...props} />
+    }),
+  }
+})
+
 jest.mock("react-native-share", () => ({
   open: jest.fn(),
 }))

diff --git a/yarn.lock b/yarn.lock
@@ -14836,10 +14836,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/react-native-vimeo-iframe/-/react-native-vimeo-iframe-1.2.1.tgz#e1f11350cd6c906dda0cc5ad1320988e38e0de07"
   integrity sha512-+LBbjSpzn5z6Olx41pOk3n2bq1t8KWJKjHwdVIxUUGdijr+cOvDhS3IKErtwmPdnzLTpB2YdRmMFoUwV2X17Vw==
 
-react-native-webview@11.22.7:
-  version "11.22.7"
-  resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-11.22.7.tgz#bf0d1755473af6e1af8486e862668fc7530149b4"
-  integrity sha512-IYMElB4fFS6S8LbhivAQfAlW95HorqCK4T3mFKmWsV24iPVTfYoaiA1TNzkRnjw2mMgXDk/QnMeH9IbjBVs1Ag==
+react-native-webview@13.6.0:
+  version "13.6.0"
+  resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-13.6.0.tgz#286eeb6b2167b838fe8a44619d14e8e24efc8b67"
+  integrity sha512-KapVfHEj60e+2QplhqoCMdqW4vDzzvLS3YasfjVoMV4qhsZ3padncMEqOHX6AY4FIAdRzAxG0JQs+kXczAPYeQ==
   dependencies:
     escape-string-regexp "2.0.0"
     invariant "2.2.4"