@applicaster/zapp-react-native-utils 15.0.0-alpha.7809066324 → 15.0.0-alpha.8111467956

package/configurationUtils/__tests__/imageSrcFromMediaItem.test.ts

@@ -31,4 +31,42 @@ describe("imageSrcFromMediaItem", () => {
 
     expect(imageSrcFromMediaItem(badEntry, ["image_base"])).toBeUndefined();
   });
+
+  it("returns undefined when fallback is false and key is not found", () => {
+    const result = imageSrcFromMediaItem(entry as ZappEntry, [
+      "does_not_exist",
+      false,
+    ]);
+
+    expect(result).toBeUndefined();
+  });
+
+  it("returns src when fallback is false and key is found", () => {
+    const result = imageSrcFromMediaItem(entry as ZappEntry, [
+      "logo_thumbnail",
+      false,
+    ]);
+
+    expect(result).toEqual(entry.media_group[1].media_item[0].src);
+  });
+
+  it("returns image_base as fallback when fallback is explicitly true and key is not found", () => {
+    const result = imageSrcFromMediaItem(entry as ZappEntry, [
+      "does_not_exist",
+      true,
+    ]);
+
+    const fallback = entry.media_group[0].media_item[0];
+    expect(result).toEqual(fallback.src);
+    expect(fallback.key).toBe("image_base");
+  });
+
+  it("returns src when fallback is explicitly true and key is found", () => {
+    const result = imageSrcFromMediaItem(entry as ZappEntry, [
+      "logo_thumbnail",
+      true,
+    ]);
+
+    expect(result).toEqual(entry.media_group[1].media_item[0].src);
+  });
 });

package/configurationUtils/index.ts

@@ -155,9 +155,9 @@ export function getMediaItems(entry: ZappEntry): Option<ZappMediaItem[]> {
 
 /**
  * Retrieves the "src" value from a media item in the entry's media group,
- * based on a provided key, with fallback logic.
+ * based on a provided key, with optional fallback logic.
  *
- * Fallback order:
+ * Fallback order (when enabled):
  *   1. Attempts to find a media item with the specified key (or "image_base" if none provided).
  *   2. If not found, attempts to find a media item with the key "image_base".
  *   3. If still not found, falls back to the first available media item.
@@ -166,15 +166,19 @@ export function getMediaItems(entry: ZappEntry): Option<ZappMediaItem[]> {
  * since empty URIs are invalid in some platforms (e.g., React Native).
  *
  * @param {ZappEntry} entry - The entry object containing a media group.
- * @param {string[] | unknown} arg - A single-element array containing the key to look up, or any unknown value.
+ * @param {string[] | unknown} arg - Can be an array or any other value (treated as empty array).
+ *   When an array:
+ *   - First element: The key to look up. If omitted or undefined, defaults to "image_base".
+ *   - Second element: Boolean to enable/disable fallback logic. If omitted or undefined, defaults to true.
  * @returns {?string} The "src" URI from the matched media item, or undefined if not found or empty.
  */
 export function imageSrcFromMediaItem(
   entry: ZappEntry,
   arg: string[] | unknown
 ): Option<string> {
-  const args: unknown = R.unless(Array.isArray, Array)(arg || []);
+  const args: any = R.unless(Array.isArray, Array)(arg || []);
   const imageKey: string = args?.[0] || "image_base"; // always a single key in this function
+  const fallback: boolean = args?.[1] !== false;
 
   const mediaItems = getMediaItems(entry);
 
@@ -185,14 +189,16 @@ export function imageSrcFromMediaItem(
   // Try to find the item with the given key
   let foundItem = mediaItems.find((item) => item.key === imageKey);
 
-  // If not found and key was not "image_base", try to find "image_base"
-  if (!foundItem && imageKey !== "image_base") {
-    foundItem = mediaItems.find((item) => item.key === "image_base");
-  }
+  if (fallback) {
+    // If not found and key was not "image_base", try to find "image_base"
+    if (!foundItem && imageKey !== "image_base") {
+      foundItem = mediaItems.find((item) => item.key === "image_base");
+    }
 
-  // If still not found, default to first item
-  if (!foundItem) {
-    foundItem = mediaItems[0];
+    // If still not found, default to first item
+    if (!foundItem) {
+      foundItem = mediaItems[0];
+    }
   }
 
   const src = foundItem?.src;

package/navigationUtils/index.ts

@@ -5,7 +5,8 @@ import { layoutV2TypeMatcher } from "./layoutV2TypeMatcher";
 import { HOOKS_EVENTS } from "../appUtils/HooksManager/constants";
 import { HooksManager } from "../appUtils/HooksManager";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
-import { HookModalContextT } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
+
+import { zappHookModalStore } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
 import { logger } from "@applicaster/zapp-react-native-utils/logger";
 import {
   isGeneralPlugin,
@@ -15,6 +16,8 @@ import {
 } from "./itemTypeMatchers";
 import { RootState } from "@applicaster/zapp-react-native-redux/store";
 
+import { pick } from "@applicaster/zapp-react-native-utils/utils";
+
 type PathAttribute = {
   screenType: string;
   screenId: string;
@@ -403,15 +406,22 @@ export const mapContentTypesToRivers = (
 };
 
 export const runZappHooksForEntry = async (
-  entry: HookPluginProps["payload"],
-  {
+  entry: HookPluginProps["payload"]
+): Promise<{ success: boolean; payload: ZappEntry }> => {
+  const {
     setState,
     resetState,
     setIsHooksExecutionInProgress,
     setIsPresentingFullScreen,
     setIsRunningInBackground,
-  }: Partial<HookModalContextT>
-): Promise<{ success: boolean; payload: ZappEntry }> => {
+  } = pick(zappHookModalStore.getState(), [
+    "setState",
+    "resetState",
+    "setIsHooksExecutionInProgress",
+    "setIsPresentingFullScreen",
+    "setIsRunningInBackground",
+  ]);
+
   resetState?.();
 
   let success;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "15.0.0-alpha.7809066324",
+  "version": "15.0.0-alpha.8111467956",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,13 +27,13 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.0.0-alpha.7809066324",
+    "@applicaster/applicaster-types": "15.0.0-alpha.8111467956",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",
+    "handlebars": "4.7.8",
     "memoizee": "0.4.15",
-    "prop-types": "^15.0.0",
-    "react-native-handlebars": "^5.0.0-alpha.1"
+    "prop-types": "^15.0.0"
   },
   "peerDependencies": {
     "@applicaster/zapp-pipes-v2-client": "*",

package/reactHooks/app/__tests__/useAppState.test.ts

@@ -1,5 +1,5 @@
 import EventEmitter from "events";
-import { renderHook, act } from "@testing-library/react-hooks";
+import { renderHook, act } from "@testing-library/react-native";
 import { useAppState } from "../useAppState";
 
 const emitter = new EventEmitter();

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

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 
 jest.mock(
   "@applicaster/zapp-react-native-ui-components/Contexts/ScreenTrackedViewPositionsContext",

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

@@ -1,7 +1,6 @@
 import React from "react";
 
-import { renderHook } from "@testing-library/react-hooks";
-import { act, waitFor } from "@testing-library/react-native";
+import { renderHook, act, waitFor } from "@testing-library/react-native";
 import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
 import { useTrackedView } from "../useTrackedView";

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

@@ -1,10 +1,8 @@
 import * as React from "react";
-import { cleanup, renderHook } from "@testing-library/react-hooks";
+import { cleanup, renderHook, waitFor } from "@testing-library/react-native";
 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 mockNavigator = {
   getPathname: () => "pathnameMock",
   push: jest.fn(),

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

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import React from "react";
-import { renderHook, cleanup } from "@testing-library/react-hooks";
+import { renderHook, cleanup } from "@testing-library/react-native";
 import { ConfigurationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ConfigutaionContext";
 import { useConfiguration } from "@applicaster/zapp-react-native-utils/reactHooks/configuration";
 

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { renderHook, cleanup } from "@testing-library/react-hooks";
+import { renderHook, cleanup } from "@testing-library/react-native";
 import { NetworkStatusContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NetworkStatusContext";
 
 const MockNetInfo = {

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

@@ -1,8 +1,7 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook, waitFor } from "@testing-library/react-native";
 import { allFeedsIsReady, useBatchLoading } from "../useBatchLoading";
 import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
-import { waitFor } from "@testing-library/react-native";
 
 jest.mock("../../navigation");
 
@@ -16,7 +15,11 @@ jest.mock(
   })
 );
 
-const wrapper = WrappedWithProviders;
+const getWrapper =
+  (store) =>
+  ({ children }) => (
+    <WrappedWithProviders store={store}>{children}</WrappedWithProviders>
+  );
 
 describe("useBatchLoading", () => {
   const data = [
@@ -63,8 +66,7 @@ describe("useBatchLoading", () => {
     const riverId = "123";
 
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
-      wrapper,
-      initialProps: { store },
+      wrapper: getWrapper(store),
     });
 
     const actions = (appStore.getStore() as any).getActions();
@@ -84,7 +86,7 @@ describe("useBatchLoading", () => {
     });
   });
 
-  it("loadPipesData start loading new feed when 1 feed is done loading and 1 is in loading state", () => {
+  it("loadPipesData start loading new feed when 1 feed is done loading and 1 is in loading state", async () => {
     const store = {
       zappPipes: {
         url1: {
@@ -110,13 +112,14 @@ describe("useBatchLoading", () => {
     const riverId = "123";
 
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
-      wrapper,
-      initialProps: { store },
+      wrapper: getWrapper(store),
     });
 
     const actions = (appStore.getStore() as any).getActions();
 
-    expect(actions).toHaveLength(1);
+    await waitFor(() => {
+      expect(actions).toHaveLength(1);
+    });
 
     expect(actions[0]).toMatchObject({
       type: "ZAPP_PIPES_REQUEST_START",
@@ -124,7 +127,7 @@ describe("useBatchLoading", () => {
     });
   });
 
-  it("loadPipesData has been called when no data cached", () => {
+  it("loadPipesData has been called when no data cached", async () => {
     const store = {
       zappPipes: {},
       test: "true",
@@ -134,16 +137,17 @@ describe("useBatchLoading", () => {
     const riverId = "123";
 
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
-      wrapper,
-      initialProps: { store },
+      wrapper: getWrapper(store),
     });
 
     const actions = (appStore.getStore() as any).getActions();
 
-    expect(actions).toHaveLength(3);
+    await waitFor(() => {
+      expect(actions).toHaveLength(3);
+    });
   });
 
-  it("initial batch ready when all initial items loaded", () => {
+  it("initial batch ready when all initial items loaded", async () => {
     const store = {
       zappPipes: {
         url1: {
@@ -169,13 +173,15 @@ describe("useBatchLoading", () => {
 
     const { result } = renderHook(
       () => useBatchLoading(data, { initialBatchSize, riverId }),
-      { wrapper, initialProps: { store } }
+      { wrapper: getWrapper(store) }
     );
 
-    expect(result.current).toBe(true);
+    await waitFor(() => {
+      expect(result.current).toBe(true);
+    });
   });
 
-  it("gallery-qb: loadPipesData should be called only once for first component in the gallery", () => {
+  it("gallery-qb: loadPipesData should be called only once for first component in the gallery", async () => {
     const store = {
       zappPipes: {},
       test: "true",
@@ -198,16 +204,17 @@ describe("useBatchLoading", () => {
     ];
 
     renderHook(() => useBatchLoading(data, { initialBatchSize, riverId }), {
-      wrapper,
-      initialProps: { store },
+      wrapper: getWrapper(store),
     });
 
     const actions = (appStore.getStore() as any).getActions();
 
-    expect(actions).toHaveLength(1);
+    await waitFor(() => {
+      expect(actions).toHaveLength(1);
+    });
   });
 
-  it("gallery-qb: initial batch ready when all initial items loaded", () => {
+  it("gallery-qb: initial batch ready when all initial items loaded", async () => {
     const store = {
       zappPipes: {
         url1: {
@@ -233,10 +240,12 @@ describe("useBatchLoading", () => {
 
     const { result } = renderHook(
       () => useBatchLoading(data, { initialBatchSize, riverId }),
-      { wrapper, initialProps: { store } }
+      { wrapper: getWrapper(store) }
     );
 
-    expect(result.current).toBe(true);
+    await waitFor(() => {
+      expect(result.current).toBe(true);
+    });
   });
 });
 

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

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook, waitFor } from "@testing-library/react-native";
 import { encodeParams } from "@applicaster/zapp-pipes-v2-client/src/utils";
 
 const appData = {
@@ -42,26 +42,26 @@ describe("useBuildPipesUrl", () => {
       build: jest.fn(() => Promise.resolve(buildResult)),
     };
 
-    const { result, waitForNextUpdate } = renderHook(() =>
+    const { result } = renderHook(() =>
       useBuildPipesUrl({ url, mapping, requestBuilder: mockedRequestBuilder })
     );
 
     expect(result.current.url).toBe("http://foo.com/show/show-1");
     expect(result.current.requestParams).toBeNull();
 
-    await waitForNextUpdate();
-
-    expect(result.current.requestParams).toEqual(
-      expect.objectContaining({
-        params: {
-          version: appData.version_name,
-          ctx: encodeParams({ platform: appData.platform }),
-        },
-        headers: {
-          SDK: appData.sdk_version,
-        },
-      })
-    );
+    await waitFor(() => {
+      expect(result.current.requestParams).toEqual(
+        expect.objectContaining({
+          params: {
+            version: appData.version_name,
+            ctx: encodeParams({ platform: appData.platform }),
+          },
+          headers: {
+            SDK: appData.sdk_version,
+          },
+        })
+      );
+    });
   });
 
   it("returns empty object if url is not in endpoints", async () => {
@@ -81,15 +81,15 @@ describe("useBuildPipesUrl", () => {
       build: jest.fn(() => Promise.resolve(buildResult)),
     };
 
-    const { result, waitForNextUpdate } = renderHook(() =>
+    const { result } = renderHook(() =>
       useBuildPipesUrl({ url, mapping, requestBuilder: mockedRequestBuilder })
     );
 
     expect(result.current.url).toBe("http://foobar.com/show-1");
     expect(result.current.requestParams).toBeNull();
 
-    await waitForNextUpdate();
-
-    expect(result.current.requestParams).toEqual({});
+    await waitFor(() => {
+      expect(result.current.requestParams).toEqual({});
+    });
   });
 });

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

@@ -1,6 +1,6 @@
 import * as R from "ramda";
 import React from "react";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import { Provider } from "react-redux";
 import { createStore } from "redux";
 

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

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import * as R from "ramda";
 import * as zappPipesModule from "@applicaster/zapp-react-native-redux/ZappPipes";
 import * as reactReduxModules from "react-redux";
@@ -50,6 +50,16 @@ const mockZappPipesData = {
   url: "test://testfakeurl",
 };
 
+const createWrapper = (
+  getStore: () => any
+): React.FC<{ children: React.ReactNode }> => {
+  const Wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+    <WrappedWithProviders store={getStore()}>{children}</WrappedWithProviders>
+  );
+
+  return Wrapper;
+};
+
 describe("useFeedLoader", () => {
   describe("with cached feed url", () => {
     const store = {
@@ -57,11 +67,7 @@ describe("useFeedLoader", () => {
       zappPipes: { "test://testfakeurl": mockZappPipesData },
     };
 
-    const wrapper: React.FC<any> = ({ children, ...props }) => (
-      <WrappedWithProviders store={props.store || store}>
-        {children}
-      </WrappedWithProviders>
-    );
+    const wrapper = createWrapper(() => store);
 
     it("returns cached feed", () => {
       const { result } = renderHook(
@@ -109,12 +115,6 @@ describe("useFeedLoader", () => {
   describe("without cached feeds", () => {
     const feedUrl = "test://testfakeurl2";
 
-    const wrapper: React.FC<any> = ({ children, ...props }) => (
-      <WrappedWithProviders store={props.store}>
-        {children}
-      </WrappedWithProviders>
-    );
-
     it("It loads data for new url and returns it", () => {
       const useDispatchSpy = jest
         .spyOn(reactReduxModules, "useDispatch")
@@ -129,9 +129,12 @@ describe("useFeedLoader", () => {
         zappPipes: { "test://testfakeurl": "foobar" },
       };
 
+      let store = initialStore;
+      const wrapper = createWrapper(() => store);
+
       const { result, rerender } = renderHook(
-        () => useFeedLoader({ feedUrl: "test://testfakeurl2" }),
-        { wrapper, initialProps: { store: initialStore } }
+        ({ feedUrl: url }) => useFeedLoader({ feedUrl: url }),
+        { wrapper, initialProps: { feedUrl } }
       );
 
       expect(result.current.data).toBeNull();
@@ -150,7 +153,8 @@ describe("useFeedLoader", () => {
         zappPipes: { "test://testfakeurl2": mockZappPipesData },
       };
 
-      rerender({ store: store2 });
+      store = store2;
+      rerender({ feedUrl });
 
       expect(R.omit(["reloadData", "loadNext"], result.current)).toEqual(
         mockZappPipesData
@@ -174,9 +178,12 @@ describe("useFeedLoader", () => {
         zappPipes: { "test://testfakeurl": "foobar" },
       };
 
+      let store = initialStore;
+      const wrapper = createWrapper(() => store);
+
       const { result, rerender } = renderHook(
-        () => useFeedLoader({ feedUrl: "test://testfakeurl2" }),
-        { wrapper, initialProps: { store: initialStore } }
+        ({ feedUrl: url }) => useFeedLoader({ feedUrl: url }),
+        { wrapper, initialProps: { feedUrl } }
       );
 
       expect(result.current.data).toBeNull();
@@ -198,7 +205,8 @@ describe("useFeedLoader", () => {
         zappPipes: { "test://testfakeurl2": mockZappPipesData },
       };
 
-      rerender({ store: store2 });
+      store = store2;
+      rerender({ feedUrl });
 
       loadPipesDataSpy.mockRestore();
       useDispatchSpy.mockRestore();
@@ -209,12 +217,6 @@ describe("useFeedLoader", () => {
     const feedUrl = "test://testfakeurl";
     const feedUrlWithNext = "test://withnexttestfakeurl";
 
-    const wrapper: React.FC<any> = ({ children, ...props }) => (
-      <WrappedWithProviders store={props.store || {}}>
-        {children}
-      </WrappedWithProviders>
-    );
-
     describe("reloadData", () => {
       it("Tries to reload data in the redux store", () => {
         const loadPipesDataSpy = jest
@@ -230,10 +232,17 @@ describe("useFeedLoader", () => {
           zappPipes: { [feedUrl]: "foobar" },
         };
 
-        const { result } = renderHook(() => useFeedLoader({ feedUrl }), {
-          wrapper,
-          initialProps: { store: initialStore },
-        });
+        const store = initialStore;
+
+        const wrapper = createWrapper(() => store);
+
+        const { result } = renderHook(
+          ({ feedUrl: url }) => useFeedLoader({ feedUrl: url }),
+          {
+            wrapper,
+            initialProps: { feedUrl },
+          }
+        );
 
         const { reloadData } = result.current;
 
@@ -279,11 +288,14 @@ describe("useFeedLoader", () => {
           zappPipes: { [feedUrlWithNext]: { data: { next: nextUrl } } },
         };
 
+        const store = initialStore;
+        const wrapper = createWrapper(() => store);
+
         const { result } = renderHook(
-          () => useFeedLoader({ feedUrl: feedUrlWithNext }),
+          ({ feedUrl: url }) => useFeedLoader({ feedUrl: url }),
           {
             wrapper,
-            initialProps: { store: initialStore },
+            initialProps: { feedUrl: feedUrlWithNext },
           }
         );
 

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

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 
 jest.useFakeTimers();
 

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

@@ -214,7 +214,7 @@ describe("getSearchContext", () => {
 });
 
 describe("useGetUrlInflater", () => {
-  const { renderHook } = require("@testing-library/react-hooks");
+  const { renderHook } = require("@testing-library/react-native");
 
   it("returns original url when mapping is not provided", () => {
     const { result } = renderHook(() => useGetUrlInflater(), {

package/reactHooks/hookModal/hooks/useHookModalScreenData.ts

@@ -1,20 +1,24 @@
 import { reactHooksLogger } from "../../logger";
-import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/hooks/useZappHooksModalState";
+import { useZappHookModalStore } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
 
 const logger = reactHooksLogger.addSubsystem("useHookModalScreenData");
 
 type VariousScreenData = LegacyNavigationScreenData | ZappRiver | ZappEntry;
 
-export const useHookModalScreenData = (): VariousScreenData | undefined => {
-  const hookModalState = useZappHooksModalState();
+export const useHookModalScreenData = (
+  skipSubscription: boolean
+): VariousScreenData | undefined => {
+  const hookModalState = useZappHookModalStore((state) =>
+    skipSubscription ? undefined : state.state
+  );
 
-  if (!hookModalState.state?.screenData) {
+  if (!hookModalState?.screenData) {
     return;
   }
 
   try {
-    const screenData = hookModalState.state.screenData?.payload;
-    const hookPlugin = hookModalState.state.screenData.hookPlugin;
+    const screenData = hookModalState.screenData?.payload;
+    const hookPlugin = hookModalState.screenData.hookPlugin;
 
     if (hookPlugin?.screen_id) {
       return {
@@ -23,7 +27,7 @@ export const useHookModalScreenData = (): VariousScreenData | undefined => {
       };
     }
 
-    return hookModalState.state.screenData?.payload;
+    return hookModalState.screenData?.payload;
   } catch (error) {
     logger.error({
       message: "Hook modal screen data creation failed",
@@ -34,6 +38,6 @@ export const useHookModalScreenData = (): VariousScreenData | undefined => {
       jsOnly: true,
     });
 
-    return hookModalState.state.screenData?.payload;
+    return hookModalState.screenData?.payload;
   }
 };

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

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { cleanup, renderHook } from "@testing-library/react-hooks";
+import { cleanup, renderHook } from "@testing-library/react-native";
 import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
 

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

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import configureStore from "redux-mock-store";
 
 const mockStore = configureStore();

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

@@ -1,11 +1,10 @@
 import React from "react";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import { isNavBarVisible, useRoute } from "../";
 import { Provider } from "react-redux";
 import configureMockStore from "redux-mock-store";
 import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NavigationContext";
-import { ZappHookModalContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
 import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 
@@ -83,10 +82,44 @@ const hookModalContextState = {
   },
   setState: jest.fn(),
   resetState: jest.fn(),
+  hookPresentationMode: null,
 };
 
 const hooksModalPathname = `${ROUTE_TYPES.HOOKS_MODAL}/${hookModalContextState.state.screenData.payload.id}`;
 const videoModalPathname = `${ROUTE_TYPES.VIDEO_MODAL}/${videoModalNavigator.videoModalState.item.id}`;
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext",
+  () => {
+    const mockState = {
+      isRunningInBackground: false,
+      setIsRunningInBackground: jest.fn(),
+      setIsPresentingFullScreen: jest.fn(),
+      isPresentationFullScreen: true,
+      isHooksExecutionInProgress: true,
+      setIsHooksExecutionInProgress: jest.fn(),
+      state: {
+        path: "/home",
+        screenData: { payload: { id: "hookExecutedInModal" } },
+      },
+      setState: jest.fn(),
+      resetState: jest.fn(),
+      hookPresentationMode: null,
+    };
+
+    const mockHook = jest.fn((selector) => {
+      return selector ? selector(mockState) : mockState;
+    }) as jest.MockedFunction<any> & { getState: () => typeof mockState };
+
+    mockHook.getState = jest.fn(() => mockState);
+
+    return {
+      useZappHookModalStore: mockHook,
+      zappHookModalStore: mockHook,
+    };
+  }
+);
+
 const mockStore = configureMockStore();
 
 const store = mockStore({
@@ -125,13 +158,11 @@ const videoModalWrapper = ({ children }) => (
 
 const hookModalWrapper = ({ children }) => (
   <Provider store={store}>
-    <ZappHookModalContext.ReactContext.Provider value={hookModalContextState}>
-      <NavigationContext.Provider value={hookModalNavigator}>
-        <PathnameContext.Provider value={hooksModalPathname}>
-          {children}
-        </PathnameContext.Provider>
-      </NavigationContext.Provider>
-    </ZappHookModalContext.ReactContext.Provider>
+    <NavigationContext.Provider value={hookModalNavigator}>
+      <PathnameContext.Provider value={hooksModalPathname}>
+        {children}
+      </PathnameContext.Provider>
+    </NavigationContext.Provider>
   </Provider>
 );
 

package/reactHooks/navigation/index.ts

@@ -1,5 +1,6 @@
-import { useContext, useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { BackHandler } from "react-native";
+import { shallow } from "zustand/shallow";
 
 import {
   useContentTypes,
@@ -8,13 +9,13 @@ import {
 import { HooksManager } from "@applicaster/zapp-react-native-utils/appUtils/HooksManager";
 
 import { LONG_KEY_PRESS_TIMEOUT } from "@applicaster/quick-brick-core/const";
-import { ZappHookModalContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
-import { HookModalContextT } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
+import { useZappHookModalStore } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
 import { HOOKS_EVENTS } from "../../appUtils/HooksManager/constants";
 import { getRiverFromRoute, getTargetRoute } from "../../navigationUtils";
 import { useConnectionInfo } from "../connection";
 
 import { isTV, isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { pick } from "@applicaster/zapp-react-native-utils/utils";
 import { useNavbarState } from "../screen";
 import { useRivers } from "../state";
 import { useLayoutVersion } from "../layout";
@@ -168,7 +169,17 @@ export const useZappHooksForEntry = (
     setIsHooksExecutionInProgress,
     setIsPresentingFullScreen,
     setIsRunningInBackground,
-  }: HookModalContextT = useContext(ZappHookModalContext.ReactContext);
+  } = useZappHookModalStore(
+    (state) =>
+      pick(state, [
+        "setState",
+        "resetState",
+        "setIsHooksExecutionInProgress",
+        "setIsPresentingFullScreen",
+        "setIsRunningInBackground",
+      ]),
+    shallow
+  );
 
   const plugins = usePlugins();
   const rivers = useRivers();

package/reactHooks/navigation/useRoute.ts

@@ -54,7 +54,9 @@ export const useRoute = (
 
   const modalScreenData = modalState.screen;
 
-  const hookModalScreenData = useHookModalScreenData();
+  const hookModalScreenData = useHookModalScreenData(
+    !isHookModalPathname(pathname)
+  );
 
   const videoModalScreenData =
     navigator?.videoModalState?.item &&

package/reactHooks/player/__tests__/useAutoSeek._test.tsx

@@ -1,4 +1,4 @@
-import { act, renderHook } from "@testing-library/react-hooks";
+import { act, renderHook } from "@testing-library/react-native";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
 
 import { ON_HOLD_INTERVAL, SEEK_TYPE, SKIP_TIME_BASE } from "../const";

package/reactHooks/player/__tests__/useTapSeek._test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
 import { useTapSeek } from "../useTapSeek";
 

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { cleanup, renderHook } from "@testing-library/react-hooks";
+import { cleanup, renderHook } from "@testing-library/react-native";
 import configureStore from "redux-mock-store";
 import { Provider } from "react-redux";
 

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { renderHook, cleanup } from "@testing-library/react-hooks";
+import { renderHook, cleanup } from "@testing-library/react-native";
 import configureStore from "redux-mock-store";
 import { Provider } from "react-redux";
 

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Provider } from "react-redux";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import configureStore from "redux-mock-store";
 import { thunk } from "redux-thunk";
 

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

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 
 jest.mock(
   "@applicaster/zapp-react-native-ui-components/Components/River/useScreenConfiguration",

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

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import configureStore from "redux-mock-store";
 
 const mockStore = configureStore();

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Provider } from "react-redux";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import configureStore from "redux-mock-store";
 import { thunk } from "redux-thunk";
 

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

@@ -1,5 +1,5 @@
 import { usePrevious, useIsInitialRender } from "../";
-import { renderHook, cleanup } from "@testing-library/react-hooks";
+import { renderHook, cleanup } from "@testing-library/react-native";
 
 describe("usePrevious", () => {
   it("renders", () => {

package/screenState/__tests__/index.test.ts

@@ -1,4 +1,4 @@
-import { act, renderHook } from "@testing-library/react-hooks";
+import { act, renderHook } from "@testing-library/react-native";
 import { useScreenState } from "../index";
 
 describe("useScreenState", () => {

package/stringUtils/index.ts

@@ -4,7 +4,7 @@ declare const global;
 import * as R from "ramda";
 import camelize from "camelize";
 // @ts-ignore
-import Handlebars from "react-native-handlebars";
+import Handlebars from "handlebars";
 
 global.Buffer = global.Buffer || require("buffer").Buffer;