@applicaster/zapp-react-native-utils 16.0.0-rc.37 → 16.0.0-rc.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "16.0.0-rc.37",
+  "version": "16.0.0-rc.39",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-rc.37",
+    "@applicaster/applicaster-types": "16.0.0-rc.39",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/reactHooks/navigation/__mocks__/index.ts

@@ -38,3 +38,7 @@ export const useNavigationPluginData = jest.fn().mockReturnValue(mockMenu);
 export const useIsNavBarVisible = jest.fn().mockReturnValue(true);
 
 export const useIsScreenActive = jest.fn().mockReturnValue(true);
+
+export const isScreenActiveForRoute = jest.fn(
+  (route, currentRoute) => route === currentRoute
+);

package/reactHooks/navigation/__tests__/useIsScreenActive.test.ts

@@ -0,0 +1,42 @@
+import { isScreenActiveForRoute } from "../useIsScreenActive";
+
+describe("isScreenActiveForRoute", () => {
+  const route = "/river/home/river/tabs";
+  const currentRoute = "/river/home/river/tabs";
+
+  it("returns false when route does not match", () => {
+    expect(
+      isScreenActiveForRoute(route, "/river/home", { visible: false })
+    ).toBe(false);
+  });
+
+  it("keeps underlying screen active when video modal is docked", () => {
+    expect(
+      isScreenActiveForRoute(route, currentRoute, {
+        visible: true,
+        mode: "MINIMIZED",
+      })
+    ).toBe(true);
+  });
+
+  it.each(["FULLSCREEN", "MAXIMIZED", "PIP"])(
+    "deactivates underlying screen when video modal is visible",
+    (mode) => {
+      expect(
+        isScreenActiveForRoute(route, currentRoute, {
+          visible: true,
+          mode,
+        })
+      ).toBe(false);
+    }
+  );
+
+  it("keeps video-modal route active when video modal is open", () => {
+    expect(
+      isScreenActiveForRoute("video-modal/123", currentRoute, {
+        visible: true,
+        mode: "FULLSCREEN",
+      })
+    ).toBe(true);
+  });
+});

package/reactHooks/navigation/index.ts

@@ -32,7 +32,7 @@ export { useNavigationType } from "./useNavigationType";
 
 export { useGetBottomTabBarHeight } from "./useGetBottomTabBarHeight";
 
-export { useIsScreenActive } from "./useIsScreenActive";
+export { useIsScreenActive, isScreenActiveForRoute } from "./useIsScreenActive";
 
 export { useProfilerLogging } from "./useProfilerLogging";
 

package/reactHooks/navigation/useIsScreenActive.ts

@@ -2,20 +2,41 @@ import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtil
 import { useNavigation } from "./useNavigation";
 import { usePathname } from "./usePathname";
 
-// If current screen is active/focused (visible to the user)
-export const useIsScreenActive = () => {
-  const pathname = usePathname();
-  const { currentRoute, videoModalState } = useNavigation();
+type VideoModalState = {
+  visible?: boolean;
+  mode?: string;
+} | null;
 
-  if (videoModalState.visible) {
-    if (pathname.includes(ROUTE_TYPES.VIDEO_MODAL)) {
+/**
+ * Whether a navigation route should be treated as the active/focused screen.
+ * Docked (MINIMIZED) video modal does not deactivate the underlying screen —
+ * only FULLSCREEN / MAXIMIZED / PIP do.
+ */
+export function isScreenActiveForRoute(
+  route: string,
+  currentRoute: string,
+  videoModalState: VideoModalState
+) {
+  if (videoModalState?.visible) {
+    if (route.includes(ROUTE_TYPES.VIDEO_MODAL)) {
       return true;
     }
 
-    if (["FULLSCREEN", "MAXIMIZED", "PIP"].includes(videoModalState.mode)) {
+    if (
+      ["FULLSCREEN", "MAXIMIZED", "PIP"].includes(videoModalState.mode ?? "")
+    ) {
       return false;
     }
+    // MINIMIZED (docked): fall through — underlying screen stays active
   }
 
-  return pathname === currentRoute;
+  return route === currentRoute;
+}
+
+// If current screen is active/focused (visible to the user)
+export const useIsScreenActive = () => {
+  const pathname = usePathname();
+  const { currentRoute, videoModalState } = useNavigation();
+
+  return isScreenActiveForRoute(pathname, currentRoute, videoModalState);
 };