@applicaster/zapp-react-native-ui-components 15.0.0-rc.98 → 15.1.0-alpha.1852552014

package/Components/ScreenRevealManager/__tests__/ScreenRevealManager.test.ts

@@ -2,123 +2,106 @@ import {
   ScreenRevealManager,
   COMPONENT_LOADING_STATE,
 } from "../ScreenRevealManager";
-import { Subject } from "rxjs";
-
-jest.mock("@applicaster/zapp-react-native-utils/arrayUtils", () => ({
-  makeListOf: jest.fn((value: any, length: number) =>
-    Array(length).fill(value)
-  ),
-}));
-
-jest.mock("@applicaster/zapp-react-native-utils/componentsUtils", () => ({
-  isFirstComponentGallery: jest.fn(),
-}));
-
-jest.mock("@applicaster/zapp-react-native-utils/idleUtils", () => ({
-  withTimeout$: jest.fn(),
-}));
-
-import { makeListOf } from "@applicaster/zapp-react-native-utils/arrayUtils";
-import { isFirstComponentGallery } from "@applicaster/zapp-react-native-utils/componentsUtils";
-import { withTimeout$ } from "@applicaster/zapp-react-native-utils/idleUtils";
 
 describe("ScreenRevealManager", () => {
-  let mockCallback: jest.Mock;
-  let timeout$: Subject<void>;
+  const mockCallback = jest.fn();
 
   beforeEach(() => {
-    jest.useFakeTimers();
-    mockCallback = jest.fn();
-    timeout$ = new Subject();
-
-    (withTimeout$ as jest.Mock).mockReturnValue(timeout$);
-    (isFirstComponentGallery as jest.Mock).mockReturnValue(false);
-
-    (makeListOf as jest.Mock).mockImplementation((value, length) =>
-      Array(length).fill(value)
-    );
+    jest.clearAllMocks();
   });
 
-  afterEach(() => {
-    jest.clearAllTimers();
-    jest.useRealTimers();
-    jest.resetAllMocks();
-  });
-
-  // ────────────────────────────────────────────────
-  it("should initialize with correct number of components and UNKNOWN state", () => {
-    const components = new Array(5).fill({});
-    const mgr = new ScreenRevealManager(components, mockCallback);
+  it("should initialize with the correct number of components to wait for", () => {
+    const componentsToRender: ZappUIComponent[] = [
+      { component_type: "component1" },
+      { component_type: "component2" },
+      { component_type: "component3" },
+    ];
 
-    expect(mgr.numberOfComponentsWaitToLoadBeforePresent).toBe(3);
-    expect(makeListOf).toHaveBeenCalledWith(COMPONENT_LOADING_STATE.UNKNOWN, 3);
-  });
+    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
 
-  // ────────────────────────────────────────────────
-  it("should set numberOfComponentsWaitToLoadBeforePresent to 1 if first component is gallery", () => {
-    (isFirstComponentGallery as jest.Mock).mockReturnValue(true);
+    expect(manager.numberOfComponentsWaitToLoadBeforePresent).toBe(3);
 
-    const components = new Array(5).fill({});
-    const mgr = new ScreenRevealManager(components, mockCallback);
-
-    expect(mgr.numberOfComponentsWaitToLoadBeforePresent).toBe(1);
+    expect(manager.renderingState).toEqual([
+      COMPONENT_LOADING_STATE.UNKNOWN,
+      COMPONENT_LOADING_STATE.UNKNOWN,
+      COMPONENT_LOADING_STATE.UNKNOWN,
+    ]);
   });
 
-  // ────────────────────────────────────────────────
-  it("should trigger callback after all components load successfully", () => {
-    const components = new Array(3).fill({});
-    const mgr = new ScreenRevealManager(components, mockCallback);
+  it("should call the callback when the required number of components are loaded successfully", () => {
+    const componentsToRender: ZappUIComponent[] = [
+      { component_type: "component1" },
+      { component_type: "component2" },
+      { component_type: "component3" },
+    ];
 
-    mgr.onLoadFinished(0);
-    expect(mockCallback).not.toHaveBeenCalled();
+    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
 
-    mgr.onLoadFinished(1);
-    expect(mockCallback).not.toHaveBeenCalled();
+    manager.onLoadFinished(0);
+    manager.onLoadFinished(1);
+    manager.onLoadFinished(2);
 
-    mgr.onLoadFinished(2);
     expect(mockCallback).toHaveBeenCalledTimes(1);
   });
 
-  // ────────────────────────────────────────────────
-  it("should trigger callback after some components fail to load but all finished", () => {
-    const components = new Array(3).fill({});
-    const mgr = new ScreenRevealManager(components, mockCallback);
+  it("should call the callback when the required number of components fail to load", () => {
+    const componentsToRender: ZappUIComponent[] = [
+      { component_type: "component1" },
+      { component_type: "component2" },
+      { component_type: "component3" },
+    ];
+
+    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
 
-    mgr.onLoadFinished(0);
-    mgr.onLoadFailed(1);
-    mgr.onLoadFailed(2);
+    manager.onLoadFailed(0);
+    manager.onLoadFailed(1);
+    manager.onLoadFailed(2);
 
     expect(mockCallback).toHaveBeenCalledTimes(1);
   });
 
-  // ────────────────────────────────────────────────
-  it("should not trigger callback twice when same component finishes twice", () => {
-    const components = new Array(3).fill({});
-    const mgr = new ScreenRevealManager(components, mockCallback);
+  it("should call the callback when a mix of successful and failed loads meet the required number", () => {
+    const componentsToRender: ZappUIComponent[] = [
+      { component_type: "component1" },
+      { component_type: "component2" },
+      { component_type: "component3" },
+    ];
+
+    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
 
-    mgr.onLoadFinished(0);
-    mgr.onLoadFinished(0); // duplicate
-    mgr.onLoadFinished(1);
-    mgr.onLoadFinished(2);
+    manager.onLoadFinished(0);
+    manager.onLoadFailed(1);
+    manager.onLoadFinished(2);
 
     expect(mockCallback).toHaveBeenCalledTimes(1);
   });
 
-  // ────────────────────────────────────────────────
-  it("should trigger callback when timeout$ emits before all loaded", () => {
-    const components = new Array(3).fill({});
-    new ScreenRevealManager(components, mockCallback);
+  it("should not call the callback if the required number of components are not loaded", () => {
+    const componentsToRender: ZappUIComponent[] = [
+      { component_type: "component1" },
+      { component_type: "component2" },
+      { component_type: "component3" },
+    ];
 
-    timeout$.next(); // simulate timeout event from withTimeout$
+    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
 
-    expect(mockCallback).toHaveBeenCalledTimes(1);
+    manager.onLoadFinished(0);
+    manager.onLoadFailed(1);
+
+    expect(mockCallback).not.toHaveBeenCalled();
   });
 
-  // ────────────────────────────────────────────────
-  it("should not call callback if nothing loads and no timeout emitted", () => {
-    const components = new Array(3).fill({});
-    new ScreenRevealManager(components, mockCallback);
+  it("should call the callback when the when first component is gallery and it was loaded successfully", () => {
+    const componentsToRender: ZappUIComponent[] = [
+      { component_type: "gallery-qb" },
+      { component_type: "component2" },
+      { component_type: "component3" },
+    ];
 
-    expect(mockCallback).not.toHaveBeenCalled();
+    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+
+    manager.onLoadFinished(0);
+
+    expect(mockCallback).toHaveBeenCalledTimes(1);
   });
 });

package/Components/ScreenRevealManager/withScreenRevealManager.tsx

@@ -1,8 +1,10 @@
 import * as React from "react";
-import { Animated, StyleSheet } from "react-native";
+import { Animated } from "react-native";
+
 import { isFirstComponentScreenPicker } from "@applicaster/zapp-react-native-utils/componentsUtils";
 import { useRefWithInitialValue } from "@applicaster/zapp-react-native-utils/reactHooks/state/useRefWithInitialValue";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { Overlay } from "./Overlay";
 
 import { ScreenRevealManager } from "./ScreenRevealManager";
 import {
@@ -10,13 +12,6 @@ import {
   emitScreenRevealManagerIsNotReadyToShow,
 } from "./utils";
 
-const styles = StyleSheet.create({
-  container: {
-    ...StyleSheet.absoluteFillObject,
-    position: "absolute",
-  },
-});
-
 export const TIMEOUT = 300; // 300 ms
 
 const HIDDEN = 0; // opacity = 0
@@ -25,6 +20,7 @@ export const SHOWN = 1; // opacity = 1
 
 type Props = {
   componentsToRender: ZappUIComponent[];
+  backgroundColor?: string;
 };
 
 export const withScreenRevealManager = (Component) => {
@@ -76,7 +72,7 @@ export const withScreenRevealManager = (Component) => {
 
     if (isFirstComponentScreenPicker(componentsToRender)) {
       // for screen-picker with have additional internal ComponentsMap, no need to add this wrapper
-      return <Component {...props} />;
+      return <Component {...props} initialNumberToLoad={1} />;
     }
 
     return (
@@ -92,15 +88,11 @@ export const withScreenRevealManager = (Component) => {
           onLoadFailedFromScreenRevealManager={managerRef.current.onLoadFailed}
         />
         {isShowOverlay ? (
-          <Animated.View
-            style={[
-              styles.container,
-              {
-                opacity: opacityRef.current,
-                backgroundColor: theme.app_background_color,
-              },
-            ]}
-            testID="animated-component"
+          <Overlay
+            opacity={opacityRef.current}
+            backgroundColor={
+              props.backgroundColor ?? theme.app_background_color
+            }
           />
         ) : null}
       </>

package/Components/Tabs/TabContent.tsx

@@ -1,10 +1,11 @@
 import React from "react";
-import { View, StyleSheet } from "react-native";
+import { View, ViewStyle } from "react-native";
 
 import { River } from "@applicaster/zapp-react-native-ui-components/Components";
 import { withNestedNavigationContextProvider } from "@applicaster/zapp-react-native-ui-components/Contexts/NestedNavigationContext";
 
 type Props = {
+  styles: Record<string, ViewStyle>;
   minHeight: number;
   changingTab: boolean;
   feedUrl: string;
@@ -13,14 +14,9 @@ type Props = {
   backgroundColor: string;
 };
 
-const styles = StyleSheet.create({
-  riverWrapper: {
-    flex: 1,
-  },
-});
-
 function TabContentComponent(props: Props) {
   const {
+    styles,
     minHeight,
     backgroundColor,
     changingTab,
@@ -33,6 +29,7 @@ function TabContentComponent(props: Props) {
     <View
       style={[
         styles.riverWrapper,
+
         {
           backgroundColor,
           minHeight,

package/Components/Transitioner/Scene.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { equals } from "ramda";
 import { Animated, ViewProps, ViewStyle } from "react-native";
-import { useSafeAreaFrame } from "react-native-safe-area-context";
 
 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 { PathnameContext } from "../../Contexts/PathnameContext";
 import { ScreenDataContext } from "../../Contexts/ScreenDataContext";
@@ -94,19 +94,13 @@ function SceneComponent({
     isActive,
   });
 
-  const frame = useSafeAreaFrame();
-
-  const [memoFrame, setMemoFrame] = React.useState(frame);
-
-  useEffect(() => {
-    if (isActive) {
-      setMemoFrame((oldFrame) =>
-        oldFrame.width === frame.width && oldFrame.height === frame.height
-          ? oldFrame
-          : frame
-      );
-    }
-  }, [isActive, frame.width, frame.height]);
+  // 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,
+  });
 
   const isAnimating = animating && overlayStyle;
 

package/Components/Transitioner/index.js

@@ -1,8 +1,7 @@
 import * as React from "react";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
-import { useAppData } from "@applicaster/zapp-react-native-redux";
-
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { TransitionerComponent } from "./Transitioner";
 
 export const Transitioner = (props) => {
@@ -17,7 +16,8 @@ export const Transitioner = (props) => {
     deviceInfo: true,
   });
 
-  const { isTabletPortrait } = useAppData();
+  const { appData } = usePickFromState(["appData"]);
+  const isTabletPortrait = appData?.isTabletPortrait;
 
   return (
     <TransitionerComponent