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

package/Components/River/__tests__/__snapshots__/componentsMap.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`componentsMap renders renders components map correctly 1`] = `
+exports[`componentsMap renders components map correctly 1`] = `
 <View
   style={
     {

package/Components/River/__tests__/componentsMap.test.js

@@ -13,6 +13,7 @@ jest.mock(
 
 jest.mock("react-native-safe-area-context", () => ({
   useSafeAreaInsets: () => ({ top: 50 }),
+  useSafeAreaFrame: () => ({ x: 0, y: 0, width: 375, height: 812 }),
 }));
 
 jest.mock("react-native", () => {
@@ -177,7 +178,7 @@ describe("componentsMap", () => {
     cleanup();
   });
 
-  it("renders renders components map correctly", () => {
+  it("renders components map correctly", () => {
     themeSpy = jest
       .spyOn(themeUtils, "useTheme")
       .mockImplementation(() => () => theme);

package/Components/Screen/__tests__/Screen.test.tsx

@@ -99,9 +99,14 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
   useCurrentScreenData: jest.fn(() => ({
     id: "testId",
   })),
+  useIsScreenActive: jest.fn(() => true),
   useNavbarState: jest.fn(() => ({
     title: "Test Title",
   })),
+  useRoute: jest.fn(() => ({
+    pathname: "/river/testId",
+    screenData: { id: "testId" },
+  })),
   useScreenData: jest.fn(() => ({
     id: "testId",
     navigations: [{ id: "testId", category: "nav_bar" }],
@@ -125,7 +130,11 @@ jest.mock("@applicaster/zapp-react-native-redux/hooks", () => {
           identifier: "offline-experience",
           type: "general",
           module: {
-            OfflineFallbackScreen: ({ children }) => <View>{children}</View>, // eslint-disable-line
+            OfflineFallbackScreen: ({
+              children,
+            }: {
+              children: React.ReactNode;
+            }) => <View>{children}</View>, // eslint-disable-line
           },
         },
       ],
@@ -160,14 +169,14 @@ describe("<Screen Component />", () => {
   });
 
   describe("when the navbar should show", () => {
-    it("renders correctly", () => {
+    it("renders correctly with navbar", () => {
       const { toJSON } = render(<Screen {...screenProps} />);
       expect(toJSON()).toMatchSnapshot();
     });
   });
 
   describe("when the navbar should be hidden", () => {
-    it("renders correctly", () => {
+    it("renders correctly without navbar", () => {
       const { toJSON } = render(<Screen {...screenProps} />);
       expect(toJSON()).toMatchSnapshot();
     });

package/Components/Screen/__tests__/__snapshots__/Screen.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Screen Component /> when the navbar should be hidden renders correctly 1`] = `
+exports[`<Screen Component /> when the navbar should be hidden renders correctly without navbar 1`] = `
 <View
   importantForAccessibility="yes"
   style={
@@ -33,7 +33,7 @@ exports[`<Screen Component /> when the navbar should be hidden renders correctly
 </View>
 `;
 
-exports[`<Screen Component /> when the navbar should show renders correctly 1`] = `
+exports[`<Screen Component /> when the navbar should show renders correctly with navbar 1`] = `
 <View
   importantForAccessibility="yes"
   style={

package/Components/Screen/hooks.ts

@@ -117,7 +117,7 @@ export const useWaitForValidOrientation = () => {
     if (isReadyForDisplay && !readyState) {
       setReadyState(true);
     }
-  }, [readyState, orientation, layoutData]);
+  }, [readyState, orientation, layoutData, isReadyForDisplay]);
 
   return readyState;
 };

package/Components/Transitioner/Scene.tsx

@@ -4,6 +4,13 @@ import { Animated, ViewProps, ViewStyle } from "react-native";
 
 import { useScreenOrientationHandler } from "@applicaster/zapp-react-native-ui-components/Components/Screen/orientationHandler";
 import { useMemoizedSafeAreaFrameWithActiveState } from "@applicaster/zapp-react-native-ui-components/Components/Screen/hooks";
+import {
+  getScreenOrientation,
+  isOrientationCompatible,
+} from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useSafeAreaFrame } from "react-native-safe-area-context";
 
 import { PathnameContext } from "../../Contexts/PathnameContext";
 import { ScreenDataContext } from "../../Contexts/ScreenDataContext";
@@ -14,6 +21,55 @@ const fullWidthDimensions = {
   width: "100%",
 };
 
+function useSceneDimensions({
+  screenData,
+  isActive,
+  animating,
+  overlayStyle,
+}: {
+  screenData: NavigationScreenData;
+  isActive: boolean;
+  animating: boolean;
+  overlayStyle: ViewStyle;
+}) {
+  const rawFrame = useSafeAreaFrame();
+  const isTablet = useIsTablet();
+  const { appData } = usePickFromState(["appData"]);
+  const isTabletPortrait = appData?.isTabletPortrait;
+
+  const orientation = getScreenOrientation({
+    screenData,
+    layoutData: { isTablet, isTabletPortrait },
+  });
+
+  const isFrameOrientationValid = isOrientationCompatible({
+    orientation,
+    layoutData: {
+      isTablet,
+      isTabletPortrait,
+      width: rawFrame.width,
+      height: rawFrame.height,
+    },
+  });
+
+  const memoFrame = useMemoizedSafeAreaFrameWithActiveState({
+    updateForInactiveScreens: false,
+    isActive: isActive && isFrameOrientationValid,
+  });
+
+  const isAnimating = animating && overlayStyle;
+
+  // When orientation is in transition (frame doesn't match target orientation),
+  // use fullWidthDimensions so the scene fills its container rather than
+  // rendering with stale dimensions (e.g. portrait dims on a landscape player)
+  const isOrientationTransitioning = isActive && !isFrameOrientationValid;
+
+  const dimensions =
+    isAnimating || isOrientationTransitioning ? fullWidthDimensions : memoFrame;
+
+  return dimensions;
+}
+
 type Props = {
   children: any;
   style: any;
@@ -94,18 +150,15 @@ function SceneComponent({
     isActive,
   });
 
-  // Use shared memoized frame hook - synchronized with useWaitForValidOrientation
-  // to prevent race conditions during orientation changes
-  // Pass isActive from props since Scene knows its active state from Transitioner
-  const memoFrame = useMemoizedSafeAreaFrameWithActiveState({
-    updateForInactiveScreens: false,
+  const dimensions = useSceneDimensions({
+    screenData,
     isActive,
+    animating,
+    overlayStyle,
   });
 
   const isAnimating = animating && overlayStyle;
 
-  const dimensions = isAnimating ? fullWidthDimensions : memoFrame;
-
   return (
     <Animated.View
       pointerEvents={pointerEvents}

package/Components/Transitioner/__tests__/Scene.test.js

@@ -24,6 +24,23 @@ jest.mock(
   })
 );
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/orientationHelper",
+  () => ({
+    getScreenOrientation: jest.fn(() => 1),
+    isOrientationCompatible: jest.fn(() => true),
+  })
+);
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  useIsTablet: jest.fn(() => false),
+  useRoute: jest.fn(() => ({ screenData: {} })),
+}));
+
+jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
+  usePickFromState: jest.fn(() => ({ appData: {} })),
+}));
+
 jest.mock("../../../Contexts/PathnameContext", () => ({
   PathnameContext: jest.requireActual("react").createContext({ pathname: "" }),
 }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "14.0.17",
+  "version": "14.0.18-alpha.5740764222",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "14.0.17",
-    "@applicaster/zapp-react-native-bridge": "14.0.17",
-    "@applicaster/zapp-react-native-redux": "14.0.17",
-    "@applicaster/zapp-react-native-utils": "14.0.17",
+    "@applicaster/applicaster-types": "14.0.18-alpha.5740764222",
+    "@applicaster/zapp-react-native-bridge": "14.0.18-alpha.5740764222",
+    "@applicaster/zapp-react-native-redux": "14.0.18-alpha.5740764222",
+    "@applicaster/zapp-react-native-utils": "14.0.18-alpha.5740764222",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",