Fix: prevent webview escape

app/(tabs)/_layout.tsx

@@ -38,6 +38,7 @@ export default function TabLayout() {
                             color={color}
                         />
                     ),
+                    unmountOnBlur: true,
                 }}
             />
             <Tabs.Screen

components/WhitelistedWebview.tsx

@@ -0,0 +1,74 @@
+import { useNavigation } from '@react-navigation/native';
+import { useEffect, useRef } from 'react';
+import { BackHandler, Linking, Platform } from 'react-native';
+import WebView, { WebViewProps } from 'react-native-webview';
+
+type WhitelistedWebviewProps = {
+    whitelistedUrls: RegExp[];
+} & WebViewProps;
+
+// Hide some elements from the page to prevent user navigation
+// and to make webview feel more like native experience
+const injectedJavascript = `(function() {
+    // Navbar and footer
+    document.querySelector("nav").style.display = "none";
+    document.querySelector("footer").style.display = "none";
+
+    // Breadcrumbs index page (bit hacky but the best way I could find)
+    document.querySelectorAll(".css-1ln5cin.e9onl6k0")[0].style.display = "none";
+    document.querySelectorAll(".css-1ln5cin.e9onl6k0")[1].style.display = "none";
+})();`;
+
+function WhitelistedWebview({ whitelistedUrls, ...props }: WhitelistedWebviewProps) {
+    const webviewRef = useRef<WebView | null>(null);
+    const navigation = useNavigation();
+
+    const onAndroidBackPress = () => {
+        if (webviewRef.current) {
+            webviewRef.current.goBack();
+            return true; // prevent default behavior (exit app)
+        }
+        return false;
+    };
+
+    useEffect(() => {
+        // @ts-ignore
+        const unsubscribe = navigation.addListener('tabPress', () => {
+            if (webviewRef.current) {
+                webviewRef.current.goBack();
+            }
+        });
+
+        if (Platform.OS === 'android') {
+            BackHandler.addEventListener('hardwareBackPress', onAndroidBackPress);
+            return () => {
+                BackHandler.removeEventListener('hardwareBackPress', onAndroidBackPress);
+                if (unsubscribe) unsubscribe();
+            };
+        }
+    }, [navigation]);
+
+    return (
+        <WebView
+            {...props}
+            ref={webviewRef}
+            injectedJavaScript={injectedJavascript}
+            onNavigationStateChange={(newNavState) => {
+                let foundMatch = whitelistedUrls.find((regex) => regex.test(newNavState.url));
+
+                if (!foundMatch) {
+                    Linking.openURL(newNavState.url);
+                    webviewRef.current?.stopLoading();
+                    webviewRef.current?.goBack();
+                    return;
+                }
+
+                webviewRef.current?.injectJavaScript(injectedJavascript);
+
+                props.onNavigationStateChange?.(newNavState);
+            }}
+        />
+    );
+}
+
+export default WhitelistedWebview;

elements/about/AboutWebview.tsx

@@ -1,35 +1,40 @@
+import WhitelistedWebview from '@/components/WhitelistedWebview';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ActivityIndicator } from 'react-native-paper';
-import { WebView } from 'react-native-webview';
-
-// Hide some elements from the page to prevent user navigation
-// and to make webview feel more like native experience
-const injectedJavascript = `(function() {
-    // Navbar and footer
-    document.querySelector("nav").style.display = "none";
-    document.querySelector("footer").style.display = "none";
-
-    // Breadcrumbs index page (bit hacky but the best way I could find)
-    document.querySelectorAll(".css-1ln5cin.e9onl6k0")[0].style.display = "none";
-    document.querySelectorAll(".css-1ln5cin.e9onl6k0")[1].style.display = "none";
-})();`;
 
 const AboutWebview = () => {
     const [loading, setLoading] = useState(true);
     const { i18n } = useTranslation();
+
     const uri = `https://assembly.org/${i18n.language}/about`;
+    const whitelist = [
+        /^https:\/\/assembly\.org\/(fi\/|en\/)?about/,
+        /^https:\/\/assembly\.org\/(fi\/|en\/)?history/,
+        /^https:\/\/assembly\.org\/(fi\/|en\/)?historia/,
+        /^https:\/\/assembly\.org\/(fi\/|en\/)?crewien-esittelyt/,
+        /^https:\/\/assembly\.org\/(fi\/|en\/)?volunteer-crews/,
+        /^https:\/\/assembly\.org\/(fi\/|en\/)?tietoa-vanhemmille/,
+        /^https:\/\/assembly\.org\/(fi\/|en\/)?info-for-parents/,
+        /^https:\/\/assembly\.org\/(fi\/|en\/)?tilaa-uutiskirje/,
+        /^https:\/\/assembly\.org\/(fi\/|en\/)?subscribe-to-newsletter/,
+        /^https:\/\/assembly\.org\/(fi\/|en\/)?tule-tekemaan-tapahtumaa/,
+        /^https:\/\/assembly\.org\/(fi\/|en\/)?become-an-organizer/,
+        /^https:\/\/assembly\.org\/(fi\/|en\/)?contact/,
+        /^https:\/\/assembly\.org\/(fi\/|en\/)?yrityksille/,
+        /^https:\/\/assembly\.org\/(fi\/|en\/)?business/,
+    ];
 
     return (
         <>
             {loading && <ActivityIndicator animating />}
-            <WebView
+            <WhitelistedWebview
+                whitelistedUrls={whitelist}
                 style={{
                     display: loading ? 'none' : 'flex',
                 }}
                 onLoad={() => setLoading(false)}
                 source={{ uri }}
-                injectedJavaScript={injectedJavascript}
             />
         </>
     );

package.json

@@ -14,7 +14,8 @@
     "check:types": "tsc --noEmit",
     "check:lint": "expo lint",
     "check:format": "prettier --check \"./**/*.{js,jsx,mjs,cjs,ts,tsx,json}\"",
-    "check:test": "jest --bail --ci"
+    "check:test": "jest --bail --ci",
+    "check:all": "npm run check:types && npm run check:lint && npm run check:format && npm run check:test"
   },
   "jest": {
     "preset": "jest-expo"