Merge pull request #8120 from Couchers-org/na/mobile-1.1.14

Mobile app fixes v.1.1.14

Author: nabramow

app/mobile/RELEASE_NOTES.txt

@@ -1,8 +1,3 @@
-- Fix unexpected logouts
-- Fix "Message" button opening wrong conversation when clicked via profile
-- Fix tab highlighting after clicking couchers logo in navigation
-- Fix image uploads being forced to square
-- Hide "open in new tab" icon on search results
-- Remove beta flag
-- Fix issues with stale content on page change
-- Fix save button spacing in profile editor
+- Fix incompatible dependencies
+- Improve navigation behavior
+- Fix menu staying open after switching tabs

app/mobile/app.config.js

@@ -48,7 +48,7 @@ const getIosIcon = () => {
 export default {
   name: getAppName(),
   slug: "mobile",
-  version: "1.1.13",
+  version: "1.1.14",
   orientation: "portrait",
   icon: getIcon(),
   scheme: getAppScheme(),

app/mobile/app/(tabs)/[...slug].tsx

@@ -5,5 +5,6 @@ import WebEmbed from "@/components/WebEmbed";
 export default function CatchAllScreen() {
   const { slug } = useLocalSearchParams<{ slug?: string[] }>();
   const path = `/${(slug ?? []).join("/")}`;
+
   return <WebEmbed path={path} />;
 }

app/mobile/app/(tabs)/md/[...slug].tsx

@@ -5,5 +5,6 @@ import WebEmbed from "@/components/WebEmbed";
 export default function MarkdownScreen() {
   const { slug } = useLocalSearchParams<{ slug?: string[] }>();
   const path = `/md/${(slug ?? []).join("/")}`;
+
   return <WebEmbed path={path} />;
 }

app/mobile/components/WebEmbed.tsx

@@ -21,7 +21,6 @@ import { useAuthContext } from "@/features/auth/AuthContext";
 import { useImagePicker } from "@/hooks/useImagePicker";
 import { useWebNavigation } from "@/hooks/useWebNavigation";
 import errorGraphic from "@/resources/404graphic.png";
-import { lastMobileNavigationRef } from "@/state/webViewState";
 import { theme } from "@/theme";
 import { shouldLoadInWebView } from "@/utils/webViewUrlUtils";
 
@@ -48,15 +47,14 @@ export default function WebEmbed({ path }: WebEmbedProps) {
 
   // Custom hooks for image picking and navigation
   const { pickImage } = useImagePicker();
-  const { handleNavigationStateChange, canGoBackRef, currentWebPathRef } =
-    useWebNavigation({
-      webBaseUrl: WEB_BASE_URL,
-      currentPath: path,
-      syncTargetPathRef,
-      onRetryCountReset: () => {
-        retryCountRef.current = 0;
-      },
-    });
+  const { handleNavigationStateChange, canGoBackRef } = useWebNavigation({
+    webBaseUrl: WEB_BASE_URL,
+    currentPath: path,
+    syncTargetPathRef,
+    onRetryCountReset: () => {
+      retryCountRef.current = 0;
+    },
+  });
 
   // Handle Android hardware back button - go back in WebView if possible
   useFocusEffect(
@@ -105,26 +103,10 @@ export default function WebEmbed({ path }: WebEmbedProps) {
       return;
     }
 
-    // Read the current WebView path from the ref (always up-to-date)
-    const currentWebPath = currentWebPathRef.current;
-
-    // Strip locales from both paths for comparison
-    const currentRoute = stripLocale(currentWebPath);
+    // Strip locale for comparison
     const targetRoute = stripLocale(path);
 
-    if (currentRoute === targetRoute) {
-      // Same route, just different locale or already synced
-      return;
-    }
-
-    // Check if we just navigated here from mobile router
-    // If so, skip sync to avoid reload loop (WebView is already navigating there)
-    if (lastMobileNavigationRef.current === targetRoute) {
-      lastMobileNavigationRef.current = null; // Clear so next change is synced
-      return;
-    }
-
-    // Routes differ - sync WebView, using mobile i18n language as source of truth
+    // Sync WebView, using mobile i18n language as source of truth
     // This ensures language selection persists across tab switches
     const currentLocale = i18n.language !== "en" ? i18n.language : null;
     const targetPath = currentLocale
@@ -138,7 +120,7 @@ export default function WebEmbed({ path }: WebEmbedProps) {
       window.postMessage(${JSON.stringify({ type: "MOBILE_NAVIGATE", path: targetPath })}, "*");
       true;
     `);
-  }, [path, WEB_BASE_URL, stripLocale, i18n.language, currentWebPathRef]);
+  }, [path, stripLocale, i18n.language]);
 
   // Sync WebView when screen comes back into focus (tab switch)
   useFocusEffect(
@@ -148,19 +130,10 @@ export default function WebEmbed({ path }: WebEmbedProps) {
         return;
       }
 
-      // Read the current WebView path from the ref (always up-to-date)
-      const currentWebPath = currentWebPathRef.current;
-
-      // Strip locales from both paths for comparison
-      const currentRoute = stripLocale(currentWebPath);
+      // Strip locale for comparison
       const targetRoute = stripLocale(path);
 
-      if (currentRoute === targetRoute) {
-        // Same route, just different locale or already synced
-        return;
-      }
-
-      // Routes differ - sync WebView, using mobile i18n language as source of truth
+      // Sync WebView, using mobile i18n language as source of truth
       // This ensures language selection persists across tab switches
       const currentLocale = i18n.language !== "en" ? i18n.language : null;
       const targetPath = currentLocale
@@ -174,7 +147,7 @@ export default function WebEmbed({ path }: WebEmbedProps) {
         window.postMessage(${JSON.stringify({ type: "MOBILE_NAVIGATE", path: targetPath })}, "*");
         true;
       `);
-    }, [path, stripLocale, i18n.language, currentWebPathRef]),
+    }, [path, stripLocale, i18n.language]),
   );
 
   // Send result back to web app

app/mobile/hooks/useWebNavigation.ts

@@ -154,8 +154,23 @@ export function useWebNavigation({
         return;
       }
 
+      // Check if we're navigating from a tab to a catch-all route
+      const isCurrentRouteTab =
+        currentRoute &&
+        ["dashboard", "messages", "events", "communities", "search"].includes(
+          currentRoute,
+        );
+      const isTargetRouteCatchAll =
+        targetRoute === "[...slug]" || targetRoute === "md/[...slug]";
+
       // Update native router to keep tab highlights in sync
       if (targetRoute !== currentRoute && targetRoute) {
+        // Don't switch screens when navigating from a tab to a catch-all route
+        // This keeps the user on the tab, allowing back button to work and preventing flash
+        if (isCurrentRouteTab && isTargetRouteCatchAll) {
+          return;
+        }
+
         if (targetRoute === "[...slug]" || targetRoute === "md/[...slug]") {
           // For catch-all routes, navigate to the appropriate screen
           // Strip locale prefix for mobile router (mobile routes don't use locale prefixes)