@applicaster/zapp-react-native-utils 14.0.17 → 14.0.18-alpha.5740764222

package/package.json

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

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

@@ -39,6 +39,7 @@ ReactNative.NativeModules.QuickBrickCommunicationModule =
 
 jest.mock("react-native-safe-area-context", () => ({
   useSafeAreaInsets: () => ({ top: 50 }),
+  useSafeAreaFrame: () => ({ x: 0, y: 0, width: 100, height: 100 }),
 }));
 
 jest.mock("../../../reactUtils", () => ({
@@ -49,6 +50,22 @@ jest.mock("../../../reactUtils", () => ({
 
 jest.mock("../../navigation", () => ({
   useIsScreenActive: () => true,
+  useRoute: () => ({
+    screenData: { general: { screen_orientation: "portrait" } },
+  }),
+}));
+
+jest.mock("../../screen", () => ({
+  useCurrentScreenData: () => null,
+}));
+
+jest.mock("../../device", () => ({
+  useIsTablet: () => false,
+}));
+
+jest.mock("../../../appUtils/orientationHelper", () => ({
+  getScreenOrientation: jest.fn(() => 1), // portrait
+  isOrientationCompatible: jest.fn(() => true),
 }));
 
 jest.mock("../../navigation/useNavigation");

package/reactHooks/layout/types/index.ts

@@ -22,6 +22,12 @@ export type Options = {
   rounded?: boolean;
   deviceInfo?: boolean;
   updateForInactiveScreens?: boolean;
+  /**
+   * When true, dimensions will only update when they match the screen's target orientation.
+   * Returns the last valid dimensions during orientation transitions.
+   * Requires updateForInactiveScreens: false to work properly.
+   */
+  waitForValidOrientation?: boolean;
 };
 
 export type Context = "window" | "screen";

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

@@ -19,6 +19,28 @@ jest.mock(
   })
 );
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
+  useCurrentScreenData: jest.fn().mockReturnValue(null),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
+  useRoute: jest.fn().mockReturnValue({
+    screenData: { general: { screen_orientation: "portrait" } },
+  }),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/device", () => ({
+  useIsTablet: jest.fn().mockReturnValue(false),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/orientationHelper",
+  () => ({
+    getScreenOrientation: jest.fn().mockReturnValue(1), // portrait
+    isOrientationCompatible: jest.fn().mockReturnValue(true),
+  })
+);
+
 jest.doMock("../helpers", () => ({
   getInitialDimensions: jest
     .fn()
@@ -129,4 +151,20 @@ describe("useDimensions", () => {
 
     consoleWarnSpy.mockRestore();
   });
+
+  it("accepts waitForValidOrientation option", () => {
+    // Smoke test to verify the option is accepted without errors
+    const { result } = renderHook(() =>
+      useDimensions("screen", {
+        updateForInactiveScreens: false,
+        waitForValidOrientation: true,
+      })
+    );
+
+    expect(result.current).toMatchObject({
+      width: expect.any(Number),
+      height: expect.any(Number),
+      statusBarHeight: expect.any(Number),
+    });
+  });
 });

package/reactHooks/layout/useDimensions/useDimensions.ts

@@ -11,6 +11,13 @@ import { Options, UseDimensions } from "../types";
 import { getDeviceInfo } from "../getDeviceInfo";
 import { getInitialDimensions } from "./helpers";
 import { useIsScreenActive } from "../../navigation/useIsScreenActive";
+import {
+  getScreenOrientation,
+  isOrientationCompatible,
+} from "../../../appUtils/orientationHelper";
+import { useCurrentScreenData } from "../../screen";
+import { useRoute } from "../../navigation";
+import { useIsTablet } from "../../device";
 
 function compensateForScaleIfNeeded(context) {
   return function () {
@@ -59,9 +66,43 @@ export const useDimensions: UseDimensions = (
     options.fullDimensions = false;
   }
 
+  if (options.waitForValidOrientation === undefined) {
+    options.waitForValidOrientation = false;
+  }
+
   const [dimensions, setDimensions] = useState(getInitialDimensions(context));
   const deviceInfo = useRef(getDeviceInfo(dimensions, appData));
 
+  // Orientation validation setup (only when waitForValidOrientation is enabled)
+  const currentScreenData = useCurrentScreenData();
+  const { screenData } = useRoute();
+  const isTablet = useIsTablet();
+  const isTabletPortrait = appData?.isTabletPortrait;
+
+  const targetScreenData =
+    currentScreenData || (screenData as any)?.targetScreen || screenData;
+
+  const orientation = options.waitForValidOrientation
+    ? getScreenOrientation({
+        screenData: targetScreenData,
+        layoutData: { isTablet, isTabletPortrait },
+      })
+    : null;
+
+  const isOrientationValid = options.waitForValidOrientation
+    ? isOrientationCompatible({
+        orientation,
+        layoutData: {
+          isTablet,
+          isTabletPortrait,
+          width: dimensions.width,
+          height: dimensions.height,
+        },
+      })
+    : true;
+
+  const lastValidDimensions = useRef(dimensions);
+
   const applyOptions = R.compose(
     R.when(() => options.deviceInfo, R.assoc("deviceInfo", deviceInfo.current)),
     R.when(
@@ -109,13 +150,29 @@ export const useDimensions: UseDimensions = (
     };
   }, [isActive]);
 
+  let dimensionsToUse;
+
+  // When waitForValidOrientation is enabled, freeze dimensions during invalid orientation
+  if (options.waitForValidOrientation) {
+    if (isOrientationValid) {
+      // Store last valid dimensions to return during orientation transitions
+      lastValidDimensions.current = dimensions;
+      dimensionsToUse = dimensions;
+    } else {
+      // Return last valid dimensions during orientation transitions
+      dimensionsToUse = lastValidDimensions.current;
+    }
+  } else {
+    dimensionsToUse = dimensions;
+  }
+
   const memoizedDimensions = useMemo(() => {
-    return { ...applyOptions(dimensions), statusBarHeight };
+    return { ...applyOptions(dimensionsToUse), statusBarHeight };
   }, [
-    dimensions.width,
-    dimensions.height,
-    dimensions.fontScale,
-    dimensions.scale,
+    dimensionsToUse.width,
+    dimensionsToUse.height,
+    dimensionsToUse.fontScale,
+    dimensionsToUse.scale,
   ]);
 
   return memoizedDimensions;

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

@@ -1,10 +1,7 @@
 import * as React from "react";
 import { View } from "react-native";
-import { cleanup, renderHook } from "@testing-library/react-hooks";
-import configureStore from "redux-mock-store";
-import { Provider } from "react-redux";
-
-const mockStore = configureStore([]);
+import { cleanup } from "@testing-library/react-native";
+import { renderWithProviders } from "../../../testUtils";
 
 const mock_rtl_flag = false;
 
@@ -46,12 +43,7 @@ describe("cellResolver", () => {
     },
   };
 
-  const store = mockStore({ cellStyles, styles, plugins });
-
-  // eslint-disable-next-line react/prop-types
-  const wrapper = ({ children }) => (
-    <Provider store={store}>{children}</Provider>
-  );
+  const storeState = { cellStyles, styles, plugins };
 
   afterEach(() => {
     cleanup();
@@ -61,8 +53,14 @@ describe("cellResolver", () => {
     expect(useCellResolver).toBeDefined();
   });
 
-  it("Resolves cell plugin", () => {
-    renderHook(() => useCellResolver({ component }), { wrapper });
+  it("resolves cell plugin", () => {
+    const TestComponent = () => {
+      const resolvedCell = useCellResolver({ component });
+
+      return <>{resolvedCell}</>;
+    };
+
+    renderWithProviders(<TestComponent />, storeState);
 
     expect(testCellModule).toBeCalled();
   });

package/reactHooks/resolvers/useCellResolver.ts

@@ -51,6 +51,7 @@ export function useCellResolver({
 
   const { width, height } = useDimensions("screen", {
     updateForInactiveScreens: false,
+    waitForValidOrientation: true,
   });
 
   const { plugins, cellStyles } = usePickFromState(["plugins", "cellStyles"]);