@applicaster/zapp-react-native-utils 15.0.0-alpha.4429053208 → 15.0.0-alpha.4920595583

package/analyticsUtils/analyticsMapper.ts

@@ -63,10 +63,14 @@ class StateHolder {
     return value as string;
   }
 
+  public get analyticsCustomPropertiesConsumed(): boolean {
+    return this._cap !== undefined;
+  }
+
   private acp(prefix: string, suffix: string): string | null {
     if (this._cap === undefined) {
-      this._cap = this.pluckedParams[prefix]
-        ? JSON.parse(this.pluckedParams[prefix])
+      this._cap = this.event.params[prefix]
+        ? JSON.parse(this.event.params[prefix])
         : null;
 
       delete this.pluckedParams[prefix];
@@ -254,6 +258,10 @@ export class Mapper {
 
     let params = resultParams.size ? Object.fromEntries(resultParams) : {};
 
+    if (state.analyticsCustomPropertiesConsumed) {
+      delete params[sourceType.analyticsCustomProperties];
+    }
+
     // deal with the remaining params
     if (!isEmptyOrNil(state.pluckedParams)) {
       if (rule.strategy) {

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

@@ -73,7 +73,7 @@ exports[`focusManagerIOS should be defined 1`] = `
   "isFocusOn": [Function],
   "isFocusOnContent": [Function],
   "isFocusOnMenu": [Function],
-  "isFocusOnTabsScreen": [Function],
+  "isFocusOnTabsScreenContent": [Function],
   "isGroupItemFocused": [Function],
   "moveFocus": [Function],
   "on": [Function],

package/appUtils/focusManager/index.ios.ts

@@ -6,7 +6,7 @@ import {
   isChildOf as isChildOfUtils,
   isPartOfMenu,
   isPartOfContent,
-  isPartOfTabsScreen,
+  isPartOfTabsScreenContent,
 } from "../focusManagerAux/utils/index.ios";
 
 import { Tree } from "./treeDataStructure/Tree";
@@ -17,7 +17,6 @@ import { findChild } from "./utils";
 import {
   emitRegistered,
   emitUnregistered,
-  emitWillFocused,
 } from "../focusManagerAux/utils/utils.ios";
 
 const { FocusableManagerModule } = NativeModules;
@@ -292,8 +291,6 @@ export const focusManager = (function () {
     blur(direction);
     currentFocus = id;
 
-    emitWillFocused(id);
-
     // Extract groupFocusedChanged with a default value of false
     let groupFocusedChanged = false;
 
@@ -439,12 +436,14 @@ export const focusManager = (function () {
     return isPartOfContent(focusableTree, currentFocusable?.props?.id);
   }
 
-  function isFocusOnTabsScreen(tabsScreenContainerId: string): boolean {
+  function isFocusOnTabsScreenContent(
+    screenPickerContentContainerId: string
+  ): boolean {
     const currentFocusable = getCurrentFocus();
 
-    return isPartOfTabsScreen(
+    return isPartOfTabsScreenContent(
       focusableTree,
-      tabsScreenContainerId,
+      screenPickerContentContainerId,
       currentFocusable?.props?.id
     );
   }
@@ -477,7 +476,7 @@ export const focusManager = (function () {
     isFocusOn,
     isFocusOnMenu,
     isFocusOnContent,
-    isFocusOnTabsScreen,
+    isFocusOnTabsScreenContent,
     isChildOf,
   };
 })();

package/appUtils/focusManagerAux/utils/index.ios.ts

@@ -9,9 +9,9 @@ const isNavBar = (node) => startsWith(QUICK_BRICK_NAVBAR, node?.id);
 const isContent = (node) => startsWith(QUICK_BRICK_CONTENT, node?.id);
 const isRoot = (node) => node?.id === "root";
 
-export const isPartOfTabsScreen = (
+export const isPartOfTabsScreenContent = (
   focusableTree,
-  tabsScreenContainerId,
+  screenPickerContentContainerId,
   id
 ) => {
   const node = focusableTree.findInTree(id);
@@ -32,13 +32,13 @@ export const isPartOfTabsScreen = (
     return false;
   }
 
-  if (node?.id === tabsScreenContainerId) {
+  if (node?.id === screenPickerContentContainerId) {
     return true;
   }
 
-  return isPartOfTabsScreen(
+  return isPartOfTabsScreenContent(
     focusableTree,
-    tabsScreenContainerId,
+    screenPickerContentContainerId,
     node.parent?.id
   );
 };

package/appUtils/focusManagerAux/utils/utils.ios.ts

@@ -178,34 +178,27 @@ export const emitNativeRegistered = ({
   }
 };
 
-// Focusable has been focused
-const willFocusedSubject$ = new Subject<FocusableID>();
-const didFocusedSubject$ = new Subject<FocusableID>();
+// /////
 
-export const willFocused$ = willFocusedSubject$.asObservable();
+const focusedSubject$ = new Subject<FocusableID>();
 
-export const didFocused$ = didFocusedSubject$.asObservable();
+const focused$ = focusedSubject$.asObservable();
 
-export const emitWillFocused = (id: FocusableID): void => {
-  willFocusedSubject$.next(id);
+export const emitFocused = (id: FocusableID): void => {
+  focusedSubject$.next(id);
 };
 
-export const emitDidFocused = (id: FocusableID): void => {
-  didFocusedSubject$.next(id);
-};
-
-export const topMenuItemDidFocused$ = didFocused$.pipe(
+export const topMenuItemFocused$ = focused$.pipe(
   filter((id) => id && isPartOfMenu(focusManager.focusableTree, id))
 );
 
-export const contentDidFocused$ = didFocused$.pipe(
+export const contentFocused$ = focused$.pipe(
   filter((id) => {
     const isContent = isPartOfContent(focusManager.focusableTree, id);
 
     return id && isContent;
   })
 );
-// Focusable has been focused
 
 const createFocusableRegistry = () => {
   const subject$ = new ReplaySubject<FocusableID | undefined>(1);
@@ -226,17 +219,13 @@ const createFocusableRegistry = () => {
 /// HOME_TOP_MENU_ITEM
 export const HomeTopMenuItemRegistry = createFocusableRegistry();
 
-export const homeTopMenuItemDidFocused$ = topMenuItemDidFocused$.pipe(
+export const homeTopMenuItemFocused$ = topMenuItemFocused$.pipe(
   withLatestFrom(HomeTopMenuItemRegistry.observable$),
   filter(([id, homeId]) => id === homeId)
 );
 
-/// TABS SCREEN
-export const TabsScreenContentContainerRegistry = createFocusableRegistry();
-
-export const TabsScreenScreenSelectorContainerRegistry =
-  createFocusableRegistry();
-/// TABS SCREEN
+/// SCREEN_PICKER
+export const ScreenPickerContentContainerRegistry = createFocusableRegistry();
 
 /// SEARCH_INPUT
 export const SearchInputRegistry = createFocusableRegistry();

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.4429053208",
+  "version": "15.0.0-alpha.4920595583",
   "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.4429053208",
+    "@applicaster/applicaster-types": "15.0.0-alpha.4920595583",
     "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;