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

package/Components/GeneralContentScreen/GeneralContentScreen.tsx

@@ -13,7 +13,7 @@ import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/he
 import { ScreenTrackedViewPositionsContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenTrackedViewPositionsContext";
 import { useEventAlerts } from "./utils/useEventAlerts";
 
-const { log_info } = createLogger({
+const { log_debug } = createLogger({
   category: "ScreenContainer",
   subsystem: "General",
 });
@@ -54,20 +54,15 @@ export const GeneralContentScreen = ({
     useEffect(() => {
       if (!riverActionProvidersReady) {
         if (actionsInitialStateSetters.length > 0) {
-          log_info(
-            "ScreenContainer: starting to check river action providers to initialize",
-            { actionsInitialStateSetters }
-          );
-
           allSettled(actionsInitialStateSetters).finally(() => {
-            log_info(
+            log_debug(
               "ScreenContainer: action provider ready, completed. Starting to present screen"
             );
 
             setRiverActionProvidersReady(true);
           });
         } else {
-          log_info(
+          log_debug(
             "ScreenContainer: no action provider to check, completed. Starting to present screen"
           );
 

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

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

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

@@ -13,7 +13,6 @@ 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", () => {
@@ -178,7 +177,7 @@ describe("componentsMap", () => {
     cleanup();
   });
 
-  it("renders components map correctly", () => {
+  it("renders renders components map correctly", () => {
     themeSpy = jest
       .spyOn(themeUtils, "useTheme")
       .mockImplementation(() => () => theme);

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

@@ -99,14 +99,9 @@ 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" }],
@@ -130,11 +125,7 @@ jest.mock("@applicaster/zapp-react-native-redux/hooks", () => {
           identifier: "offline-experience",
           type: "general",
           module: {
-            OfflineFallbackScreen: ({
-              children,
-            }: {
-              children: React.ReactNode;
-            }) => <View>{children}</View>, // eslint-disable-line
+            OfflineFallbackScreen: ({ children }) => <View>{children}</View>, // eslint-disable-line
           },
         },
       ],
@@ -169,14 +160,14 @@ describe("<Screen Component />", () => {
   });
 
   describe("when the navbar should show", () => {
-    it("renders correctly with navbar", () => {
+    it("renders correctly", () => {
       const { toJSON } = render(<Screen {...screenProps} />);
       expect(toJSON()).toMatchSnapshot();
     });
   });
 
   describe("when the navbar should be hidden", () => {
-    it("renders correctly without navbar", () => {
+    it("renders correctly", () => {
       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 without navbar 1`] = `
+exports[`<Screen Component /> when the navbar should be hidden renders correctly 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 with navbar 1`] = `
+exports[`<Screen Component /> when the navbar should show renders correctly 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, isReadyForDisplay]);
+  }, [readyState, orientation, layoutData]);
 
   return readyState;
 };

package/Components/Transitioner/Scene.tsx

@@ -4,13 +4,6 @@ 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";
@@ -21,55 +14,6 @@ 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;
@@ -150,15 +94,18 @@ function SceneComponent({
     isActive,
   });
 
-  const dimensions = useSceneDimensions({
-    screenData,
+  // 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,
     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,23 +24,6 @@ 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.18-alpha.5740764222",
+  "version": "14.0.18-rc.0",
   "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.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",
+    "@applicaster/applicaster-types": "14.0.18-rc.0",
+    "@applicaster/zapp-react-native-bridge": "14.0.18-rc.0",
+    "@applicaster/zapp-react-native-redux": "14.0.18-rc.0",
+    "@applicaster/zapp-react-native-utils": "14.0.18-rc.0",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",