@applicaster/zapp-react-native-utils 12.0.0-alpha.3977160850 → 12.0.0-alpha.4043183114

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

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

package/reactHooks/layout/getDeviceInfo/index.ts

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

package/reactHooks/layout/types/index.ts

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

package/reactHooks/layout/useDimensions/useDimensions.ts

@@ -1,13 +1,16 @@
-import { useState, useLayoutEffect, useRef, useMemo } from "react";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
 
 import * as R from "ramda";
 
 import { Dimensions, Platform, StatusBar } from "react-native";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+
 import { isTV } from "../../../reactUtils";
 
 import { Options, UseDimensions } from "../types";
 import { getDeviceInfo } from "../getDeviceInfo";
 import { getInitialDimensions } from "./helpers";
+import { useIsScreenActive } from "../../navigation";
 
 function compensateForScaleIfNeeded(context) {
   return function () {
@@ -32,8 +35,11 @@ const statusBarHeight = StatusBar?.currentHeight;
  */
 export const useDimensions: UseDimensions = (
   context = "window",
-  fullDimensions = { fullDimensions: false }
+  fullDimensions = { fullDimensions: false, updateForInactiveScreens: true }
 ) => {
+  const isActive = useIsScreenActive();
+  const { appData } = usePickFromState(["appData"]);
+
   if (typeof fullDimensions === "boolean") {
     // eslint-disable-next-line no-console
     console.warn(
@@ -47,7 +53,7 @@ export const useDimensions: UseDimensions = (
       : { ...fullDimensions };
 
   const [dimensions, setDimensions] = useState(getInitialDimensions(context));
-  const deviceInfo = useRef(getDeviceInfo(dimensions));
+  const deviceInfo = useRef(getDeviceInfo(dimensions, appData));
 
   const applyOptions = R.compose(
     R.when(() => options.deviceInfo, R.assoc("deviceInfo", deviceInfo.current)),
@@ -73,7 +79,7 @@ export const useDimensions: UseDimensions = (
 
       if (newDimensions.width === newDimensions.height) {
         /**
-         * Ignoring case occured on iOS when Dimensions.get sometimes returning
+         * Ignoring case occurred on iOS when Dimensions.get sometimes returning
          * wrong `window` sizes
          * when switch background -> foreground state.
          * ( TODO fix when 1:1 aspect ratio will be used )
@@ -81,8 +87,8 @@ export const useDimensions: UseDimensions = (
 
         // eslint-disable-next-line no-console
         console.log("change: wrong values - width equal to height, ignoring");
-      } else {
-        deviceInfo.current = getDeviceInfo(newDimensions);
+      } else if (isActive || options.updateForInactiveScreens) {
+        deviceInfo.current = getDeviceInfo(newDimensions, appData);
         setDimensions(newDimensions);
       }
     };
@@ -92,7 +98,7 @@ export const useDimensions: UseDimensions = (
     return () => {
       activeSubscription.remove();
     };
-  }, []);
+  }, [isActive]);
 
   const memoizedDimensions = useMemo(() => {
     return { ...applyOptions(dimensions), statusBarHeight };

package/reactHooks/navigation/__mocks__/index.ts

@@ -15,11 +15,26 @@ export const mockMenu: ZappNavigation = {
   // preset_id?: null | unknown;
 };
 
+export const useRoute = jest.fn(() => ({
+  screenData: {
+    name: "someName",
+  },
+  pathname: "someRoute",
+}));
+
 export const useNavigation = jest.fn(() => ({
   data: {},
+  screenData: {
+    name: "someName",
+  },
+  activeRiver: {
+    id: "someId",
+  },
   currentRoute: "someRoute",
 }));
 
 export const useNavigationPluginData = jest.fn().mockReturnValue(mockMenu);
 
 export const useIsNavBarVisible = jest.fn().mockReturnValue(true);
+
+export const useIsScreenActive = jest.fn().mockReturnValue(true);

package/reactHooks/navigation/__mocks__/useNavigation.ts

@@ -0,0 +1,7 @@
+export const useNavigation = jest.fn(() => ({
+  data: {},
+  screenData: {
+    name: "someName",
+  },
+  currentRoute: "someRoute",
+}));

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

@@ -1,12 +1,13 @@
 import React from "react";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
 import { renderHook } from "@testing-library/react-hooks";
-import { useRoute, isNavBarVisible } from "../";
+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";
 
 const plugins = [];
 
@@ -45,10 +46,19 @@ const videoItem = {
   type: { value: "video" },
 };
 
+const mockGetStackForPathname = jest.fn().mockReturnValue(homeStack);
+
 const mainStackNavigator = {
-  getStackForPathname: jest.fn().mockReturnValue(homeStack),
+  getStackForPathname: mockGetStackForPathname,
   getModalState: () => {},
   videoModalState: {},
+  canGoBack: jest.fn(),
+};
+
+const _createWrapper = (Wrapper, props) => {
+  return function CreatedWrapper({ children }: any) {
+    return <Wrapper {...props}>{children}</Wrapper>;
+  };
 };
 
 const videoModalNavigator = {
@@ -85,13 +95,21 @@ const store = mockStore({
   contentTypes,
 });
 
-const mainStackWrapper = ({ children }) => (
+const mainStackWrapper = ({
+  children,
+  navigator = {},
+  pathname = homeStack.route,
+}) => (
   <Provider store={store}>
-    <NavigationContext.Provider value={mainStackNavigator}>
-      <PathnameContext.Provider value={homeStack.route}>
-        {children}
-      </PathnameContext.Provider>
-    </NavigationContext.Provider>
+    <ScreenDataContext.Provider value={homeStack.state}>
+      <NavigationContext.Provider
+        value={{ ...mainStackNavigator, ...navigator, currentRoute: pathname }}
+      >
+        <PathnameContext.Provider value={pathname}>
+          {children}
+        </PathnameContext.Provider>
+      </NavigationContext.Provider>
+    </ScreenDataContext.Provider>
   </Provider>
 );
 

package/reactHooks/navigation/index.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 /* eslint max-len: off */
 
-import React, { useEffect, useMemo } from "react";
+import React, { useContext, useEffect, useMemo } from "react";
 import { BackHandler, InteractionManager, NativeModules } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
@@ -12,25 +12,30 @@ import {
 import { HooksManager } from "@applicaster/zapp-react-native-utils/appUtils/HooksManager";
 
 import { legacyScreenData } from "@applicaster/quick-brick-core/App/NavigationProvider/utils";
-import { LONG_KEY_PRESS_TIMEOUT } from "@applicaster/quick-brick-core/const";
+import {
+  LONG_KEY_PRESS_TIMEOUT,
+  QUICK_BRICK_NAVBAR,
+  QUICK_BRICK_CONTENT,
+} from "@applicaster/quick-brick-core/const";
 import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/ZappHooksModal";
 import { ZappHookModalContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
 import { HookModalContextT } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
 import { HOOKS_EVENTS } from "../../appUtils/HooksManager/constants";
 import {
+  getNavigationProps,
   getRiverFromRoute,
   getTargetRoute,
-  getNavigationProps,
 } from "../../navigationUtils";
 import { platformSelect } from "../../reactUtils";
 import { useConnectionInfo } from "../connection";
 import { getTargetScreenData } from "../screen/useTargetScreenData";
 
-import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { isTV, isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useNavbarState } from "../screen";
 import { useNavigation } from "./useNavigation";
 import { useModalStore } from "../../modalState";
+import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 
 export { useNavigation } from "./useNavigation";
 
@@ -73,6 +78,10 @@ export function isNavBarVisible(
     return false;
   }
 
+  if (screenData?.plugin_type === "login" && isTV()) {
+    return false;
+  }
+
   /* Match if screen is Hook */
   if (route.startsWith("/hooks/")) {
     const module = screenData?.module;
@@ -147,6 +156,7 @@ export const useRoute = (): {
 } => {
   const pathname = usePathname() || "";
   const navigator = useNavigation();
+  const screenDataContext = legacyScreenData(useContext(ScreenDataContext));
 
   const { plugins, contentTypes, rivers } = usePickFromState([
     "plugins",
@@ -154,7 +164,6 @@ export const useRoute = (): {
     "contentTypes",
   ]);
 
-  const currentStack = navigator.getStackForPathname(pathname);
   const { modalState } = useModalStore();
   const hookModalState = useZappHooksModalState();
 
@@ -176,15 +185,6 @@ export const useRoute = (): {
       plugins
     );
 
-  const currentRouteScreenData = legacyScreenData(
-    {
-      screen: currentStack?.state?.screen ?? navigator.data?.screen ?? {},
-      entry: currentStack?.state?.entry ?? {},
-    } as NavigationScreenData,
-
-    plugins
-  );
-
   // There are 4 route scenarios
   // For regular screens take date from navigator stack.
   // is path is model grab screenData from modal state
@@ -211,15 +211,10 @@ export const useRoute = (): {
   }
 
   if (isHookPathname(pathname)) {
-    const screenData =
-      "hookPlugin" in currentRouteScreenData
-        ? currentRouteScreenData
-        : navigator.screenData;
-
-    return { screenData, pathname };
+    return { screenData: screenDataContext, pathname };
   }
 
-  const screenData = currentRouteScreenData;
+  const screenData = screenDataContext;
 
   return { screenData, pathname };
 };
@@ -325,16 +320,19 @@ export const useZappHooksForEntry = (
         callbacks?.handleHookComplete?.(props);
       };
 
-      const hookManager = HooksManager(hooksOptions)
+      const hookManager = HooksManager(hooksOptions);
+
+      hookManager.subscriber
         .on(HOOKS_EVENTS.PRESENT_SCREEN_HOOK, handleHookPresent)
         .on(HOOKS_EVENTS.ERROR, handleHookError)
         .on(HOOKS_EVENTS.CANCEL, handleHookCancel)
         .on(HOOKS_EVENTS.START_BACKGROUND_HOOK, handleBackgroundHook)
-        .on(HOOKS_EVENTS.COMPLETE, handleHookComplete)
-        .handleHooks(entry);
+        .on(HOOKS_EVENTS.COMPLETE, handleHookComplete);
+
+      hookManager.handleHooks(entry);
 
       return () => {
-        hookManager
+        hookManager.subscriber
           .removeHandler(HOOKS_EVENTS.PRESENT_SCREEN_HOOK, handleHookPresent)
           .removeHandler(HOOKS_EVENTS.ERROR, handleHookError)
           .removeHandler(HOOKS_EVENTS.CANCEL, handleHookCancel)
@@ -446,3 +444,51 @@ export const useGetBottomTabBarHeight = (): number => {
 
   return !isBottomBarNavigation ? 0 : tabBarHeight + topBorderWidth;
 };
+
+// If current screen is active/focused (visible to the user)
+export const useIsScreenActive = () => {
+  const pathname = usePathname();
+  const { currentRoute, videoModalState } = useNavigation();
+
+  if (
+    videoModalState.visible &&
+    ["FULLSCREEN", "MAXIMIZED", "PIP"].includes(videoModalState.mode)
+  ) {
+    return false;
+  }
+
+  return pathname === currentRoute;
+};
+
+type Return = (prefix: string) => string;
+
+export const useUniqueRouteSuffix = (): Return => {
+  const pathname = usePathname();
+  const { currentRoute } = useNavigation();
+
+  const suffix = `currentRoute:${currentRoute}_pathname:${pathname}`;
+
+  const withUniqueRouteSuffix = React.useCallback((prefix: string) => {
+    if (isWeb()) {
+      // we should use extended route prefix only on Web, where we have stack-navigator
+      return `${prefix}___${suffix}`;
+    }
+
+    // for other platforms use previous version
+    return prefix;
+  }, []);
+
+  return withUniqueRouteSuffix;
+};
+
+export const useNavbarId = () => {
+  const withUniqueRouteSuffix = useUniqueRouteSuffix();
+
+  return withUniqueRouteSuffix(QUICK_BRICK_NAVBAR);
+};
+
+export const useContentId = () => {
+  const withUniqueRouteSuffix = useUniqueRouteSuffix();
+
+  return withUniqueRouteSuffix(QUICK_BRICK_CONTENT);
+};

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { renderHook, cleanup } from "@testing-library/react-hooks";
+import { cleanup, renderHook } from "@testing-library/react-hooks";
 import configureStore from "redux-mock-store";
 import { Provider } from "react-redux";
 
@@ -12,6 +12,8 @@ jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
   useIsRTL: jest.fn(() => mock_rtl_flag),
 }));
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
+
 const { useCellResolver } = require("../useCellResolver");
 
 describe("cellResolver", () => {

package/reactHooks/screen/__mocks__/useScreenContext.ts

@@ -1,7 +1,7 @@
 // @ts-ignore
 import { View } from "react-native";
 
-const mockData: NavigationScreenData = {
+const mockData = {
   screen: {
     id: "screen-id",
     name: "screen",
@@ -40,3 +40,5 @@ const mockData: NavigationScreenData = {
 };
 
 export const useScreenContext = jest.fn().mockReturnValue(mockData);
+
+export const useNavbarState = () => ({ visible: true });

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

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

package/reactHooks/screen/index.ts

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

package/reactHooks/screen/useScreenBackgroundColor.ts

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

package/reactHooks/screen/useScreenContext.ts

@@ -2,11 +2,12 @@ import { useContext, useMemo } from "react";
 
 import { useModalNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ModalNavigationContext";
 import { useNestedNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NestedNavigationContext";
-import { useNavigation } from "../navigation";
+import { useNavigation } from "../navigation/useNavigation";
 
 import { ScreenContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenContext";
+import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
 
-function useScreenContextV2() {
+export function useScreenContextV2() {
   return useContext(ScreenContext);
 }
 
@@ -44,9 +45,8 @@ export function useSetNavbarState() {
 
 export function useScreenContext(): NavigationScreenData {
   const navigator = useNavigation();
+  const screenData = useContext(ScreenDataContext);
 
-  const screenKey = useMemo(() => navigator?.key, [navigator]);
-  const screenData = useMemo(() => navigator?.data, [screenKey]);
   const modalScreenData = navigator?.modalData;
 
   const isModal = useModalNavigationContext();