@applicaster/zapp-react-native-utils 12.0.0-alpha.3977160850 → 12.0.0-alpha.4433422595

package/appUtils/HooksManager/index.js

@@ -270,7 +270,9 @@ export function HooksManager({
         });
 
         const isHookInHomescreen = payload?.home;
-        const isHookFlowBlocker = hookPlugin?.module?.isFlowBlocker();
+
+        const isHookFlowBlocker =
+          hookPlugin?.module?.isFlowBlocker?.() ?? false;
 
         // TODO: We technically need to also support the case where there is more than one hook in the stack,
         // if needed we could add differentiation explicit user cancellation (when we should go to background) and other types of cancellation

package/appUtils/focusManager/index.ts

@@ -224,6 +224,12 @@ export const focusManager = (function () {
       lastAddedParentNode?.children || focusableTree.root.children
     );
 
+    // console.log("debug_2", "FM setInitialFocus", {
+    //   preferredFocus,
+    //   lastAddedParentNode,
+    //   focusableTree,
+    // });
+
     logger.log({ message: "setInitialFocus", data: { preferredFocus } });
 
     if (preferredFocus && preferredFocus.length > 0) {
@@ -323,6 +329,8 @@ export const focusManager = (function () {
    * @returns {React.Component} the registered component
    */
   function registerGroup(id, component) {
+    // console.log("debug_2", "FM registerGroup", { id, component });
+
     focusableTree.addNode({ id, component });
 
     return component;
@@ -338,6 +346,8 @@ export const focusManager = (function () {
    * @returns {React.Component} the registered component
    */
   function registerItem(id, component) {
+    // console.log("debug_2", "FM registerItem", { id, component });
+
     focusableTree.addNode({ id, component });
 
     if (!currentFocusNode && id === lastFocusedId && !id.includes("menu")) {
@@ -354,6 +364,8 @@ export const focusManager = (function () {
    * @param {String} id of the group to unregister
    */
   function unregisterGroup(id) {
+    // console.log("debug_2", "FM unregisterGroup", { id });
+
     focusableTree.findAndRemoveNode(id);
   }
 
@@ -365,6 +377,8 @@ export const focusManager = (function () {
    * @param {String} id of the Focusable to unregister
    */
   function unregisterItem(id) {
+    // console.log("debug_2", "FM unregisterItem", { id });
+
     focusableTree.findAndRemoveNode(id);
 
     if (currentFocusNode && currentFocusNode.id === id) {
@@ -422,6 +436,13 @@ export const focusManager = (function () {
       currentFocusNode.component.willLoseFocus(currentFocusNode, direction);
       const nextFocusable = findFocusableNode(direction, currentFocusNode);
 
+      // console.log("debug_2", "FM moveFocus", {
+      //   direction: direction?.value,
+      //   currentFocusNode,
+      //   focusableTree,
+      //   nextFocusable,
+      // });
+
       if (nextFocusable?.component?.isMounted?.()) {
         const nextRect = nextFocusable.component.getRect();
 

package/appUtils/focusManager/treeDataStructure/Utils/index.js

@@ -1,4 +1,4 @@
-import * as R from "ramda";
+import { allPass, pathOr, startsWith } from "ramda";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 import { rejectItemByPath } from "../../../../objectUtils";
@@ -143,7 +143,47 @@ const hasChildren = (target) =>
 
 const hasComponent = (target) => !!target?.component;
 
-const hasComponentAndChildren = R.allPass([hasComponent, hasChildren]);
+const hasComponentAndChildren = allPass([hasComponent, hasChildren]);
+
+const positiveOrZero = (value) => value >= 0;
+
+const excludeFromFocusSearching = pathOr(false, [
+  "component",
+  "props",
+  "excludeFromFocusSearching",
+]);
+
+const isNavBar = (target) => startsWith("navbar", target?.id);
+
+const ignoreMenuIfMultipleTargets = (nodes) => {
+  if (nodes.length > 1 && nodes.map((n) => n?.target?.id).includes("navbar")) {
+    return nodes.filter((n) => !isNavBar(n?.target));
+  }
+
+  return nodes;
+};
+
+const toDistance = ({ target, direction, comparisonRect }) => {
+  const componentRect = target.component?.getRect();
+
+  const orientationDistance = measureDistance(
+    direction,
+    comparisonRect,
+    componentRect
+  );
+
+  if (orientationDistance === -1) {
+    // ignores offscreen targets when moving up/down
+    return null;
+  }
+
+  const euclidDistance = measureEuclidianDistanceToCenter(
+    comparisonRect,
+    componentRect
+  );
+
+  return orientationDistance > 0 ? euclidDistance : orientationDistance;
+};
 
 /**
  * Get target in shortest distance in specified direction
@@ -173,43 +213,28 @@ export function getTargetInDirection(
 
   const distances = targets
     .filter(hasComponentAndChildren)
-    .map((target) => {
-      const componentRect = target.component?.getRect();
-
-      const distance = measureDistance(
-        direction,
-        comparisonRect,
-        componentRect
-      );
-
-      if (distance === -1) {
-        // ignores offscreen targets when moving up/down
-        return null;
-      }
-
-      return {
-        distance:
-          measureDistance(direction, comparisonRect, componentRect) +
-          measureEuclidianDistanceToCenter(comparisonRect, componentRect) /
-            10000,
-        target,
-      };
-    })
-    .filter((obj) => obj && obj.distance >= 0);
+    .filter((target) => !excludeFromFocusSearching(target))
+    .map((target) => ({
+      distance: toDistance({ target, direction, comparisonRect }),
+      target,
+    }))
+    .filter(({ distance }) => positiveOrZero(distance));
 
   const match = distances
     .sort((a, b) => a.distance - b.distance) // sorts the distances
     .filter(ignoreMenuIfMultipleTargets)[0]; // filters out multiple targets if necessary // gets the first element
 
-  return distances && distances.length > 0 ? match.target : null;
-}
-
-function ignoreMenuIfMultipleTargets(nodes) {
-  if (nodes.length > 1 && nodes.map((n) => n?.target?.id).includes("navbar")) {
-    return nodes.filter((n) => n?.target?.id !== "navbar");
-  }
-
-  return nodes;
+  // console.log("debug_2", "FM getTargetInDirection", {
+  //   direction: direction?.value,
+  //   currentNode,
+  //   targetNodes,
+  //   targets,
+  //   comparisonRect,
+  //   distances,
+  //   match,
+  // });
+
+  return match.target;
 }
 
 /**

package/appUtils/playerManager/conts.ts

@@ -20,6 +20,11 @@ export enum SharedPlayerCallBacksKeys {
   OnPlayerMute = "onPlayerMute",
   OnPlayerUnmute = "onPlayerUnmute",
 
+  onVideoFullscreenPlayerDidDismiss = "onVideoFullscreenPlayerDidDismiss",
+  onVideoFullscreenPlayerDidPresent = "onVideoFullscreenPlayerDidPresent",
+  onVideoFullscreenPlayerWillDismiss = "onVideoFullscreenPlayerWillDismiss",
+  onVideoFullscreenPlayerWillPresent = "onVideoFullscreenPlayerWillPresent",
+
   OnAdBegin = "onAdBegin",
   OnAdBreakBegin = "onAdBreakBegin",
   OnAdBreakEnd = "onAdBreakEnd",

package/appUtils/playerManager/player.ts

@@ -414,6 +414,32 @@ export class Player {
     });
   };
 
+  onVideoFullscreenPlayerWillDismiss = () => {
+    this.invokeListenersUpdate({
+      callbackName:
+        SharedPlayerCallBacksKeys.onVideoFullscreenPlayerWillDismiss,
+    });
+  };
+
+  onVideoFullscreenPlayerDidDismiss = () => {
+    this.invokeListenersUpdate({
+      callbackName: SharedPlayerCallBacksKeys.onVideoFullscreenPlayerDidDismiss,
+    });
+  };
+
+  onVideoFullscreenPlayerWillPresent = () => {
+    this.invokeListenersUpdate({
+      callbackName:
+        SharedPlayerCallBacksKeys.onVideoFullscreenPlayerWillPresent,
+    });
+  };
+
+  onVideoFullscreenPlayerDidPresent = () => {
+    this.invokeListenersUpdate({
+      callbackName: SharedPlayerCallBacksKeys.onVideoFullscreenPlayerDidPresent,
+    });
+  };
+
   public invokeListenersUpdate = ({
     callbackName,
     event = {},
@@ -634,6 +660,12 @@ export class Player {
     onBufferStart: this.onBufferStart,
     onBufferComplete: this.onBufferComplete,
 
+    onPlayerClose: this.onPlayerClose,
+    onVideoFullscreenPlayerWillPresent: this.onVideoFullscreenPlayerWillPresent,
+    onVideoFullscreenPlayerDidPresent: this.onVideoFullscreenPlayerDidPresent,
+    onVideoFullscreenPlayerWillDismiss: this.onVideoFullscreenPlayerWillDismiss,
+    onVideoFullscreenPlayerDidDismiss: this.onVideoFullscreenPlayerDidDismiss,
+
     // Ads Callbacks:
     onAdBegin: this.onAdBegin,
     onAdBreakBegin: this.onAdBreakBegin,
@@ -693,4 +725,6 @@ export class Player {
   isFullScreenSupported(): boolean {
     return true;
   }
+
+  public supportsNativeControls = (): boolean => false;
 }

package/appUtils/playerManager/playerFactory.ts

@@ -9,21 +9,23 @@ type PlayerFactoryItem = {
 };
 
 type PlayerFactoryProps = {
-  player: any,
-  playerId: string,
-  autoplay: boolean,
-  entry: ZappEntry,
-  muted: boolean,
-  playerPluginId: string,
-  screenConfig: Record<string, any>,
-  playerRole: PlayerRole,
-}
+  player: any;
+  playerId: string;
+  autoplay: boolean;
+  entry: ZappEntry;
+  muted: boolean;
+  playerPluginId: string;
+  screenConfig: Record<string, any>;
+  playerRole: PlayerRole;
+};
 
 interface PlayerConstructor {
   new (params: any): Player;
 }
 
-export const playerFactory = (config: PlayerFactoryProps): PlayerFactoryItem | null => {
+export const playerFactory = (
+  config: PlayerFactoryProps
+): PlayerFactoryItem | null => {
   const IDENTIFIER = config?.playerPluginId;
 
   if (!IDENTIFIER) {

package/appUtils/playerManager/playerNative.ts

@@ -5,6 +5,7 @@ import { Player } from "./player";
 import { findNodeHandle, NativeModules } from "react-native";
 import { isApplePlatform } from "../../reactUtils";
 import { PlayerRole } from "./conts";
+import { toBooleanWithDefaultFalse } from "../../booleanUtils";
 
 const RNPlayerManager = {
   QuickBrickPlayerPlugin: isApplePlatform()
@@ -291,4 +292,7 @@ export class PlayerNative extends Player {
 
     return !(isFullScreenAudioPlayer && this.isAudioItem());
   };
+
+  supportsNativeControls = (): boolean =>
+    toBooleanWithDefaultFalse(this.getConfig()?.["supports_native_controls"]);
 }

package/cellUtils/index.ts

@@ -182,8 +182,8 @@ export const getHeight = (width, aspectRatio) => {
  * @returns {string} duration
  */
 
-export const getDurationInMinutes = (seconds: number): string => {
-  if (seconds === (null || undefined)) return "00:00";
+export const getDurationInMinutes = (seconds?: number): string => {
+  if (!seconds) return "00:00";
   const minutes = Math.floor(Number(seconds) / 60);
   const secondsReminder = Math.floor(Number(seconds)) % 60;
   const pad = (num: number): string => `${num < 10 ? "0" : ""}${num}`;
@@ -460,7 +460,9 @@ export const getColorFromData = ({
 }: GetColorFromData): string => {
   const value = getValue(key);
 
-  if (validateColor(value)) {
+  // Temporary hack to fix color validation when alpha is floating point number
+  // https://github.com/dreamyguy/validate-color/issues/44
+  if (validateColor(value.replace(".00", ""))) {
     return value;
   }
 

package/manifestUtils/index.js

@@ -22,7 +22,11 @@ const {
 const { buttonKey } = require("./buttons");
 const { tvBadges } = require("./tvBadges");
 const { mobileProgressBar, tvProgressBar } = require("./progressBar");
-const { secondaryImage, getUpdatedSecondaryImageKeys } = require("./secondaryImage");
+
+const {
+  secondaryImage,
+  getUpdatedSecondaryImageKeys,
+} = require("./secondaryImage");
 
 module.exports = {
   fontKey,

package/manifestUtils/secondaryImage/index.js

@@ -132,29 +132,32 @@ function secondaryImage({
 
 const POSITION_OVER_IMAGE = toSnakeCase(position_over_image);
 
-const getUpdatedSecondaryImageKeys = (secondaryImageManifest) => secondaryImageManifest.fields.reduce((acc, item) => {
-  const key = item.key;
+const getUpdatedSecondaryImageKeys = (secondaryImageManifest) =>
+  secondaryImageManifest.fields.reduce((acc, item) => {
+    const key = item.key;
 
-  const conditionalFields = (item.conditional_fields || []).map((field) => field.key);
+    const conditionalFields = (item.conditional_fields || []).map(
+      (field) => field.key
+    );
 
-  const updatedConditionalFields = conditionalFields.reduce((acc, field) => {
-    const updatedKey = field.replace("secondary_image_", "nested_image_");
+    const updatedConditionalFields = conditionalFields.reduce((acc, field) => {
+      const updatedKey = field.replace("secondary_image_", "nested_image_");
+
+      return {
+        ...acc,
+        [updatedKey]: field,
+      };
+    }, {});
+
+    const updatedKey = key.replace("secondary_image_", "nested_image_");
 
     return {
       ...acc,
-      [updatedKey]: field,
+      ...updatedConditionalFields,
+      [updatedKey]: key,
     };
   }, {});
 
-  const updatedKey = key.replace("secondary_image_", "nested_image_");
-
-  return {
-    ...acc,
-    ...updatedConditionalFields,
-    [updatedKey]: key,
-  };
-}, {});
-
 module.exports = {
   secondaryImage,
   getUpdatedSecondaryImageKeys,

package/navigationUtils/index.ts

@@ -114,7 +114,11 @@ export function getNavigationProps({
 } | null {
   const { activeRiver } = navigator;
   const { navigations, id: selected, home } = activeRiver; // use useRiver hook instead
-  const navigation = R.find(R.propEq("category", category), navigations);
+
+  const navigation: ZappNavigation = R.find(
+    R.propEq("category", category),
+    navigations
+  );
 
   if (!navigation) {
     return null;
@@ -127,9 +131,9 @@ export function getNavigationProps({
     title,
     home,
     styles,
-    assets,
-    nav_items,
-    rules,
+    assets: assets as ZappNavBarAssets,
+    nav_items: nav_items as any as NavBarItem[],
+    rules: rules as any as ZappNavBarRules,
   };
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "12.0.0-alpha.3977160850",
+  "version": "12.0.0-alpha.4433422595",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-alpha.3977160850",
+    "@applicaster/applicaster-types": "12.0.0-alpha.4433422595",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",

package/reactHooks/autoscrolling/__tests__/useTrackCurrentAutoScrollingElement.test.ts

@@ -12,6 +12,8 @@ jest.mock(
   })
 );
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
+
 jest.useFakeTimers();
 
 const {

package/reactHooks/autoscrolling/__tests__/useTrackedView.test.ts

@@ -17,6 +17,8 @@ jest.mock(
 
 jest.useFakeTimers();
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
+
 const { useTrackedView } = require("../useTrackedView");
 
 describe("useTrackCurrentAutoScrollingElement", () => {

package/reactHooks/layout/__tests__/index.test.js

@@ -44,6 +44,7 @@ jest.mock("../../../reactUtils", () => ({
 
 jest.mock("../../navigation", () => ({
   useNavigation: () => null,
+  useIsScreenActive: () => true,
 }));
 
 const { Dimensions } = require("react-native");

package/reactHooks/layout/types/index.ts

@@ -20,6 +20,7 @@ export type Options = {
   excludeStatusBar?: boolean;
   rounded?: boolean;
   deviceInfo?: boolean;
+  updateForInactiveScreens?: boolean;
 };
 
 export type Context = "window" | "screen";

package/reactHooks/layout/useDimensions/useDimensions.ts

@@ -1,4 +1,4 @@
-import { useState, useLayoutEffect, useRef, useMemo } from "react";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
 
 import * as R from "ramda";
 
@@ -8,6 +8,7 @@ import { isTV } from "../../../reactUtils";
 import { Options, UseDimensions } from "../types";
 import { getDeviceInfo } from "../getDeviceInfo";
 import { getInitialDimensions } from "./helpers";
+import { useIsScreenActive } from "../../navigation";
 
 function compensateForScaleIfNeeded(context) {
   return function () {
@@ -32,8 +33,10 @@ const statusBarHeight = StatusBar?.currentHeight;
  */
 export const useDimensions: UseDimensions = (
   context = "window",
-  fullDimensions = { fullDimensions: false }
+  fullDimensions = { fullDimensions: false, updateForInactiveScreens: true }
 ) => {
+  const isActive = useIsScreenActive();
+
   if (typeof fullDimensions === "boolean") {
     // eslint-disable-next-line no-console
     console.warn(
@@ -73,7 +76,7 @@ export const useDimensions: UseDimensions = (
 
       if (newDimensions.width === newDimensions.height) {
         /**
-         * Ignoring case occured on iOS when Dimensions.get sometimes returning
+         * Ignoring case occurred on iOS when Dimensions.get sometimes returning
          * wrong `window` sizes
          * when switch background -> foreground state.
          * ( TODO fix when 1:1 aspect ratio will be used )
@@ -81,7 +84,7 @@ export const useDimensions: UseDimensions = (
 
         // eslint-disable-next-line no-console
         console.log("change: wrong values - width equal to height, ignoring");
-      } else {
+      } else if (isActive || options.updateForInactiveScreens) {
         deviceInfo.current = getDeviceInfo(newDimensions);
         setDimensions(newDimensions);
       }
@@ -92,7 +95,7 @@ export const useDimensions: UseDimensions = (
     return () => {
       activeSubscription.remove();
     };
-  }, []);
+  }, [isActive]);
 
   const memoizedDimensions = useMemo(() => {
     return { ...applyOptions(dimensions), statusBarHeight };

package/reactHooks/navigation/__mocks__/index.ts

@@ -23,3 +23,5 @@ export const useNavigation = jest.fn(() => ({
 export const useNavigationPluginData = jest.fn().mockReturnValue(mockMenu);
 
 export const useIsNavBarVisible = jest.fn().mockReturnValue(true);
+
+export const useIsScreenActive = jest.fn().mockReturnValue(true);

package/reactHooks/navigation/__mocks__/useNavigation.ts

@@ -0,0 +1,4 @@
+export const useNavigation = jest.fn(() => ({
+  data: {},
+  currentRoute: "someRoute",
+}));

package/reactHooks/navigation/__tests__/index.test.tsx

@@ -45,10 +45,19 @@ const videoItem = {
   type: { value: "video" },
 };
 
+const mockGetStackForPathname = jest.fn().mockReturnValue(homeStack);
+
 const mainStackNavigator = {
-  getStackForPathname: jest.fn().mockReturnValue(homeStack),
+  getStackForPathname: mockGetStackForPathname,
   getModalState: () => {},
   videoModalState: {},
+  canGoBack: jest.fn(),
+};
+
+const _createWrapper = (Wrapper, props) => {
+  return function CreatedWrapper({ children }: any) {
+    return <Wrapper {...props}>{children}</Wrapper>;
+  };
 };
 
 const videoModalNavigator = {
@@ -85,10 +94,16 @@ const store = mockStore({
   contentTypes,
 });
 
-const mainStackWrapper = ({ children }) => (
+const mainStackWrapper = ({
+  children,
+  navigator = {},
+  pathname = homeStack.route,
+}) => (
   <Provider store={store}>
-    <NavigationContext.Provider value={mainStackNavigator}>
-      <PathnameContext.Provider value={homeStack.route}>
+    <NavigationContext.Provider
+      value={{ ...mainStackNavigator, ...navigator, currentRoute: pathname }}
+    >
+      <PathnameContext.Provider value={pathname}>
         {children}
       </PathnameContext.Provider>
     </NavigationContext.Provider>

package/reactHooks/navigation/index.ts

@@ -19,9 +19,9 @@ import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Co
 import { HookModalContextT } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
 import { HOOKS_EVENTS } from "../../appUtils/HooksManager/constants";
 import {
+  getNavigationProps,
   getRiverFromRoute,
   getTargetRoute,
-  getNavigationProps,
 } from "../../navigationUtils";
 import { platformSelect } from "../../reactUtils";
 import { useConnectionInfo } from "../connection";
@@ -146,6 +146,15 @@ export const useRoute = (): {
   pathname: string;
 } => {
   const pathname = usePathname() || "";
+
+  /**
+   * compose `useRoute()` output data
+   */
+  const composeRouteData = (screenData: VariousScreenData) => ({
+    screenData,
+    pathname,
+  });
+
   const navigator = useNavigation();
 
   const { plugins, contentTypes, rivers } = usePickFromState([
@@ -157,9 +166,7 @@ export const useRoute = (): {
   const currentStack = navigator.getStackForPathname(pathname);
   const { modalState } = useModalStore();
   const hookModalState = useZappHooksModalState();
-
   const modalScreenData = modalState.screen;
-
   const hookModalScreenData = hookModalState.state.screenData?.payload;
 
   const videoModalScreenData =
@@ -193,35 +200,58 @@ export const useRoute = (): {
   // if path is hook grab screenData from screenData
 
   if (isModalPathname(pathname)) {
-    const screenData = modalScreenData ?? ({} as ZappEntry);
-
-    return { screenData, pathname };
+    return composeRouteData(modalScreenData ?? ({} as ZappEntry));
   }
 
   if (isVideoModalPathname(pathname)) {
-    const screenData = videoModalScreenData as LegacyNavigationScreenData;
-
-    return { screenData, pathname };
+    return composeRouteData(videoModalScreenData as LegacyNavigationScreenData);
   }
 
   if (isHookModalPathname(pathname)) {
-    const screenData = hookModalScreenData;
-
-    return { screenData, pathname };
+    return composeRouteData(hookModalScreenData);
   }
 
   if (isHookPathname(pathname)) {
-    const screenData =
-      "hookPlugin" in currentRouteScreenData
-        ? currentRouteScreenData
-        : navigator.screenData;
+    /**
+     * HACK
+     *
+     * This condition relies on hacky approach to get the current hook screen data
+     * using navigator.screenData for some cases.
+     * This is used when hook is in sequence.
+     */
+
+    // case 1: stack not yet updated in navigator context, but navigator.screenData is updated already.
+    if (!currentStack) {
+      return composeRouteData(navigator.screenData);
+    }
 
-    return { screenData, pathname };
-  }
+    const isValidHookInCurrentRouteScreenData =
+      "hookPlugin" in currentRouteScreenData &&
+      !!currentRouteScreenData.hookPlugin?.module;
+
+    let screenData;
 
-  const screenData = currentRouteScreenData;
+    // case 2: stack has valid hook data
+    if (isValidHookInCurrentRouteScreenData) {
+      screenData = currentRouteScreenData;
+    }
+
+    const navigatorScreenData = navigator.screenData as NavigatorEntry;
+
+    // case 3: current hookPlugin is missing weight, but navigator.screenData has weight, use navigator.screenData
+    if (
+      screenData.hookPlugin.identifier ===
+        navigatorScreenData?.hookPlugin?.identifier &&
+      !screenData.hookPlugin?.weight &&
+      navigatorScreenData?.hookPlugin?.weight
+    ) {
+      screenData = navigator.screenData;
+    }
 
-  return { screenData, pathname };
+    return composeRouteData(screenData);
+  }
+
+  return composeRouteData(currentRouteScreenData);
 };
 
 type Callbacks = Partial<{
@@ -446,3 +476,33 @@ export const useGetBottomTabBarHeight = (): number => {
 
   return !isBottomBarNavigation ? 0 : tabBarHeight + topBorderWidth;
 };
+
+// If current screen is active/focused (visible to the user)
+export const useIsScreenActive = () => {
+  const pathname = usePathname();
+  const { currentRoute, videoModalState } = useNavigation();
+
+  if (
+    videoModalState.visible &&
+    ["FULLSCREEN", "MAXIMIZED", "PIP"].includes(videoModalState.mode)
+  ) {
+    return false;
+  }
+
+  return pathname === currentRoute;
+};
+
+type Return = (prefix: string) => string;
+
+export const useUniqueRouteSuffix = (): Return => {
+  const pathname = usePathname();
+  const { currentRoute } = useNavigation();
+
+  const suffix = `currentRoute:${currentRoute}_pathname:${pathname}`;
+
+  const withUniqueRouteSuffix = React.useCallback((prefix: string) => {
+    return `${prefix}___${suffix}`;
+  }, []);
+
+  return withUniqueRouteSuffix;
+};

package/reactHooks/resolvers/__tests__/useCellResolver.test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { renderHook, cleanup } from "@testing-library/react-hooks";
+import { cleanup, renderHook } from "@testing-library/react-hooks";
 import configureStore from "redux-mock-store";
 import { Provider } from "react-redux";
 
@@ -12,6 +12,8 @@ jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
   useIsRTL: jest.fn(() => mock_rtl_flag),
 }));
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
+
 const { useCellResolver } = require("../useCellResolver");
 
 describe("cellResolver", () => {

package/reactHooks/screen/__mocks__/useScreenContext.ts

@@ -1,7 +1,7 @@
 // @ts-ignore
 import { View } from "react-native";
 
-const mockData: NavigationScreenData = {
+const mockData = {
   screen: {
     id: "screen-id",
     name: "screen",
@@ -40,3 +40,5 @@ const mockData: NavigationScreenData = {
 };
 
 export const useScreenContext = jest.fn().mockReturnValue(mockData);
+
+export const useNavbarState = () => ({ visible: true });

package/reactHooks/screen/useScreenContext.ts

@@ -2,7 +2,7 @@ import { useContext, useMemo } from "react";
 
 import { useModalNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ModalNavigationContext";
 import { useNestedNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NestedNavigationContext";
-import { useNavigation } from "../navigation";
+import { useNavigation } from "../navigation/useNavigation";
 
 import { ScreenContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenContext";
 

package/reactHooks/screen/useScreenData.ts

@@ -4,7 +4,7 @@ import { useRivers } from "../state";
 
 const logger = utilsLogger.addSubsystem("useScreenData");
 
-export const useScreenData = (screenId?: string): ZappRiver => {
+export const useScreenData = (screenId: string): ZappRiver => {
   const rivers = useRivers();
 
   React.useEffect(() => {

package/reactHooks/screen/useTargetScreenData.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import * as R from "ramda";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 
 export function getTargetScreenData(
   entry: ZappEntry,
@@ -35,6 +36,12 @@ export function getTargetScreenData(
   return rivers?.[screenId];
 }
 
+export function getTargetScreenDataFromEntry(entry: ZappEntry): ZappRiver {
+  const { rivers, contentTypes } = appStore.get(["rivers", "contentTypes"]);
+
+  return getTargetScreenData(entry, rivers, contentTypes);
+}
+
 export const useTargetScreenData = (entry: ZappEntry) => {
   const { rivers, contentTypes } = usePickFromState(["rivers", "contentTypes"]);
 

package/reactHooks/useListenEventBusEvent.ts

@@ -13,10 +13,7 @@ export const useListenEventBusEvent = (
     // TODO: remove after implementing ReactNativeEventBusBridge on iOS
     if (Platform.OS === "android") {
       // subscribe to DeviceEventEmitter using subsciption ID
-      const sub = DeviceEventEmitter.addListener(
-        subscriptionID,
-        handler
-      );
+      const sub = DeviceEventEmitter.addListener(subscriptionID, handler);
 
       // ask native to start routing these events to RN
       ReactNativeEventBusBridge.subscribe(subscriptionID, { [source]: events });

package/reactHooks/videoModal/index.ts

@@ -2,9 +2,6 @@ import * as R from "ramda";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useMemoizedIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device";
 
-import { LogBox } from "react-native";
-LogBox.ignoreAllLogs();
-
 import { useMobileOrientationEffect } from "./useMobileOrientationEffect";
 import { noop } from "./utils";
 

package/testUtils/index.tsx

@@ -6,8 +6,10 @@ import { View } from "react-native";
 import { Provider } from "react-redux";
 import thunk from "redux-thunk";
 import configureStore from "redux-mock-store";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 
 import { render } from "@testing-library/react-native";
+import { AnalyticsProvider } from "../analyticsUtils";
 
 /**
  * Function to be used in tandem with enzyme findWhere(node => node.prop('testID') === 'yourID')
@@ -69,9 +71,20 @@ const initialState = {
 };
 
 export const WrappedWithProviders = ({ children, store = {} }: any) => {
-  const _store = configureStore([thunk])({ ...initialState, store });
+  const _store = configureStore([thunk])({ ...initialState, ...store });
 
-  return <Provider store={_store}>{children}</Provider>;
+  return (
+    <SafeAreaProvider
+      initialMetrics={{
+        insets: { top: 0, left: 0, right: 0, bottom: 0 },
+        frame: { x: 0, y: 0, width: 0, height: 0 },
+      }}
+    >
+      <Provider store={_store}>
+        <AnalyticsProvider>{children}</AnalyticsProvider>
+      </Provider>
+    </SafeAreaProvider>
+  );
 };
 
 /**