@applicaster/zapp-react-native-utils 12.0.0-alpha.5062263581 → 12.0.0-alpha.5085420612

package/analyticsUtils/helpers/hooks.ts

@@ -26,7 +26,7 @@ export const useHookAnalytics = (props): void => {
     if (screenData?.hookPlugin?.module?.runInBackground) {
       sendScreenEvent({ analyticsScreenData });
     }
-  }, [hookPlugin.screen_id]);
+  }, [sendScreenEvent, screenData, hookPlugin.screen_id]);
 };
 
 export const useScreenAnalytics = (props) => {

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/treeDataStructure/Utils/index.js

@@ -187,11 +187,20 @@ export function getTargetInDirection(
         return null;
       }
 
+      const orientationDistance = measureDistance(
+        direction,
+        comparisonRect,
+        componentRect
+      );
+
+      const euclidDistance = measureEuclidianDistanceToCenter(
+        comparisonRect,
+        componentRect
+      );
+
       return {
         distance:
-          measureDistance(direction, comparisonRect, componentRect) +
-          measureEuclidianDistanceToCenter(comparisonRect, componentRect) /
-            10000,
+          orientationDistance > 0 ? euclidDistance : orientationDistance,
         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/focusManager/index.ts

@@ -86,7 +86,7 @@ export const isFocusable = (component: ZappEntry | ZappUIComponent | any) =>
 
 type Props = {
   component: ZappUIComponent;
-  zappPipesData: ZappPipesData;
+  zappPipesData?: ZappPipesData;
 } & Record<string, any>;
 
 export const useIsFocusable = (props: Props): void => {

package/localizationUtils/index.ts

@@ -64,10 +64,13 @@ export function getIsRTLFromLocalizations(localizations): boolean {
   return R.contains(localeToUse, RTL_LOCALES);
 }
 
+const remoteConfigLocalizationSelector = R.path([
+  "remoteConfigurations",
+  "localizations",
+]);
+
 export function useIsRTL(): boolean {
-  const localizations = useSelector(
-    R.path(["remoteConfigurations", "localizations"])
-  );
+  const localizations = useSelector(remoteConfigLocalizationSelector);
 
   return getIsRTLFromLocalizations(localizations);
 }

package/logger/index.ts

@@ -72,7 +72,7 @@ const { quickBrickLogger, coreLogger, logger, logLevels, utilsLogger } =
 function useLogger(
   logger: XRayLoggerI,
   eventData: UseLoggerHookArgs,
-  deps = []
+  deps: string[] = []
 ) {
   const {
     level = logLevels.verbose,

package/manifestUtils/defaultManifestConfigurations/generalContent.js

@@ -245,6 +245,12 @@ const generalContent = () => ({
         ],
         initial_value: "reloading...",
       },
+      {
+        type: "text_input",
+        label: "Navigation Bar Screen Title",
+        key: "screen_title",
+        initial_value: null,
+      },
     ],
   },
   advertising: {

package/manifestUtils/defaultManifestConfigurations/player.js

@@ -1663,7 +1663,8 @@ function getPlayerConfiguration({ platform }) {
     platform.includes("lg") ||
     platform.includes("samsung") ||
     platform.includes("android_tv") ||
-    platform.includes("amazon")
+    platform.includes("amazon") ||
+    platform.includes("vizio")
   ) {
     styles.fields.push(
       // Captions Menu

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "12.0.0-alpha.5062263581",
+  "version": "12.0.0-alpha.5085420612",
   "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.5062263581",
+    "@applicaster/applicaster-types": "12.0.0-alpha.5085420612",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",

package/playerUtils/configurationGenerator.ts

@@ -22,6 +22,7 @@ function getDevice(platform) {
     case "android_tv_for_quickbrick":
     case "lg_tv":
     case "samsung_tv":
+    case "vizio":
     case "web":
       return "tv";
   }
@@ -1659,7 +1660,8 @@ function getPlayerConfiguration({ platform }) {
     platform.includes("lg") ||
     platform.includes("samsung") ||
     platform.includes("android_tv") ||
-    platform.includes("amazon")
+    platform.includes("amazon") ||
+    platform.includes("vizio")
   ) {
     styles.fields.push(
       // Captions Menu for TV

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 → useTrackedView.test.tsx}

@@ -1,4 +1,8 @@
+import React from "react";
+
 import { act, renderHook } from "@testing-library/react-hooks";
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
 
 const mockUpdateComponentsPositions = jest.fn();
 
@@ -17,11 +21,24 @@ jest.mock(
 
 jest.useFakeTimers();
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
+
+const mockStore = configureStore();
+
+const store = mockStore({ appData: {} });
+
+const Wrapper = ({ children }: { children: React.ReactChild }) => (
+  /* @ts-ignore */
+  <Provider store={store}>{children}</Provider>
+);
+
 const { useTrackedView } = require("../useTrackedView");
 
 describe("useTrackCurrentAutoScrollingElement", () => {
   it("should update position for selected component", async () => {
-    const { result } = renderHook(() => useTrackedView("123"));
+    const { result } = renderHook(() => useTrackedView("123"), {
+      wrapper: Wrapper,
+    });
 
     // Fast-forward until all timers have been executed
     jest.advanceTimersByTime(3000);

package/reactHooks/flatList/useLoadNextPageIfNeeded.ts

@@ -5,27 +5,34 @@ type Return = (index: number) => void;
 
 type Predicate = (
   entry: ZappUIComponentProps["zappPipesData"]["data"]["entry"],
-  index: number
+  index: number,
+  numberOfColumns: number
 ) => boolean;
 
 type Props = {
   ifNeeded: Predicate;
   loadNextData: () => void;
   entry: ZappUIComponentProps["zappPipesData"]["data"]["entry"];
+  numberOfColumns?: number;
 };
 
 const handleLoadNextPage =
   (
-    ifNeeded: (entry: ZappEntry[], index: number) => boolean,
+    ifNeeded: (
+      entry: ZappEntry[],
+      index: number,
+      numberOfColumns?: number
+    ) => boolean,
     loadNextData: () => void,
-    entry: ZappEntry[]
+    entry: ZappEntry[],
+    numberOfColumns
   ) =>
   (index: number) => {
     /**
      * Lazy-Loading, invoke nextLoadData if we reach the end of the List
      */
 
-    if (ifNeeded(entry, index)) {
+    if (ifNeeded(entry, index, numberOfColumns)) {
       loadNextData();
     }
   };
@@ -34,10 +41,10 @@ export const useLoadNextPageIfNeeded = ({
   ifNeeded,
   loadNextData = noop,
   entry,
+  numberOfColumns = 0,
 }: Props): Return => {
-  return React.useCallback(handleLoadNextPage(ifNeeded, loadNextData, entry), [
-    ifNeeded,
-    loadNextData,
-    entry,
-  ]);
+  return React.useCallback(
+    handleLoadNextPage(ifNeeded, loadNextData, entry, numberOfColumns),
+    [ifNeeded, loadNextData, entry, numberOfColumns]
+  );
 };

package/reactHooks/layout/__tests__/{index.test.js → index.test.tsx}

@@ -1,4 +1,8 @@
+import React from "react";
+
 import { cleanup, renderHook } from "@testing-library/react-hooks";
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
 
 import * as ReactNative from "react-native";
 
@@ -44,22 +48,47 @@ jest.mock("../../../reactUtils", () => ({
 
 jest.mock("../../navigation", () => ({
   useNavigation: () => null,
+  useIsScreenActive: () => true,
 }));
 
 const { Dimensions } = require("react-native");
-const { useDimensions } = require("../");
+const { useDimensions } = require("..");
+
+const mockStore = configureStore();
+
+const getWrapper = () => {
+  const store = mockStore({ appData: {} });
+
+  const Wrapper = ({ children }: { children: React.ReactChild }) => (
+    /* @ts-ignore */
+    <Provider store={store}>{children}</Provider>
+  );
+
+  return Wrapper;
+};
+
+const testHook = (context, params?) => {
+  const wrapper = getWrapper();
+
+  const {
+    result,
+    result: { current: dimensions },
+  } = renderHook(() => useDimensions(context, params), {
+    wrapper,
+  });
+
+  return { result, dimensions };
+};
 
 describe("useDimensions", () => {
   it("renders", () => {
-    const { result } = renderHook(() =>
-      useDimensions("window", { fullDimensions: true })
-    );
+    const { result } = testHook("window", { fullDimensions: true });
 
     expect(result).toBeDefined();
   });
 
   it("sets event listener", () => {
-    renderHook(() => useDimensions("window", { fullDimensions: true }));
+    testHook("window", { fullDimensions: true });
 
     expect(Dimensions.addEventListener).toBeCalledWith(
       "change",
@@ -68,16 +97,14 @@ describe("useDimensions", () => {
   });
 
   it("removes event listener", () => {
-    renderHook(() => useDimensions("window", { fullDimensions: true }));
+    testHook("window", { fullDimensions: true });
     cleanup();
 
     expect(mockRemoveFn).toBeCalled();
   });
 
   it("Returns full dimensions object", () => {
-    const {
-      result: { current: dimensions },
-    } = renderHook(() => useDimensions("window", { fullDimensions: true }));
+    const { dimensions } = testHook("window", { fullDimensions: true });
 
     expect(dimensions).toHaveProperty("height");
     expect(dimensions).toHaveProperty("width");
@@ -86,20 +113,17 @@ describe("useDimensions", () => {
   });
 
   it("Returns shorthand dimensions object", () => {
-    const {
-      result: { current: dimensions },
-    } = renderHook(() => useDimensions("window"));
+    const { dimensions } = testHook("window");
 
     expect(dimensions).toHaveProperty("height");
     expect(dimensions).toHaveProperty("width");
   });
 
   it("Returns the device info object", () => {
-    const {
-      result: { current: dimensions },
-    } = renderHook(() =>
-      useDimensions("window", { fullDimensions: true, deviceInfo: true })
-    );
+    const { dimensions } = testHook("window", {
+      fullDimensions: true,
+      deviceInfo: true,
+    });
 
     expect(dimensions).toHaveProperty("height");
     expect(dimensions).toHaveProperty("width");
@@ -112,10 +136,7 @@ describe("useDimensions", () => {
     it("applies the scale on TV, and screen context", () => {
       tv_flag = true;
       const { screen } = mocked_return_value(tv_flag);
-
-      const {
-        result: { current: dimensions },
-      } = renderHook(() => useDimensions("screen"));
+      const { dimensions } = testHook("screen");
 
       expect(dimensions).toHaveProperty("height", screen.height * screen.scale);
       expect(dimensions).toHaveProperty("width", screen.width * screen.scale);
@@ -127,10 +148,7 @@ describe("useDimensions", () => {
     it("doesn't apply the scale on mobile with screen context", () => {
       tv_flag = false;
       const { screen } = mocked_return_value(tv_flag);
-
-      const {
-        result: { current: dimensions },
-      } = renderHook(() => useDimensions("screen"));
+      const { dimensions } = testHook("screen");
 
       expect(dimensions).toHaveProperty("height", screen.height);
       expect(dimensions).toHaveProperty("width", screen.width);
@@ -140,10 +158,7 @@ describe("useDimensions", () => {
     it("doesn't apply the scale on TV with window context", () => {
       tv_flag = true;
       const { window } = mocked_return_value(tv_flag);
-
-      const {
-        result: { current: dimensions },
-      } = renderHook(() => useDimensions("window"));
+      const { dimensions } = testHook("window");
 
       expect(dimensions).toHaveProperty("height", window.height);
       expect(dimensions).toHaveProperty("width", window.width);

package/reactHooks/layout/getDeviceInfo/index.ts

@@ -3,13 +3,15 @@ import { isTablet } from "../isTablet";
 /**
  * Returns an object with additional device info that can be used to determine if tablet
  * @param {Number} dimensions - Dimensions object passed to the function
+ * @param {Object} appData - application data object passed to the function
  * @returns {DeviceInfo} deviceInfo - returns an object with scale, isTablet, and orientation
  */
-export const getDeviceInfo = (dimensions) => {
+export const getDeviceInfo = (dimensions, appData) => {
   const scale = dimensions?.scale;
   const isLandscape = dimensions?.width > dimensions?.height;
   const orientation = isLandscape ? "landscape" : "portrait";
   const tablet = isTablet(dimensions, orientation) || false;
+  const isTabletLandscape = tablet && !appData?.isTabletPortrait;
 
-  return { scale, isTablet: tablet, orientation };
+  return { scale, isTablet: tablet, orientation, isTabletLandscape };
 };

package/reactHooks/layout/types/index.ts

@@ -2,6 +2,7 @@ type DeviceInfo = {
   isTablet: boolean;
   scale: number;
   orientation: string;
+  isTabletLandscape: boolean;
 };
 
 type RNDimensions = {
@@ -20,6 +21,7 @@ export type Options = {
   excludeStatusBar?: boolean;
   rounded?: boolean;
   deviceInfo?: boolean;
+  updateForInactiveScreens?: boolean;
 };
 
 export type Context = "window" | "screen";

package/reactHooks/layout/useDimensions/useDimensions.ts

@@ -1,13 +1,16 @@
-import { useState, useLayoutEffect, useRef, useMemo } from "react";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
 
 import * as R from "ramda";
 
 import { Dimensions, Platform, StatusBar } from "react-native";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+
 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 +35,11 @@ const statusBarHeight = StatusBar?.currentHeight;
  */
 export const useDimensions: UseDimensions = (
   context = "window",
-  fullDimensions = { fullDimensions: false }
+  fullDimensions = { fullDimensions: false, updateForInactiveScreens: true }
 ) => {
+  const isActive = useIsScreenActive();
+  const { appData } = usePickFromState(["appData"]);
+
   if (typeof fullDimensions === "boolean") {
     // eslint-disable-next-line no-console
     console.warn(
@@ -47,7 +53,7 @@ export const useDimensions: UseDimensions = (
       : { ...fullDimensions };
 
   const [dimensions, setDimensions] = useState(getInitialDimensions(context));
-  const deviceInfo = useRef(getDeviceInfo(dimensions));
+  const deviceInfo = useRef(getDeviceInfo(dimensions, appData));
 
   const applyOptions = R.compose(
     R.when(() => options.deviceInfo, R.assoc("deviceInfo", deviceInfo.current)),
@@ -73,7 +79,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,8 +87,8 @@ export const useDimensions: UseDimensions = (
 
         // eslint-disable-next-line no-console
         console.log("change: wrong values - width equal to height, ignoring");
-      } else {
-        deviceInfo.current = getDeviceInfo(newDimensions);
+      } else if (isActive || options.updateForInactiveScreens) {
+        deviceInfo.current = getDeviceInfo(newDimensions, appData);
         setDimensions(newDimensions);
       }
     };
@@ -92,7 +98,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/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,63 @@ 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;
+
+    // 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 composeRouteData(screenData);
   }
 
-  const screenData = currentRouteScreenData;
+  // case 1: stack not yet updated in navigator context, but navigator.screenData is updated already.
+  if (!currentStack) {
+    return composeRouteData(navigator.screenData);
+  }
 
-  return { screenData, pathname };
+  return composeRouteData(currentRouteScreenData);
 };
 
 type Callbacks = Partial<{
@@ -446,3 +481,18 @@ 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;
+};

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/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/state/useRivers.ts

@@ -1,7 +1,9 @@
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
+const riversSelector = ["rivers"];
+
 export const useRivers = () => {
-  const { rivers } = usePickFromState(["rivers"]);
+  const { rivers } = usePickFromState(riversSelector as any);
 
   return rivers;
 };

package/reactHooks/videoModal/hooks/useVideoModalScreenData.tsx

@@ -1,8 +1,7 @@
-import {
-  useContentTypes,
-  usePickFromState,
-} from "@applicaster/zapp-react-native-redux/hooks";
+import React from "react";
+import { useContentTypes } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useRivers } from "../../state";
 
 export const useVideoModalScreenData = ():
   | (ZappEntry & { targetScreen: any }) // TODO: fix ZappEntry type ( was ZappRiver but conflict )
@@ -12,11 +11,13 @@ export const useVideoModalScreenData = ():
   } = useNavigation();
 
   const contentTypes = useContentTypes();
-  const { rivers } = usePickFromState(["rivers"]);
+  const rivers = useRivers();
 
-  if (item?.type?.value) {
-    const screenId = contentTypes[item?.type?.value].screen_id;
+  return React.useMemo(() => {
+    if (item?.type?.value) {
+      const screenId = contentTypes[item?.type?.value].screen_id;
 
-    return { ...item, targetScreen: rivers?.[screenId] };
-  }
+      return { ...item, targetScreen: rivers?.[screenId] };
+    }
+  }, [item]);
 };

package/riverComponetsMeasurementProvider/index.tsx

@@ -3,7 +3,7 @@ import { NativeModules, StyleSheet, View } from "react-native";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 
 import { isApplePlatform, isWeb } from "../reactUtils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useRivers } from "../reactHooks/state";
 
 const layoutReducer = (state, { payload }) => {
   return state.map((item, index, _state) => ({
@@ -58,7 +58,7 @@ export const ScreenLoadingMeasurements = ({
   numberOfComponents,
   riverId,
 }: Props) => {
-  const { rivers } = usePickFromState(["rivers"]);
+  const rivers = useRivers();
   const screenData = rivers?.[riverId];
 
   const [itemsLayout, dispatchItemLayout] = React.useReducer(