@applicaster/zapp-react-native-utils 12.0.0-rc.69 → 12.0.0-rc.70

package/appUtils/focusManager/__tests__/__snapshots__/focusManager.test.js.snap

@@ -3,9 +3,7 @@
 exports[`focusManager should be defined 1`] = `
 Object {
   "blur": [Function],
-  "disableAutomaticFocus": [Function],
   "disableFocus": [Function],
-  "enableAutomaticFocus": [Function],
   "enableFocus": [Function],
   "focusableTree": Tree {
     "loadingCounter": 0,
@@ -23,6 +21,7 @@ Object {
   "getGroupById": [Function],
   "getGroupRootById": [Function],
   "invokeHandler": [Function],
+  "isCurrentFocusOnTheTopScreen": [Function],
   "isFocusDisabled": [Function],
   "isGroupItemFocused": [Function],
   "longPress": [Function],
@@ -30,11 +29,11 @@ Object {
   "on": [Function],
   "press": [Function],
   "pressOut": [Function],
+  "recoverFocus": [Function],
   "register": [Function],
   "removeHandler": [Function],
   "setFocus": [Function],
   "setInitialFocus": [Function],
-  "setupInitialFocus": [Function],
   "unregister": [Function],
 }
 `;

package/appUtils/focusManager/__tests__/focusManager.test.js

@@ -14,10 +14,8 @@ describe("focusManager", () => {
     expect(focusManager).toMatchSnapshot();
   });
 
-  it("enableAutomaticFocus should not block setting focus", () => {
+  it("manages to land initial focus", () => {
     const mockSetFocus = jest.fn();
-    focusManager.setupInitialFocus("1", true);
-    focusManager.enableAutomaticFocus();
 
     focusManager.register({
       id: "1",
@@ -31,31 +29,13 @@ describe("focusManager", () => {
       },
     });
 
+    const { success } = focusManager.setInitialFocus();
+
+    expect(success).toBe(true);
     expect(mockSetFocus).toBeCalledTimes(1);
     expect(mockSetFocus).toBeCalledWith(null);
   });
 
-  it("enableAutomaticFocus should block setting focus", () => {
-    const mockSetFocus = jest.fn();
-    focusManager.setupInitialFocus("1", true);
-    focusManager.disableAutomaticFocus();
-
-    focusManager.register({
-      id: "1",
-      component: {
-        setFocus: mockSetFocus,
-        willReceiveFocus: function () {},
-        isMounted: function () {
-          return true;
-        },
-        props: { groupId: "121" },
-      },
-    });
-
-    expect(mockSetFocus).toBeCalledTimes(0);
-    expect(mockSetFocus).not.toBeCalledWith(null);
-  });
-
   describe("register", () => {});
   describe("unregister", () => {});
   describe("find", () => {});

package/appUtils/focusManager/__tests__/index.test.ts

@@ -18,7 +18,6 @@ describe("focusManager", () => {
       "on",
       "invokeHandler",
       "removeHandler",
-      "setupInitialFocus",
       "longPress",
       "pressOut",
       "enableFocus",
@@ -27,10 +26,10 @@ describe("focusManager", () => {
       "isFocusDisabled",
       "getCurrentFocusNode",
       "focusableTree",
-      "disableAutomaticFocus",
-      "enableAutomaticFocus",
       "getGroupRootById",
       "isGroupItemFocused",
+      "recoverFocus",
+      "isCurrentFocusOnTheTopScreen",
     ];
 
     expectedMethods.forEach((method) => {

package/appUtils/focusManager/index.ts

@@ -1,6 +1,15 @@
 import * as R from "ramda";
+import {
+  isNilOrEmpty,
+  isNotNil,
+} from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+
 import { Tree } from "./treeDataStructure/Tree";
-import { findFocusableNode, findPriorityItem } from "./treeDataStructure/Utils";
+import {
+  findFocusableNode,
+  findPriorityItem,
+  haveSameParentBeforeRoot,
+} from "./treeDataStructure/Utils";
 import { subscriber } from "../../functionUtils";
 import * as FOCUS_EVENTS from "./events";
 import { coreLogger } from "../../logger";
@@ -44,21 +53,9 @@ export const focusManager = (function () {
   // focusable node which currently holds the focus
   let currentFocusNode = null;
   let lastFocusedId = null;
-  let initialFocusOnContent = null;
   let focusDisabled = false;
-  let focusAutoEnabled = true;
   const eventHandler = subscriber();
 
-  function disableAutomaticFocus() {
-    logger.log({ message: "disableAutomaticFocus" });
-    focusAutoEnabled = false;
-  }
-
-  function enableAutomaticFocus() {
-    logger.log({ message: "focusManager: enableAutomaticFocus" });
-    focusAutoEnabled = true;
-  }
-
   function enableFocus() {
     focusDisabled = false;
   }
@@ -93,7 +90,7 @@ export const focusManager = (function () {
       !currentFocusable.isGroup &&
       currentFocusable.isMounted()
     ) {
-      currentFocusable.blur(currentFocusable, direction);
+      currentFocusable.blur(direction);
       currentFocusable.hasLostFocus(getCurrentFocus(), direction);
     }
   }
@@ -226,32 +223,52 @@ export const focusManager = (function () {
 
     logger.log({ message: "setInitialFocus", data: { preferredFocus } });
 
-    if (preferredFocus && preferredFocus.length > 0) {
-      const focusCandidate = preferredFocus[0];
-      const focusableItem = focusCandidate.component;
-
-      if (
-        focusableItem &&
-        !focusableItem.isGroup &&
-        isFocusEnabled(focusableItem)
-      ) {
-        if (initialFocusOnContent) {
-          blur();
-          initialFocusOnContent = false;
-        }
+    if (isNilOrEmpty(preferredFocus)) {
+      return { success: false };
+    }
 
-        logger.log({
-          message: "setInitialFocus – currentFocusNode",
-          data: {
-            focusableItem,
-          },
-        });
+    const focusCandidate = preferredFocus[0];
+    const focusableItem = focusCandidate.component;
 
-        currentFocusNode = focusCandidate;
-        focusableItem.willReceiveFocus(focusableItem, null);
-        focusableItem && setFocus(focusCandidate.id, null);
-      }
+    const currentFocusedId = R.path(["props", "id"], getCurrentFocus());
+    const nextFocusedId = R.path(["props", "id"], focusableItem);
+
+    if (
+      isNotNil(currentFocusedId) &&
+      isNotNil(nextFocusedId) &&
+      currentFocusedId === nextFocusedId
+    ) {
+      // we are going to move focus to the same node(already focused) -> nothing to do
+      return { success: true };
+    }
+
+    if (focusableItem?.isGroup) {
+      // focusCandidate is a FocusableGroup, we are not able to land focus on group(only on Focusable)
+      return { success: false };
     }
+
+    if (
+      focusableItem &&
+      !focusableItem.isGroup &&
+      isFocusEnabled(focusableItem)
+    ) {
+      blur();
+
+      logger.log({
+        message: "setInitialFocus – currentFocusNode",
+        data: {
+          focusableItem,
+        },
+      });
+
+      currentFocusNode = focusCandidate;
+      focusableItem.willReceiveFocus(focusableItem, null);
+      focusableItem && setFocus(focusCandidate.id, null);
+
+      return { success: true };
+    }
+
+    return { success: false };
   }
 
   function treeLoaded(val, node) {
@@ -261,17 +278,8 @@ export const focusManager = (function () {
         val,
         node,
         currentFocusNode,
-        initialFocusOnContent,
       },
     });
-
-    if ((val && !currentFocusNode) || initialFocusOnContent) {
-      logger.log({ message: `focusAutoEnabled ${focusAutoEnabled}` });
-
-      if (focusAutoEnabled) {
-        setInitialFocus(initialFocusOnContent ? node : undefined);
-      }
-    }
   }
 
   /**
@@ -402,11 +410,21 @@ export const focusManager = (function () {
     group ? unregisterGroup(id) : unregisterItem(id);
   }
 
-  function setupInitialFocus(id: string, focusOnContent?: boolean) {
-    if (focusOnContent) {
-      initialFocusOnContent = focusOnContent;
-    } else {
-      setFocus(id);
+  function isCurrentFocusOnTheTopScreen() {
+    const routes = R.pathOr([], ["root", "children"], focusableTree);
+
+    if (routes.length <= 1) {
+      // there is only one or zero routes
+      return true;
+    }
+
+    return haveSameParentBeforeRoot(currentFocusNode, R.last(routes));
+  }
+
+  function recoverFocus() {
+    if (!isCurrentFocusOnTheTopScreen()) {
+      // We've failed to set focused node on the new screen => run focus recovery
+      setInitialFocus();
     }
   }
 
@@ -416,6 +434,11 @@ export const focusManager = (function () {
    * @param {Object} direction of the scroll
    */
   function moveFocus(direction) {
+    if (!isCurrentFocusOnTheTopScreen()) {
+      // We are opening new screen. We need to ignore movement of focus.
+      return false;
+    }
+
     if (focusDisabled) return false;
 
     if (currentFocusNode) {
@@ -444,8 +467,6 @@ export const focusManager = (function () {
       } else {
         currentFocusNode.component.failedLostFocus(currentFocusNode, direction);
       }
-    } else {
-      setInitialFocus();
     }
   }
 
@@ -505,7 +526,6 @@ export const focusManager = (function () {
     on,
     invokeHandler,
     removeHandler,
-    setupInitialFocus,
     longPress,
     pressOut,
     enableFocus,
@@ -514,9 +534,9 @@ export const focusManager = (function () {
     isFocusDisabled,
     getCurrentFocusNode,
     focusableTree,
-    disableAutomaticFocus,
-    enableAutomaticFocus,
     getGroupRootById,
     isGroupItemFocused,
+    recoverFocus,
+    isCurrentFocusOnTheTopScreen,
   };
 })();

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

@@ -1,5 +1,7 @@
-import * as R from "ramda";
+import { allPass, pathOr, startsWith, isNil } from "ramda";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+import { isZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { QUICK_BRICK_NAVBAR } from "@applicaster/quick-brick-core/const";
 
 import { rejectItemByPath } from "../../../../objectUtils";
 import {
@@ -143,7 +145,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 || isZero(value);
+
+const excludeFromFocusSearching = pathOr(false, [
+  "component",
+  "props",
+  "excludeFromFocusSearching",
+]);
+
+const isNavBar = (target) => startsWith(QUICK_BRICK_NAVBAR, target?.id);
+
+const ignoreMenuIfMultipleTargets = (nodes) => {
+  if (nodes.length > 1) {
+    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,52 +215,18 @@ 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;
-      }
-
-      const orientationDistance = measureDistance(
-        direction,
-        comparisonRect,
-        componentRect
-      );
-
-      const euclidDistance = measureEuclidianDistanceToCenter(
-        comparisonRect,
-        componentRect
-      );
-
-      return {
-        distance:
-          orientationDistance > 0 ? euclidDistance : orientationDistance,
-        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;
+  return match?.target;
 }
 
 /**
@@ -309,3 +317,26 @@ export function hasPriorityInDirection(direction, component) {
 
   return (prioritiseFocusOn & mappedDirection) > 0;
 }
+
+export const getNodeBeforeRoot = (node) => {
+  if (isNil(node)) {
+    return undefined;
+  }
+
+  if (isNil(node.parent)) {
+    return undefined;
+  }
+
+  if (node.parent.id === "root") {
+    return node;
+  }
+
+  return getNodeBeforeRoot(node.parent);
+};
+
+export const haveSameParentBeforeRoot = (currentNode, nextNode) => {
+  const routeForCurrentNode = getNodeBeforeRoot(currentNode);
+  const routeForNextNode = getNodeBeforeRoot(nextNode);
+
+  return routeForCurrentNode?.id === routeForNextNode?.id;
+};

package/appUtils/focusManager/utils/index.ts

@@ -0,0 +1,100 @@
+import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+import { find, last, startsWith, pathOr } from "ramda";
+import {
+  QUICK_BRICK_NAVBAR,
+  QUICK_BRICK_CONTENT,
+} from "@applicaster/quick-brick-core/const";
+
+// run check each 300 ms
+// run this check too often could lead to performance penalty on low-end devices
+const HOW_OFTEN_TO_CHECK_CONDITION = 300; // ms
+
+type Props = {
+  maxTimeout: number;
+  conditionFn: () => boolean;
+};
+
+export const waitUntil = ({ maxTimeout, conditionFn }: Props) => {
+  let interval;
+  let timeout;
+
+  return new Promise((resolve, reject) => {
+    // run interval check
+    interval = setInterval(() => {
+      if (conditionFn()) {
+        clearInterval(interval);
+        clearTimeout(timeout);
+
+        resolve(undefined);
+      }
+    }, HOW_OFTEN_TO_CHECK_CONDITION);
+
+    // max timeout when we need to stop interval check
+    timeout = setTimeout(() => {
+      clearInterval(interval);
+      clearTimeout(timeout);
+
+      const error = Error(
+        "Failed to wait satisfy condition. Max timeout is reached."
+      );
+
+      reject(error);
+    }, maxTimeout);
+  });
+};
+
+export const waitForActiveScreen = (currentRoute: string, focusableTree) => {
+  const isActiveScreenAvailableToFocus = (): boolean => {
+    const routes = focusableTree.root.children;
+
+    const route = find((route) => route.id === currentRoute, routes);
+
+    return isNotNil(route);
+  };
+
+  return waitUntil({
+    maxTimeout: HOW_OFTEN_TO_CHECK_CONDITION * 10, // ms
+    conditionFn: isActiveScreenAvailableToFocus,
+  });
+};
+
+const getActiveScreenChildren = (focusableTree) => {
+  return pathOr([], ["children"], last(focusableTree.root.children));
+};
+
+export const getContentNode = (focusableTree) => {
+  const content = find(
+    (child) =>
+      startsWith(QUICK_BRICK_CONTENT, child.id) ||
+      startsWith("player", child.id),
+    getActiveScreenChildren(focusableTree)
+  );
+
+  return content;
+};
+
+export const getNavbarNode = (focusableTree) => {
+  const navbar = find(
+    (child) => startsWith(QUICK_BRICK_NAVBAR, child.id),
+    getActiveScreenChildren(focusableTree)
+  );
+
+  return navbar;
+};
+
+export const waitForContent = (focusableTree) => {
+  const contentHasAnyChildren = (): boolean => {
+    const countOfChildren = pathOr(
+      0,
+      ["children", "length"],
+      getContentNode(focusableTree)
+    );
+
+    return countOfChildren > 0;
+  };
+
+  return waitUntil({
+    maxTimeout: HOW_OFTEN_TO_CHECK_CONDITION * 10, // ms
+    conditionFn: contentHasAnyChildren,
+  });
+};

package/appUtils/focusManagerAux/index.ts

@@ -0,0 +1,76 @@
+import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
+import { find, path } from "ramda";
+
+import {
+  waitForActiveScreen,
+  waitForContent,
+  getContentNode,
+  getNavbarNode,
+} from "./utils";
+
+import { coreLogger } from "../../logger";
+
+const logger = coreLogger.addSubsystem("focusManagerAux");
+
+export async function setFocusOnMenu(currentRoute: string) {
+  const { setFocus, focusableTree } = focusManager;
+
+  try {
+    await waitForActiveScreen(currentRoute, focusableTree);
+
+    const navbar = getNavbarNode(focusableTree);
+
+    const selectedMenuItemId = find(
+      (child) => child.component.props.selected,
+      navbar.children
+    )?.id;
+
+    if (selectedMenuItemId) {
+      // set focus on selected menu item
+      setFocus(selectedMenuItemId);
+
+      return;
+    }
+
+    const firstMenuItemId = path(["children", 0, "id"], navbar);
+
+    if (firstMenuItemId) {
+      // set focus on first menu item
+      setFocus(firstMenuItemId);
+    }
+  } catch (error) {
+    logger.log({
+      message: "setFocusOnMenu – failed to put focus on top-menu",
+      data: {
+        currentRoute,
+        error,
+      },
+    });
+  }
+}
+
+export async function setFocusOnContent(currentRoute: string) {
+  // we need to put focus on content here
+  // For doing it we have to wait registration of first focusable node into focusableTree
+  // we wait until content node starts having children
+
+  const { setInitialFocus, focusableTree } = focusManager;
+
+  try {
+    await waitForActiveScreen(currentRoute, focusableTree);
+    await waitForContent(focusableTree);
+
+    const content = getContentNode(focusableTree);
+
+    const { success } = setInitialFocus(content);
+
+    if (!success) {
+      // we've failed to put initial focus on content, re-run "setFocusOnContent" again as a fallback
+      throw Error(
+        "we've failed to put initial focus on content, re-run 'setFocusOnContent' again as a fallback"
+      );
+    }
+  } catch (error) {
+    setFocusOnContent(currentRoute);
+  }
+}

package/appUtils/focusManagerAux/utils/index.ts

@@ -0,0 +1,100 @@
+import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+import { find, last, startsWith, pathOr } from "ramda";
+import {
+  QUICK_BRICK_NAVBAR,
+  QUICK_BRICK_CONTENT,
+} from "@applicaster/quick-brick-core/const";
+
+// run check each 300 ms
+// run this check too often could lead to performance penalty on low-end devices
+const HOW_OFTEN_TO_CHECK_CONDITION = 300; // ms
+
+type Props = {
+  maxTimeout: number;
+  conditionFn: () => boolean;
+};
+
+export const waitUntil = ({ maxTimeout, conditionFn }: Props) => {
+  let interval;
+  let timeout;
+
+  return new Promise((resolve, reject) => {
+    // run interval check
+    interval = setInterval(() => {
+      if (conditionFn()) {
+        clearInterval(interval);
+        clearTimeout(timeout);
+
+        resolve(undefined);
+      }
+    }, HOW_OFTEN_TO_CHECK_CONDITION);
+
+    // max timeout when we need to stop interval check
+    timeout = setTimeout(() => {
+      clearInterval(interval);
+      clearTimeout(timeout);
+
+      const error = Error(
+        "Failed to wait satisfy condition. Max timeout is reached."
+      );
+
+      reject(error);
+    }, maxTimeout);
+  });
+};
+
+export const waitForActiveScreen = (currentRoute: string, focusableTree) => {
+  const isActiveScreenAvailableToFocus = (): boolean => {
+    const routes = focusableTree.root.children;
+
+    const route = find((route) => route.id === currentRoute, routes);
+
+    return isNotNil(route);
+  };
+
+  return waitUntil({
+    maxTimeout: HOW_OFTEN_TO_CHECK_CONDITION * 10, // ms
+    conditionFn: isActiveScreenAvailableToFocus,
+  });
+};
+
+const getActiveScreenChildren = (focusableTree) => {
+  return pathOr([], ["children"], last(focusableTree.root.children));
+};
+
+export const getContentNode = (focusableTree) => {
+  const content = find(
+    (child) =>
+      startsWith(QUICK_BRICK_CONTENT, child.id) ||
+      startsWith("player", child.id),
+    getActiveScreenChildren(focusableTree)
+  );
+
+  return content;
+};
+
+export const getNavbarNode = (focusableTree) => {
+  const navbar = find(
+    (child) => startsWith(QUICK_BRICK_NAVBAR, child.id),
+    getActiveScreenChildren(focusableTree)
+  );
+
+  return navbar;
+};
+
+export const waitForContent = (focusableTree) => {
+  const contentHasAnyChildren = (): boolean => {
+    const countOfChildren = pathOr(
+      0,
+      ["children", "length"],
+      getContentNode(focusableTree)
+    );
+
+    return countOfChildren > 0;
+  };
+
+  return waitUntil({
+    maxTimeout: HOW_OFTEN_TO_CHECK_CONDITION * 10, // ms
+    conditionFn: contentHasAnyChildren,
+  });
+};

package/arrayUtils/__tests__/isFilledArray.test.ts

@@ -0,0 +1,63 @@
+import { isFilledArray } from "..";
+
+describe("isFilledArray", () => {
+  it("non-empty array is not empty", () => {
+    const value = [1, 2, 3];
+
+    expect(isFilledArray(value)).toBe(true);
+  });
+
+  it("empty array is empty", () => {
+    const value = [];
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("number is not array", () => {
+    const value = 123;
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("string is not array", () => {
+    const value = "vfnjdk";
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("empty string is not array", () => {
+    const value = "";
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("NaN is not array", () => {
+    const value = "";
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("object is not array", () => {
+    const value = { test: 1 };
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("empty object is not array", () => {
+    const value = {};
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("undefined is not array", () => {
+    const value = undefined;
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+
+  it("null is not array", () => {
+    const value = null;
+
+    expect(isFilledArray(value)).toBe(false);
+  });
+});

package/arrayUtils/index.ts

@@ -95,3 +95,8 @@ export const makeListOfIndexes = (size: number): number[] =>
 export const makeListOf = (value: unknown, size: number): number[] => {
   return Array(size).fill(value);
 };
+
+/** Checks if a value is a non-empty array */
+export function isFilledArray(value: unknown): boolean {
+  return R.is(Array, value) && R.length(value) > 0;
+}

package/numberUtils/__tests__/isLikeNumber.test.ts

@@ -7,12 +7,24 @@ describe("isLikeNumber", () => {
     expect(isLikeNumber(value)).toBe(true);
   });
 
+  it("value is a number", () => {
+    const value = 123.45;
+
+    expect(isLikeNumber(value)).toBe(true);
+  });
+
   it("value is a string as number", () => {
     const value = "123";
 
     expect(isLikeNumber(value)).toBe(true);
   });
 
+  it("value is a string as number", () => {
+    const value = "123.45";
+
+    expect(isLikeNumber(value)).toBe(true);
+  });
+
   it("value is empty string", () => {
     const value = "";
 
@@ -54,4 +66,10 @@ describe("isLikeNumber", () => {
 
     expect(isLikeNumber(value)).toBe(false);
   });
+
+  it("NaN is not a number", () => {
+    const value = NaN;
+
+    expect(isLikeNumber(value)).toBe(false);
+  });
 });

package/numberUtils/index.ts

@@ -50,27 +50,14 @@ export const toFiniteNumberWithDefault = (
   return possibleNumber;
 };
 
-export const isLikeNumber = (value: any): boolean => {
-  if (R.isEmpty(value)) {
-    return false;
-  }
-
-  if (R.is(Number, value)) {
-    return true;
-  }
-
-  if (R.is(String, value)) {
-    const onlyDigit = value
-      .split("")
-      .filter((char) =>
-        ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"].includes(char)
-      )
-      .join("");
+export const isLikeNumber = (value: unknown): boolean => {
+  const possibleNumber = toNumber(value);
 
-    return value === onlyDigit;
+  if (R.isNil(possibleNumber)) {
+    return false;
   }
 
-  return false;
+  return true;
 };
 
 export const isZero = (value: unknown): boolean =>

package/package.json

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

package/reactHooks/cell-click/__tests__/index.test.js

@@ -1,6 +1,8 @@
 import * as React from "react";
 import { cleanup, renderHook } from "@testing-library/react-hooks";
 import { CellTapContext } from "@applicaster/zapp-react-native-ui-components/Contexts/CellTapContext";
+import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutorContext";
+
 import { waitFor } from "@testing-library/react-native";
 
 const navigator = {
@@ -29,10 +31,6 @@ jest.mock("@applicaster/zapp-react-native-ui-components/Contexts", () => ({
   },
 }));
 
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
-  useScreenContext: jest.fn(() => navigator.data),
-}));
-
 const { useCellClick } = require("../");
 
 const mockProps = {
@@ -47,9 +45,15 @@ const mockProps = {
 
 const onCellTap = jest.fn();
 
+const actionExecutor = {
+  handleEntryActions: jest.fn(() => Promise.resolve()),
+};
+
 const wrapper = ({ children }) => (
   <CellTapContext.Provider value={onCellTap}>
-    {children}
+    <ActionExecutorContext.Provider value={actionExecutor}>
+      {children}
+    </ActionExecutorContext.Provider>
   </CellTapContext.Provider>
 );
 

package/reactHooks/cell-click/index.ts

@@ -1,7 +1,6 @@
 /// <reference types="@applicaster/applicaster-types" />
 
 import * as React from "react";
-import { useContext } from "react";
 import * as R from "ramda";
 import { handleActionSchemeUrl } from "@applicaster/quick-brick-core/App/DeepLinking/URLSchemeHandler/SchemeHandlerHooks/useUrlSchemeHandler";
 import { CellTapContext } from "@applicaster/zapp-react-native-ui-components/Contexts/CellTapContext";
@@ -12,8 +11,9 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { ZappPipesEntryContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { toBooleanWithDefaultTrue } from "@applicaster/zapp-react-native-utils/booleanUtils";
-import { noop } from "../../functionUtils";
-import { ActionExecutorContext } from "../../actionsExecutor/ActionExecutorContext";
+import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutorContext";
+
+import { isFunction, noop } from "../../functionUtils";
 import { useSendAnalyticsOnPress } from "../analytics";
 import { logOnPress, warnEmptyContentType } from "./helpers";
 
@@ -30,12 +30,12 @@ type Props = {
   zappPipesData?: ZappPipesData;
 };
 
-export const useCellClick = (props: Props) => {
-  const { component, zappPipesData } = props;
+export const useCellClick = ({ component, zappPipesData, item }: Props) => {
   const { push, currentRoute } = useNavigation();
   const { pathname } = useRoute();
-  const onCellTap = React.useContext(CellTapContext);
-  const actionExecutor = useContext(ActionExecutorContext);
+
+  const onCellTap: Option<Function> = React.useContext(CellTapContext);
+  const actionExecutor = React.useContext(ActionExecutorContext);
 
   const cellSelectable = toBooleanWithDefaultTrue(
     component?.rules?.component_cells_selectable
@@ -47,7 +47,7 @@ export const useCellClick = (props: Props) => {
   const logTimestamp = useProfilerLogging();
 
   const sendAnalyticsOnPress = useSendAnalyticsOnPress(
-    props.item,
+    item,
     component,
     zappPipesData
   );
@@ -56,7 +56,7 @@ export const useCellClick = (props: Props) => {
     async (_item?: ZappEntry | any, _index?: number) => {
       // Making sure we are not getting GestureResponderEvent in here.
       const isZappEntry = _item?.id && _item?.type;
-      const selectedItem = isZappEntry ? _item : props.item;
+      const selectedItem = isZappEntry ? _item : item;
       setEntryContext?.(selectedItem);
 
       if (!selectedItem?.type?.value) {
@@ -80,8 +80,8 @@ export const useCellClick = (props: Props) => {
           });
         }
       } else {
-        if (typeof onCellTap === "function") {
-          onCellTap(selectedItem, _index);
+        if (isFunction(onCellTap)) {
+          onCellTap?.(selectedItem, _index);
         } else {
           if (currentRoute === pathname || pathname.includes("video-modal")) {
             const targetScreen = component?.data?.target;

package/reactHooks/feed/__tests__/useBuildPipesUrl.test.tsx

@@ -1,77 +1,26 @@
-import React from "react";
 import { renderHook } from "@testing-library/react-hooks";
-import configureStore from "redux-mock-store";
-import thunk from "redux-thunk";
-import { Provider } from "react-redux";
-
 import { encodeParams } from "@applicaster/zapp-pipes-v2-client/src/utils";
 
-const mockStore = configureStore([thunk]);
-
-jest.useFakeTimers();
-
 const appData = {
   platform: "foo",
   version_name: "1.2.0",
   sdk_version: "2.0.0",
 };
 
-const pipesEndpoints = {
-  "http://foo.com/show": {
-    context_obj: [
-      { type: "ctx", key: "platform" },
-      { type: "query", mapper: "version", key: "appVersion" },
-      { type: "header", mapper: "SDK", key: "sdkVersion" },
-    ],
-  },
-};
-
-const store_mock = { appData, pipesEndpoints };
-
-const defaultStore = mockStore({
-  pipesEndpoints,
-  appData,
-});
+let INFLATED_URL;
 
-const wrapper: React.FC<any> = ({ children, store }) => (
-  <Provider store={store}>{children}</Provider>
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/feed/useInflatedUrl",
+  () => ({
+    useInflatedUrl: () => INFLATED_URL,
+  })
 );
 
-const navigator = {
-  currentRoute: "/river/A1234",
-};
-
-jest.mock("../../navigation", () => ({
-  useNavigation: jest.fn(() => navigator),
-  useRoute: jest.fn(() => ({})),
-}));
-
-const contexts = {
-  entry: { id: "show-1" },
-  search: {},
-  screen: {},
-};
-
-const contextMock = (type) => ({
-  useZappPipesContext: () => [contexts[type] || {}],
-});
-
-jest.mock("@applicaster/zapp-react-native-ui-components/Contexts", () => ({
-  ZappPipesEntryContext: contextMock("entry"),
-  ZappPipesSearchContext: contextMock("search"),
-  ZappPipesScreenContext: contextMock("screen"),
-}));
-
-jest.mock("@applicaster/zapp-react-native-redux/AppStore", () => ({
-  appStore: {
-    get: jest.fn((prop) => store_mock[prop]),
-  },
-}));
-
 const { useBuildPipesUrl } = require("../useBuildPipesUrl");
 
 describe("useBuildPipesUrl", () => {
   it("returns the proper url", async () => {
+    INFLATED_URL = "http://foo.com/show/show-1";
     const url = "http://foo.com/show/{{showId}}";
 
     const mapping = {
@@ -81,12 +30,20 @@ describe("useBuildPipesUrl", () => {
       },
     };
 
-    const { result, waitForNextUpdate } = renderHook(
-      () => useBuildPipesUrl({ url, mapping }),
-      {
-        wrapper,
-        initialProps: { store: defaultStore },
-      }
+    const buildResult = {
+      params: {
+        ctx: encodeParams({ platform: appData.platform }),
+        version: appData.version_name,
+      },
+      headers: { SDK: appData.sdk_version },
+    };
+
+    const mockedRequestBuilder = {
+      build: jest.fn(() => Promise.resolve(buildResult)),
+    };
+
+    const { result, waitForNextUpdate } = renderHook(() =>
+      useBuildPipesUrl({ url, mapping, requestBuilder: mockedRequestBuilder })
     );
 
     expect(result.current.url).toBe("http://foo.com/show/show-1");
@@ -108,6 +65,7 @@ describe("useBuildPipesUrl", () => {
   });
 
   it("returns empty object if url is not in endpoints", async () => {
+    INFLATED_URL = "http://foobar.com/show-1";
     const url = "http://foobar.com/{{showId}}";
 
     const mapping = {
@@ -117,12 +75,14 @@ describe("useBuildPipesUrl", () => {
       },
     };
 
-    const { result, waitForNextUpdate } = renderHook(
-      () => useBuildPipesUrl({ url, mapping }),
-      {
-        wrapper,
-        initialProps: { store: defaultStore },
-      }
+    const buildResult = {};
+
+    const mockedRequestBuilder = {
+      build: jest.fn(() => Promise.resolve(buildResult)),
+    };
+
+    const { result, waitForNextUpdate } = renderHook(() =>
+      useBuildPipesUrl({ url, mapping, requestBuilder: mockedRequestBuilder })
     );
 
     expect(result.current.url).toBe("http://foobar.com/show-1");

package/reactHooks/feed/useBuildPipesUrl.ts

@@ -1,7 +1,6 @@
-// @ts-ignore
 import { RequestBuilder } from "@applicaster/zapp-pipes-v2-client";
-import { useEffect, useState } from "react";
-import { useInflatedUrl } from "./useInflatedUrl";
+import * as React from "react";
+import { useInflatedUrl } from "@applicaster/zapp-react-native-utils/reactHooks/feed/useInflatedUrl";
 import { reactHooksLogger } from "../logger";
 
 export const logger = reactHooksLogger.addSubsystem("build-pipes-url");
@@ -15,18 +14,16 @@ type PipesBuildRequestObject = {
 export function useBuildPipesUrl({
   url,
   mapping = {},
+  requestBuilder = new RequestBuilder(),
 }): PipesBuildRequestObject {
-  const [requestParams, setRequestParams] = useState<object | null>(null);
-  const [error, setError] = useState(null);
+  const [requestParams, setRequestParams] = React.useState<object | null>(null);
 
+  const [error, setError] = React.useState(null);
   const inflatedUrl = useInflatedUrl({ feedUrl: url, mapping });
 
-  const requestBuilder = new RequestBuilder();
-
   const buildRequest = async (_url) => {
     try {
       const result = await requestBuilder.build(_url);
-
       setRequestParams(result);
     } catch (e) {
       setError(e);
@@ -34,7 +31,7 @@ export function useBuildPipesUrl({
     }
   };
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (inflatedUrl && !requestParams) {
       buildRequest(inflatedUrl);
     }
@@ -42,7 +39,7 @@ export function useBuildPipesUrl({
 
   return {
     url: inflatedUrl || "",
-    requestParams: requestParams, // TODO should it be: || {} ?
+    requestParams, // TODO should it be: || {} ?
     error: error || undefined,
   };
 }

package/reactHooks/navigation/index.ts

@@ -13,7 +13,11 @@ import {
 import { HooksManager } from "@applicaster/zapp-react-native-utils/appUtils/HooksManager";
 
 import { legacyScreenData } from "@applicaster/quick-brick-core/App/NavigationProvider/utils";
-import { LONG_KEY_PRESS_TIMEOUT } from "@applicaster/quick-brick-core/const";
+import {
+  LONG_KEY_PRESS_TIMEOUT,
+  QUICK_BRICK_NAVBAR,
+  QUICK_BRICK_CONTENT,
+} from "@applicaster/quick-brick-core/const";
 import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/ZappHooksModal";
 import { ZappHookModalContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
@@ -452,3 +456,30 @@ export const useIsScreenActive = () => {
 
   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;
+};
+
+export const useNavbarId = () => {
+  const withUniqueRouteSuffix = useUniqueRouteSuffix();
+
+  return withUniqueRouteSuffix(QUICK_BRICK_NAVBAR);
+};
+
+export const useContentId = () => {
+  const withUniqueRouteSuffix = useUniqueRouteSuffix();
+
+  return withUniqueRouteSuffix(QUICK_BRICK_CONTENT);
+};

package/reactHooks/screen/__tests__/useCurrentScreenData.test.tsx

@@ -3,23 +3,28 @@ import { Provider } from "react-redux";
 import { renderHook } from "@testing-library/react-hooks";
 import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
-import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NavigationContext";
 
 const mockStore = configureStore([thunk]);
 
-import { useCurrentScreenData } from "../useCurrentScreenData";
-
-describe("useScreenData", function () {
-  const river_id_2: ZappRiver = {
-    name: "River 2",
-    id: "A1234",
-    home: false,
-    home_offline: false,
-    supports_offline: false,
-    navigations: [],
-    hooks: { preload_plugins: [] },
-  };
-
+const river_id_2: ZappRiver = {
+  name: "River 2",
+  id: "A1234",
+  home: false,
+  home_offline: false,
+  supports_offline: false,
+  navigations: [],
+  hooks: { preload_plugins: [] },
+};
+
+jest.mock("../useScreenContext", () => ({
+  useScreenContext: () => ({
+    screen: river_id_2,
+  }),
+}));
+
+const { useCurrentScreenData } = require("../useCurrentScreenData");
+
+describe("useScreenData", () => {
   const river_id_1 = { id: "B5678" };
 
   const store = mockStore({
@@ -27,17 +32,10 @@ describe("useScreenData", function () {
   });
 
   const wrapper: React.FC<any> = ({ children }) => (
-    <NavigationContext.Provider
-      value={{
-        currentRoute: "/river/river_id_1/river/river_id_2",
-        data: { screen: river_id_2 },
-      }}
-    >
-      <Provider store={store}>{children}</Provider>
-    </NavigationContext.Provider>
+    <Provider store={store}>{children}</Provider>
   );
 
-  it("should return river data for the current screen/route", function () {
+  it("should return river data for the current screen/route", () => {
     const { result } = renderHook(() => useCurrentScreenData(), { wrapper });
 
     expect(result.current).toBe(river_id_2);

package/reactHooks/screen/index.ts

@@ -10,3 +10,5 @@ export {
   useNavbarState,
   useSetNavbarState,
 } from "./useScreenContext";
+
+export { useScreenBackgroundColor } from "./useScreenBackgroundColor";

package/reactHooks/screen/useScreenBackgroundColor.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { useScreenConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/River/useScreenConfiguration";
+import { ifEmptyUseFallback } from "@applicaster/zapp-react-native-utils/cellUtils";
+
+export const useScreenBackgroundColor = (screenId: string): string => {
+  const { backgroundColor: screenBackgroundColor } =
+    useScreenConfiguration(screenId);
+
+  const theme = useTheme();
+
+  const themeBackgroundColor = React.useMemo(
+    () => theme.app_background_color,
+    [theme.app_background_color]
+  );
+
+  const backgroundColor = ifEmptyUseFallback(
+    screenBackgroundColor,
+    themeBackgroundColor
+  );
+
+  return backgroundColor;
+};

package/reactHooks/screen/useScreenContext.ts

@@ -45,8 +45,7 @@ export function useSetNavbarState() {
 
 export function useScreenContext(): NavigationScreenData {
   const navigator = useNavigation();
-  // Cover cases where screenContext is used before navigation is initialized
-  const screenData = useContext(ScreenDataContext) || navigator.data;
+  const screenData = useContext(ScreenDataContext);
 
   const modalScreenData = navigator?.modalData;