@applicaster/zapp-react-native-utils 14.0.0-alpha.5114565431 → 14.0.0-alpha.5243406255

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

@@ -6,6 +6,7 @@ exports[`focusManager should be defined 1`] = `
   "disableFocus": [Function],
   "enableFocus": [Function],
   "findPreferredFocusChild": [Function],
+  "focusTopNavigation": [Function],
   "focusableTree": Tree {
     "loadingCounter": 0,
     "root": {
@@ -24,7 +25,10 @@ exports[`focusManager should be defined 1`] = `
   "invokeHandler": [Function],
   "isCurrentFocusOnTheTopScreen": [Function],
   "isFocusDisabled": [Function],
+  "isFocusOnContent": [Function],
+  "isFocusOnMenu": [Function],
   "isGroupItemFocused": [Function],
+  "isOnRootScreen": [Function],
   "longPress": [Function],
   "moveFocus": [Function],
   "on": [Function],

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

@@ -33,7 +33,7 @@ describe("focusManager", () => {
 
     expect(success).toBe(true);
     expect(mockSetFocus).toBeCalledTimes(1);
-    expect(mockSetFocus).toBeCalledWith(null);
+    expect(mockSetFocus).toBeCalledWith(null, undefined);
   });
 
   describe("register", () => {});

package/appUtils/focusManager/index.ts

@@ -14,6 +14,15 @@ import { subscriber } from "../../functionUtils";
 import { coreLogger } from "../../logger";
 import { ACTION } from "./utils/enums";
 
+import {
+  isTabsScreen,
+  findSelectedTabId,
+  findSelectedMenuId,
+  isTabsMenuFocused,
+  isCurrentFocusOnContent,
+  isCurrentFocusOnMenu,
+} from "../focusManagerAux/utils";
+
 const logger = coreLogger.addSubsystem("focusManager");
 
 const isFocusEnabled = (focusableItem): boolean => {
@@ -100,7 +109,7 @@ export const focusManager = (function () {
    * @private
    * @param {Object} direction of the navigation which led to this action
    */
-  function focus(direction) {
+  function focus(direction, context?: FocusManager.FocusContext) {
     const currentFocusable = getCurrentFocus();
 
     if (
@@ -108,7 +117,7 @@ export const focusManager = (function () {
       !currentFocusable.isGroup &&
       currentFocusable.isMounted()
     ) {
-      currentFocusable.setFocus(direction);
+      currentFocusable.setFocus(direction, context);
     }
   }
 
@@ -205,7 +214,7 @@ export const focusManager = (function () {
    * @param {Array<string>} ids - An array of node IDs to update.
    * @param {boolean} setFocus - A flag indicating whether to set focus (true) or blur (false) on the nodes.
    */
-  const updateNodeFocus = (ids, action) => {
+  const updateNodeFocus = (ids, action, context: FocusManager.FocusContext) => {
     if (!ids || ids.length === 0) {
       return; // Nothing to do
     }
@@ -222,11 +231,13 @@ export const focusManager = (function () {
 
     // Function to apply the action (focus or blur)
     const applyAction = (node) => {
+      const direction = undefined;
+
       if (node && node.component) {
         if (action === "focus") {
-          node.component.setFocus();
+          node.component.setFocus(direction, context);
         } else if (action === "blur") {
-          node.component.setBlur();
+          node.component.setBlur(direction, context);
         }
       }
     };
@@ -253,7 +264,11 @@ export const focusManager = (function () {
    * @param {Object} direction of the navigation, which led to this focus change
    * to another group or not. defaults to false
    */
-  function setFocus(id: string, direction?: FocusManager.Web.Direction) {
+  function setFocus(
+    id: string,
+    direction?: FocusManager.Web.Direction,
+    context?: FocusManager.FocusContext
+  ) {
     if (focusDisabled) return false;
 
     // due to optimisiation it's recommanded to set currentFocusNode before setFocus
@@ -266,15 +281,61 @@ export const focusManager = (function () {
       );
 
       // Set focus on current node parents and blur on previous node parents
-      updateNodeFocus(currentNodeParentsIDs, ACTION.FOCUS);
-      updateNodeFocus(previousNodeParentsIDs, ACTION.BLUR);
+      updateNodeFocus(currentNodeParentsIDs, ACTION.FOCUS, context);
+      updateNodeFocus(previousNodeParentsIDs, ACTION.BLUR, context);
 
       currentFocusNode = focusableTree.findInTree(id);
     }
 
     setLastFocusOnParentNode(currentFocusNode);
 
-    focus(direction);
+    focus(direction, context);
+  }
+
+  function isFocusOnContent() {
+    return isCurrentFocusOnContent(currentFocusNode);
+  }
+
+  function isFocusOnMenu() {
+    return isCurrentFocusOnMenu(currentFocusNode);
+  }
+
+  function landFocusTo(id) {
+    if (id) {
+      // set focus on selected menu item
+      const direction = undefined;
+
+      const context: FocusManager.FocusContext = {
+        source: "back",
+        preserveScroll: true,
+      };
+
+      blur(direction);
+      setFocus(id, direction, context);
+    }
+  }
+
+  // Move focus to appropriate top navigation tab with context
+  function focusTopNavigation() {
+    // Store current focus for restoration
+    // this.storeFocusState();
+
+    if (isTabsScreen(focusableTree) && !isTabsMenuFocused(currentFocusNode)) {
+      const selectedTabId = findSelectedTabId(focusableTree);
+
+      console.log("debug_2", "FM - moveFocusToSelectedTab", { selectedTabId });
+
+      landFocusTo(selectedTabId);
+
+      return;
+    }
+
+    // Set focus with back button context
+    const selectedMenuItemId = findSelectedMenuId(focusableTree);
+
+    console.log("debug_2", "IM - moveFocusToTopMenu", { selectedMenuItemId });
+
+    landFocusTo(selectedMenuItemId);
   }
 
   /**
@@ -483,6 +544,12 @@ export const focusManager = (function () {
     return haveSameParentBeforeRoot(currentFocusNode, R.last(routes));
   }
 
+  function isOnRootScreen() {
+    const routes = R.pathOr([], ["root", "children"], focusableTree);
+
+    return routes.length <= 1;
+  }
+
   function recoverFocus() {
     if (!isCurrentFocusOnTheTopScreen()) {
       // We've failed to set focused node on the new screen => run focus recovery
@@ -576,5 +643,10 @@ export const focusManager = (function () {
     recoverFocus,
     isCurrentFocusOnTheTopScreen,
     findPreferredFocusChild,
+
+    focusTopNavigation,
+    isFocusOnContent,
+    isFocusOnMenu,
+    isOnRootScreen,
   };
 })();

package/appUtils/focusManagerAux/utils/index.ts

@@ -1,4 +1,4 @@
-import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+import { isNil } from "@applicaster/zapp-react-native-utils/utils";
 import { find, last, pathOr, startsWith } from "ramda";
 import {
   QUICK_BRICK_CONTENT,
@@ -9,6 +9,8 @@ import {
 // run this check too often could lead to performance penalty on low-end devices
 const HOW_OFTEN_TO_CHECK_CONDITION = 300; // ms
 
+const TABS_GROUP_ID = "PickerSelector.sp-river";
+
 type Props = {
   maxTimeout: number;
   conditionFn: () => boolean;
@@ -49,7 +51,7 @@ export const waitForActiveScreen = (currentRoute: string, focusableTree) => {
 
     const route = find((route) => route.id === currentRoute, routes);
 
-    return isNotNil(route);
+    return !isNil(route);
   };
 
   return waitUntil({
@@ -99,3 +101,47 @@ export const waitForContent = (focusableTree) => {
     conditionFn: contentHasAnyChildren,
   });
 };
+
+export function isTabsScreen(focusableTree) {
+  const tabsGroup = focusableTree.findInTree(TABS_GROUP_ID);
+
+  return !!tabsGroup;
+}
+
+export const findSelectedTabId = (focusableTree) => {
+  // FIXME - find elegant way how to get ID of selected tab
+  const tabsGroup = focusableTree.findInTree(TABS_GROUP_ID);
+
+  const selectedTabId = tabsGroup.children.find(
+    (child) => child.component.props.preferredFocus // ?? selected
+  )?.id;
+
+  return selectedTabId;
+};
+
+export const findSelectedMenuId = (focusableTree) => {
+  // Set focus with back button context
+  const navbar = getNavbarNode(focusableTree);
+
+  const selectedMenuItemId = find(
+    (child) => child.component.props.selected,
+    navbar.children
+  )?.id;
+
+  return selectedMenuItemId;
+};
+
+export const isTabsMenuFocused = (node) => {
+  // FIXME - find elegant way how to get ID of selected tab
+  return node.parent.id === TABS_GROUP_ID;
+};
+
+export const isCurrentFocusOnMenu = (node) => {
+  // FIXME
+  return node.parent.id.startsWith(QUICK_BRICK_NAVBAR);
+};
+
+export const isCurrentFocusOnContent = (node) => {
+  // FIXME
+  return !isCurrentFocusOnMenu(node);
+};

package/navigationUtils/__tests__/mapContentTypesToRivers.test.ts

@@ -0,0 +1,130 @@
+import { mapContentTypesToRivers } from "../index";
+
+describe("mapContentTypesToRivers", () => {
+  it("should return the correct content types mapped to rivers", () => {
+    const state = {
+      rivers: {
+        "river-1": {
+          plugin_type: "river",
+        },
+      },
+      contentTypes: {
+        "content-type-1": {
+          screen_id: "river-1",
+        },
+      },
+    };
+
+    const result = mapContentTypesToRivers(state);
+
+    expect(result).toEqual({
+      "content-type-1": {
+        screenType: "river",
+        screen_id: "river-1",
+      },
+    });
+  });
+
+  it("should return null if contentTypes is undefined", () => {
+    const state = {
+      rivers: {
+        "river-1": {
+          plugin_type: "river",
+        },
+      },
+      // contentTypes is missing
+    };
+
+    const result = mapContentTypesToRivers(state);
+
+    expect(result).toBeNull();
+  });
+
+  it("should skip content types whose screen does not exist in rivers", () => {
+    const state = {
+      rivers: {
+        "river-1": {
+          plugin_type: "river",
+        },
+      },
+      contentTypes: {
+        "content-type-1": {
+          screen_id: "river-1",
+        },
+        "content-type-2": {
+          screen_id: "river-2", // river-2 does not exist
+        },
+      },
+    };
+
+    const result = mapContentTypesToRivers(state);
+
+    expect(result).toEqual({
+      "content-type-1": {
+        screenType: "river",
+        screen_id: "river-1",
+      },
+    });
+
+    // result is not null, but may be undefined for missing keys
+    expect(result && result["content-type-2"]).toBeUndefined();
+  });
+
+  it("should use 'type' if 'plugin_type' is not present in river", () => {
+    const state = {
+      rivers: {
+        "river-1": {
+          type: "custom-type",
+        },
+      },
+      contentTypes: {
+        "content-type-1": {
+          screen_id: "river-1",
+        },
+      },
+    };
+
+    const result = mapContentTypesToRivers(state);
+
+    expect(result).toEqual({
+      "content-type-1": {
+        screenType: "custom-type",
+        screen_id: "river-1",
+      },
+    });
+  });
+
+  it("should skip content types if neither plugin_type nor type is present in river", () => {
+    const state = {
+      rivers: {
+        "river-1": {
+          // no plugin_type or type
+        },
+      },
+      contentTypes: {
+        "content-type-1": {
+          screen_id: "river-1",
+        },
+      },
+    };
+
+    const result = mapContentTypesToRivers(state);
+
+    expect(result).toEqual({});
+  });
+
+  it("should handle empty contentTypes object", () => {
+    const state = {
+      rivers: {
+        "river-1": {
+          plugin_type: "river",
+        },
+      },
+      contentTypes: {},
+    };
+
+    const result = mapContentTypesToRivers(state);
+
+    expect(result).toEqual({});
+  });
+});

package/navigationUtils/index.ts

@@ -13,6 +13,7 @@ import {
   isPlayable,
   isV2River,
 } from "./itemTypeMatchers";
+import { RootState } from "@applicaster/zapp-react-native-redux/store";
 
 type PathAttribute = {
   screenType: string;
@@ -377,10 +378,11 @@ export const usesVideoModal = (
   return targetScreenConfiguration?.styles?.use_video_modal;
 };
 
-export const mapContentTypesToRivers = ({
-  rivers,
-  contentTypes,
-}): ZappContentTypesMapped | null => {
+export const mapContentTypesToRivers = (
+  state: Partial<RootState>
+): ZappContentTypesMapped | null => {
+  const { rivers, contentTypes } = state;
+
   if (!contentTypes) {
     return null;
   }

package/package.json

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

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

@@ -23,7 +23,9 @@ jest.mock(
 
 jest.useFakeTimers();
 
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation"
+);
 
 const mockStore = configureStore();
 

package/reactHooks/feed/useBatchLoading.ts

@@ -1,8 +1,10 @@
 import { complement, compose, isNil, map, min, prop, take, uniq } from "ramda";
-import { useDispatch } from "react-redux";
 import * as React from "react";
-import { useZappPipesFeeds } from "@applicaster/zapp-react-native-redux/hooks";
-import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
+import {
+  ZappPipes,
+  useAppDispatch,
+  useZappPipesFeed,
+} from "@applicaster/zapp-react-native-redux";
 import { isNilOrEmpty } from "../../reactUtils/helpers";
 import { ZappPipesSearchContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import {
@@ -63,7 +65,7 @@ export const useBatchLoading = (
   componentsToRender: { data?: ZappDataSource; component_type: string }[],
   options: Options
 ) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const { screen: screenContext, entry: entryContext } = useScreenContext();
   const [searchContext] = ZappPipesSearchContext.useZappPipesContext();
   const [hasEverBeenReady, setHasEverBeenReady] = React.useState(false);
@@ -118,7 +120,7 @@ export const useBatchLoading = (
     []
   );
 
-  const feeds = useZappPipesFeeds(feedUrls);
+  const feeds = useZappPipesFeed(feedUrls);
 
   // dispatch loadPipesData for each feed that is not loaded
   const runBatchLoading = React.useCallback(() => {
@@ -139,7 +141,7 @@ export const useBatchLoading = (
         if (mappedFeedUrl) {
           // 4. load data
           return dispatch(
-            loadPipesData(mappedFeedUrl, { riverId: options.riverId })
+            ZappPipes.loadPipesData(mappedFeedUrl, { riverId: options.riverId })
           );
         }
       }

package/reactHooks/feed/useFeedLoader.tsx

@@ -1,8 +1,10 @@
 import React, { useEffect } from "react";
-import { useDispatch } from "react-redux";
 
-import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
-import { useZappPipesFeed } from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  ZappPipes,
+  useAppDispatch,
+  useZappPipesFeed,
+} from "@applicaster/zapp-react-native-redux";
 
 import { reactHooksLogger } from "../logger";
 import { shouldDispatchData, useIsInitialRender } from "../utils";
@@ -49,7 +51,7 @@ export const useFeedLoader = ({
   }, []);
 
   const isInitialRender = useIsInitialRender();
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const { screenData } = useRoute();
 
   const callableFeedUrl = useInflatedUrl({ feedUrl, mapping });
@@ -64,7 +66,7 @@ export const useFeedLoader = ({
     (silentRefresh = true, callback) => {
       if (callableFeedUrl) {
         dispatch(
-          loadPipesData(callableFeedUrl, {
+          ZappPipes.loadPipesData(callableFeedUrl, {
             clearCache: true,
             silentRefresh,
             callback,
@@ -82,7 +84,7 @@ export const useFeedLoader = ({
 
       if (nextFeed) {
         dispatch(
-          loadPipesData(nextFeed, {
+          ZappPipes.loadPipesData(nextFeed, {
             silentRefresh: true,
             parentFeed: callableFeedUrl,
             riverId,
@@ -98,7 +100,7 @@ export const useFeedLoader = ({
     ) {
       if (callableFeedUrl && !pipesOptions.skipLoading) {
         dispatch(
-          loadPipesData(callableFeedUrl, {
+          ZappPipes.loadPipesData(callableFeedUrl, {
             ...pipesOptions,
             clearCache: true,
             riverId,
@@ -131,7 +133,9 @@ export const useFeedLoader = ({
   // Reload feed when feedUrl changes, unless skipLoading is true
   useEffect(() => {
     if (!isInitialRender && callableFeedUrl && !pipesOptions.skipLoading) {
-      dispatch(loadPipesData(callableFeedUrl, { ...pipesOptions, riverId }));
+      dispatch(
+        ZappPipes.loadPipesData(callableFeedUrl, { ...pipesOptions, riverId })
+      );
     }
   }, [callableFeedUrl]);
 

package/reactHooks/feed/usePipesCacheReset.ts

@@ -1,11 +1,11 @@
 import React from "react";
-import { useDispatch } from "react-redux";
 
 import { getDatasourceUrl } from "@applicaster/zapp-react-native-ui-components/Decorators/RiverFeedLoader/utils/getDatasourceUrl";
 import { usePipesContexts } from "@applicaster/zapp-react-native-ui-components/Decorators/RiverFeedLoader/utils/usePipesContexts";
 import { clearPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
 
 import { useRoute } from "../navigation";
+import { useAppDispatch } from "@applicaster/zapp-react-native-redux";
 
 /**
  * reset river components cache when screen is unmounted
@@ -13,7 +13,7 @@ import { useRoute } from "../navigation";
  * @param {Array} riverComponents list of UI components
  */
 export const usePipesCacheReset = (riverId, riverComponents) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const { screenData, pathname } = useRoute();
   const pipesContexts = usePipesContexts(riverId, pathname);
 

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

@@ -42,15 +42,17 @@ jest.mock("react-native-safe-area-context", () => ({
 }));
 
 jest.mock("../../../reactUtils", () => ({
+  ...jest.requireActual("../../../reactUtils"),
   platformSelect: jest.fn((specs) => specs[platform] || specs.default),
   isTV: jest.fn(() => mock_tv_flag),
 }));
 
 jest.mock("../../navigation", () => ({
-  useNavigation: () => null,
   useIsScreenActive: () => true,
 }));
 
+jest.mock("../../navigation/useNavigation");
+
 const { Dimensions } = require("react-native");
 const { useDimensions } = require("..");
 

package/reactHooks/layout/useDimensions/__tests__/useDimensions.test.ts

@@ -1,46 +1,48 @@
 import { renderHook } from "@testing-library/react-hooks";
 import { Dimensions, StatusBar } from "react-native";
+import { useDimensions } from "../useDimensions";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux";
 
-const mockUsePickFromState = jest.fn();
-const mockUseIsScreenActive = jest.fn();
-const mockGetInitialDimensions = jest.fn();
-const mockGetDeviceInfo = jest.fn();
+import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive";
 
-jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
-  ...(jest.requireActual("@applicaster/zapp-react-native-redux/hooks") as {}),
-  usePickFromState: mockUsePickFromState,
-}));
-
-jest.mock("../../../navigation", () => ({
-  useIsScreenActive: mockUseIsScreenActive,
-}));
+jest.mock("@applicaster/zapp-react-native-redux/hooks", () => {
+  return {
+    ...jest.requireActual("@applicaster/zapp-react-native-redux/hooks"),
+    usePickFromState: jest.fn(),
+  };
+});
 
-jest.mock("../helpers", () => ({
-  getInitialDimensions: mockGetInitialDimensions,
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
+  () => ({
+    useIsScreenActive: jest.fn().mockReturnValue(true),
+  })
+);
+
+jest.doMock("../helpers", () => ({
+  getInitialDimensions: jest
+    .fn()
+    .mockReturnValue({ width: 100, height: 200, scale: 1, fontScale: 1 }),
 }));
 
 jest.mock("../../getDeviceInfo", () => ({
-  getDeviceInfo: mockGetDeviceInfo,
+  getDeviceInfo: jest.fn().mockReturnValue({ deviceInfo: "testDeviceInfo" }),
 }));
 
-const { useDimensions } = require("../useDimensions");
+const mockDimensions = { width: 100, height: 200, scale: 1, fontScale: 1 };
+
+Dimensions.get = jest.fn().mockReturnValue(mockDimensions);
+
+Dimensions.addEventListener = jest.fn().mockReturnValue({
+  remove: jest.fn(),
+});
 
 describe("useDimensions", () => {
-  const mockDimensions = { width: 100, height: 200, scale: 1, fontScale: 1 };
   const mockAppData = { someData: "test" };
 
   beforeEach(() => {
-    jest.clearAllMocks();
-    Dimensions.get = jest.fn().mockReturnValue(mockDimensions);
-
-    Dimensions.addEventListener = jest.fn().mockReturnValue({
-      remove: jest.fn(),
-    });
-
-    mockUsePickFromState.mockReturnValue({ appData: mockAppData });
-    mockUseIsScreenActive.mockReturnValue(true);
-    mockGetInitialDimensions.mockReturnValue(mockDimensions);
-    mockGetDeviceInfo.mockReturnValue({ deviceInfo: "testDeviceInfo" });
+    StatusBar.currentHeight = 20;
+    (usePickFromState as jest.Mock).mockReturnValue({ appData: mockAppData });
   });
 
   it("returns correct initial dimensions", () => {
@@ -48,12 +50,9 @@ describe("useDimensions", () => {
       useDimensions("window", { fullDimensions: false })
     );
 
-    expect(result.current).toEqual({
-      ...mockDimensions,
+    expect(result.current).toMatchObject({
       statusBarHeight: StatusBar.currentHeight,
     });
-
-    expect(mockGetInitialDimensions).toHaveBeenCalledWith("window");
   });
 
   it("calls handler on mount", () => {
@@ -70,7 +69,7 @@ describe("useDimensions", () => {
       useDimensions("window", { fullDimensions: false })
     );
 
-    mockUseIsScreenActive.mockReturnValue(false);
+    (useIsScreenActive as jest.Mock).mockReturnValue(false);
     rerender();
 
     expect(Dimensions.addEventListener).toHaveBeenCalledWith(
@@ -84,8 +83,7 @@ describe("useDimensions", () => {
       useDimensions("window", { fullDimensions: true })
     );
 
-    expect(result.current).toEqual({
-      ...mockDimensions,
+    expect(result.current).toMatchObject({
       scale: 1,
       fontScale: 1,
       statusBarHeight: StatusBar.currentHeight,
@@ -98,7 +96,7 @@ describe("useDimensions", () => {
     );
 
     expect(result.current.height).toBe(
-      mockDimensions.height - StatusBar.currentHeight ?? 0
+      mockDimensions.height - (StatusBar?.currentHeight ?? 0)
     );
   });
 

package/reactHooks/layout/useDimensions/useDimensions.ts

@@ -10,7 +10,7 @@ import { isTV } from "../../../reactUtils";
 import { Options, UseDimensions } from "../types";
 import { getDeviceInfo } from "../getDeviceInfo";
 import { getInitialDimensions } from "./helpers";
-import { useIsScreenActive } from "../../navigation";
+import { useIsScreenActive } from "../../navigation/useIsScreenActive";
 
 function compensateForScaleIfNeeded(context) {
   return function () {
@@ -24,8 +24,6 @@ const applyScaleToDimensions = R.unless(R.propEq("scale", 1), (dimensions) => ({
   scale: 1,
 }));
 
-const statusBarHeight = StatusBar?.currentHeight;
-
 /**
  * Returns React-native Dimensions object and updates it on any dimension change
  * @param {('screen'|'window')} [context=window] - Dimensions context passed to Dimensions.get method
@@ -37,6 +35,7 @@ export const useDimensions: UseDimensions = (
   context = "window",
   fullDimensions = { fullDimensions: false, updateForInactiveScreens: true }
 ) => {
+  const statusBarHeight = StatusBar?.currentHeight;
   const isActive = useIsScreenActive();
   const { appData } = usePickFromState(["appData"]);
 

package/reactHooks/layout/useLayoutVersion.ts

@@ -1,6 +1,8 @@
 /* eslint-disable no-redeclare */
-import { useSelector } from "react-redux";
-import * as R from "ramda";
+import {
+  useAppSelector,
+  selectLayoutVersion,
+} from "@applicaster/zapp-react-native-redux";
 
 export function useLayoutVersion(): ZappLayoutVersions;
 
@@ -23,9 +25,7 @@ export function useLayoutVersion({
   isV2?: boolean;
   isV1?: boolean;
 } = {}): boolean | ZappLayoutVersions {
-  const layoutVersion = useSelector<any, ZappLayoutVersions>(
-    R.path(["appData", "layoutVersion"])
-  );
+  const layoutVersion = useAppSelector(selectLayoutVersion);
 
   if (isV2) {
     return layoutVersion === "v2";

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

@@ -14,6 +14,10 @@ jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation"
+);
+
 const { useCellResolver } = require("../useCellResolver");
 
 describe("cellResolver", () => {

package/reactHooks/state/useRivers.ts

@@ -1,9 +1,8 @@
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import {
+  useAppSelector,
+  selectRivers,
+} from "@applicaster/zapp-react-native-redux";
 
-const riversSelector = ["rivers"];
-
-export const useRivers = () => {
-  const { rivers } = usePickFromState(riversSelector as any);
-
-  return rivers;
-};
+export function useRivers(): Record<string, ZappRiver> {
+  return useAppSelector(selectRivers);
+}

package/utils/index.ts

@@ -14,6 +14,7 @@ export {
   flatMap,
   difference,
   take,
+  pick,
   map,
   trim,
   toString,