@applicaster/zapp-react-native-ui-components 15.1.0-rc.9 → 16.0.0-alpha.1740103407

package/Components/ScreenRevealManager/ScreenRevealManager.ts

@@ -1,6 +1,11 @@
 import { makeListOf } from "@applicaster/zapp-react-native-utils/arrayUtils";
 import { isFirstComponentGallery } from "@applicaster/zapp-react-native-utils/componentsUtils";
-import { once } from "ramda";
+import { race, Subject, Subscription } from "rxjs";
+import { first } from "rxjs/operators";
+
+import { withTimeout$ } from "@applicaster/zapp-react-native-utils/idleUtils";
+
+const MAX_TIMEOUT_TO_WAIT_COMPONENTS_TO_LOAD = 2000; // 2 seconds
 
 const INITIAL_NUMBER_TO_LOAD = 3;
 
@@ -34,7 +39,8 @@ const getNumberOfComponentsWaitToLoadBeforePresent = (
 export class ScreenRevealManager {
   public numberOfComponentsWaitToLoadBeforePresent: number;
   private renderingState: Array<ComponentLoadingState>;
-  private callback: Callback;
+  private subject$ = new Subject<void>();
+  private subscription: Subscription;
 
   constructor(componentsToRender: ZappUIComponent[], callback: Callback) {
     this.numberOfComponentsWaitToLoadBeforePresent =
@@ -45,32 +51,58 @@ export class ScreenRevealManager {
       this.numberOfComponentsWaitToLoadBeforePresent
     );
 
-    this.callback = once(callback);
+    this.subscription = race(
+      withTimeout$(MAX_TIMEOUT_TO_WAIT_COMPONENTS_TO_LOAD),
+      this.subject$
+    )
+      .pipe(first())
+      .subscribe(callback);
   }
 
   onLoadFinished = (index: number): void => {
+    const currentState = this.renderingState[index];
+
+    if (
+      COMPONENT_LOADING_STATE.LOADED_WITH_SUCCESS === currentState ||
+      COMPONENT_LOADING_STATE.LOADED_WITH_FAILURE === currentState
+    ) {
+      return;
+    }
+
     this.renderingState[index] = COMPONENT_LOADING_STATE.LOADED_WITH_SUCCESS;
 
     if (
       getNumberOfLoaded(this.renderingState) >=
       this.numberOfComponentsWaitToLoadBeforePresent
     ) {
-      this.setIsReadyToShow();
+      this.subject$.next();
+      this.subject$.complete();
     }
   };
 
   onLoadFailed = (index: number): void => {
+    const currentState = this.renderingState[index];
+
+    if (
+      COMPONENT_LOADING_STATE.LOADED_WITH_SUCCESS === currentState ||
+      COMPONENT_LOADING_STATE.LOADED_WITH_FAILURE === currentState
+    ) {
+      return;
+    }
+
     this.renderingState[index] = COMPONENT_LOADING_STATE.LOADED_WITH_FAILURE;
 
     if (
       getNumberOfLoaded(this.renderingState) >=
       this.numberOfComponentsWaitToLoadBeforePresent
     ) {
-      this.setIsReadyToShow();
+      this.subject$.next();
+      this.subject$.complete();
     }
   };
 
-  setIsReadyToShow = (): void => {
-    this.callback();
-  };
+  dispose(): void {
+    this.subscription?.unsubscribe();
+    this.subject$.complete();
+  }
 }

package/Components/ScreenRevealManager/__tests__/Overlay.test.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { Animated } from "react-native";
+import { render } from "@testing-library/react-native";
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/BackgroundImage",
+  () => {
+    const { Text } = require("react-native");
+
+    return {
+      BackgroundImage: () => (
+        <Text testID="background-image">BackgroundImage</Text>
+      ),
+    };
+  }
+);
+
+import { Overlay } from "../Overlay";
+
+const flattenStyle = (style: unknown): Record<string, unknown> => {
+  if (!style) {
+    return {};
+  }
+
+  if (Array.isArray(style)) {
+    return style.reduce<Record<string, unknown>>(
+      (acc, item) => ({ ...acc, ...flattenStyle(item) }),
+      {}
+    );
+  }
+
+  if (typeof style === "object") {
+    return style as Record<string, unknown>;
+  }
+
+  return {};
+};
+
+describe("Overlay", () => {
+  it("renders the animated overlay container", () => {
+    const opacity = new Animated.Value(1);
+
+    const { getByTestId } = render(
+      <Overlay opacity={opacity} backgroundColor="#000000" />
+    );
+
+    expect(getByTestId("animated-component")).toBeTruthy();
+  });
+
+  it("applies opacity and backgroundColor to the overlay", () => {
+    const opacity = new Animated.Value(0.5);
+
+    const { getByTestId } = render(
+      <Overlay opacity={opacity} backgroundColor="#ff0000" />
+    );
+
+    const style = flattenStyle(getByTestId("animated-component").props.style);
+
+    expect(style.backgroundColor).toBe("#ff0000");
+    expect(style.opacity).toBe(0.5);
+  });
+
+  it("positions the overlay with absolute fill layout", () => {
+    const opacity = new Animated.Value(1);
+
+    const { getByTestId } = render(
+      <Overlay opacity={opacity} backgroundColor="#000000" />
+    );
+
+    const style = flattenStyle(getByTestId("animated-component").props.style);
+
+    expect(style.position).toBe("absolute");
+    expect(style.top).toBe(0);
+    expect(style.left).toBe(0);
+    expect(style.right).toBe(0);
+    expect(style.bottom).toBe(0);
+  });
+
+  it("renders BackgroundImage inside the overlay", () => {
+    const opacity = new Animated.Value(1);
+
+    const { getByTestId } = render(
+      <Overlay opacity={opacity} backgroundColor="#000000" />
+    );
+
+    expect(getByTestId("background-image")).toBeTruthy();
+  });
+});

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

@@ -2,106 +2,123 @@ 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", () => {
-  const mockCallback = jest.fn();
+  let mockCallback: jest.Mock;
+  let timeout$: Subject<void>;
 
   beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it("should initialize with the correct number of components to wait for", () => {
-    const componentsToRender: ZappUIComponent[] = [
-      { component_type: "component1" },
-      { component_type: "component2" },
-      { component_type: "component3" },
-    ];
+    jest.useFakeTimers();
+    mockCallback = jest.fn();
+    timeout$ = new Subject();
 
-    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+    (withTimeout$ as jest.Mock).mockReturnValue(timeout$);
+    (isFirstComponentGallery as jest.Mock).mockReturnValue(false);
 
-    expect(manager.numberOfComponentsWaitToLoadBeforePresent).toBe(3);
+    (makeListOf as jest.Mock).mockImplementation((value, length) =>
+      Array(length).fill(value)
+    );
+  });
 
-    expect(manager.renderingState).toEqual([
-      COMPONENT_LOADING_STATE.UNKNOWN,
-      COMPONENT_LOADING_STATE.UNKNOWN,
-      COMPONENT_LOADING_STATE.UNKNOWN,
-    ]);
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+    jest.resetAllMocks();
   });
 
-  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" },
-    ];
+  // ────────────────────────────────────────────────
+  it("should initialize with correct number of components and UNKNOWN state", () => {
+    const components = new Array(5).fill({});
+    const mgr = new ScreenRevealManager(components, mockCallback);
 
-    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+    expect(mgr.numberOfComponentsWaitToLoadBeforePresent).toBe(3);
+    expect(makeListOf).toHaveBeenCalledWith(COMPONENT_LOADING_STATE.UNKNOWN, 3);
+  });
 
-    manager.onLoadFinished(0);
-    manager.onLoadFinished(1);
-    manager.onLoadFinished(2);
+  // ────────────────────────────────────────────────
+  it("should set numberOfComponentsWaitToLoadBeforePresent to 1 if first component is gallery", () => {
+    (isFirstComponentGallery as jest.Mock).mockReturnValue(true);
 
-    expect(mockCallback).toHaveBeenCalledTimes(1);
+    const components = new Array(5).fill({});
+    const mgr = new ScreenRevealManager(components, mockCallback);
+
+    expect(mgr.numberOfComponentsWaitToLoadBeforePresent).toBe(1);
   });
 
-  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" },
-    ];
+  // ────────────────────────────────────────────────
+  it("should trigger callback after all components load successfully", () => {
+    const components = new Array(3).fill({});
+    const mgr = new ScreenRevealManager(components, mockCallback);
 
-    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+    mgr.onLoadFinished(0);
+    expect(mockCallback).not.toHaveBeenCalled();
 
-    manager.onLoadFailed(0);
-    manager.onLoadFailed(1);
-    manager.onLoadFailed(2);
+    mgr.onLoadFinished(1);
+    expect(mockCallback).not.toHaveBeenCalled();
 
+    mgr.onLoadFinished(2);
     expect(mockCallback).toHaveBeenCalledTimes(1);
   });
 
-  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);
+  // ────────────────────────────────────────────────
+  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);
 
-    manager.onLoadFinished(0);
-    manager.onLoadFailed(1);
-    manager.onLoadFinished(2);
+    mgr.onLoadFinished(0);
+    mgr.onLoadFailed(1);
+    mgr.onLoadFailed(2);
 
     expect(mockCallback).toHaveBeenCalledTimes(1);
   });
 
-  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" },
-    ];
-
-    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+  // ────────────────────────────────────────────────
+  it("should not trigger callback twice when same component finishes twice", () => {
+    const components = new Array(3).fill({});
+    const mgr = new ScreenRevealManager(components, mockCallback);
 
-    manager.onLoadFinished(0);
-    manager.onLoadFailed(1);
+    mgr.onLoadFinished(0);
+    mgr.onLoadFinished(0); // duplicate
+    mgr.onLoadFinished(1);
+    mgr.onLoadFinished(2);
 
-    expect(mockCallback).not.toHaveBeenCalled();
+    expect(mockCallback).toHaveBeenCalledTimes(1);
   });
 
-  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" },
-    ];
+  // ────────────────────────────────────────────────
+  it("should trigger callback when timeout$ emits before all loaded", () => {
+    const components = new Array(3).fill({});
+    new ScreenRevealManager(components, mockCallback);
 
-    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
-
-    manager.onLoadFinished(0);
+    timeout$.next(); // simulate timeout event from withTimeout$
 
     expect(mockCallback).toHaveBeenCalledTimes(1);
   });
+
+  // ────────────────────────────────────────────────
+  it("should not call callback if nothing loads and no timeout emitted", () => {
+    const components = new Array(3).fill({});
+    new ScreenRevealManager(components, mockCallback);
+
+    expect(mockCallback).not.toHaveBeenCalled();
+  });
 });

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
@@ -77,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} initialNumberToLoad={1} />;
+      return <Component {...props} />;
     }
 
     return (
@@ -93,17 +88,11 @@ export const withScreenRevealManager = (Component) => {
           onLoadFailedFromScreenRevealManager={managerRef.current.onLoadFailed}
         />
         {isShowOverlay ? (
-          <Animated.View
-            style={[
-              styles.container,
-              {
-                opacity: opacityRef.current,
-                // TODO: we should support background image as well, but for now we will use background color from theme
-                backgroundColor:
-                  props.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,11 +1,10 @@
 import React from "react";
-import { View, ViewStyle } from "react-native";
+import { View, StyleSheet } 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;
@@ -14,9 +13,14 @@ type Props = {
   backgroundColor: string;
 };
 
+const styles = StyleSheet.create({
+  riverWrapper: {
+    flex: 1,
+  },
+});
+
 function TabContentComponent(props: Props) {
   const {
-    styles,
     minHeight,
     backgroundColor,
     changingTab,
@@ -29,7 +33,6 @@ function TabContentComponent(props: Props) {
     <View
       style={[
         styles.riverWrapper,
-
         {
           backgroundColor,
           minHeight,

package/Components/TopCutoffOverlay/__tests__/TopCutoffOverlay.test.tsx

@@ -0,0 +1,201 @@
+import React from "react";
+import { Text } from "react-native";
+import { render } from "@testing-library/react-native";
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/River/useScreenConfiguration",
+  () => ({
+    useScreenConfiguration: jest.fn(),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/TopCutoffOverlay/hooks",
+  () => ({
+    useMarginTop: jest.fn(),
+  })
+);
+
+jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  useTheme: jest.fn(),
+}));
+
+import { TopCutoffOverlay } from "../index";
+import { useMarginTop } from "../hooks";
+import { useScreenConfiguration } from "../../River/useScreenConfiguration";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+
+// Recursively find a View with position: absolute in the JSON tree
+const findOverlayStyle = (node: any): Record<string, any> | null => {
+  if (!node) return null;
+
+  // Style can be a plain object or an array of style objects
+  const styles = Array.isArray(node.props?.style)
+    ? node.props.style
+    : node.props?.style
+      ? [node.props.style]
+      : [];
+
+  const styleObj = styles.find((s: any) => s?.position === "absolute");
+  if (styleObj) return styleObj;
+
+  const children = node.children || [];
+
+  if (Array.isArray(children)) {
+    for (const child of children) {
+      const result = findOverlayStyle(child);
+      if (result) return result;
+    }
+  }
+
+  const propChildren = node.props?.children;
+
+  if (propChildren && Array.isArray(propChildren)) {
+    for (const child of propChildren) {
+      const result = findOverlayStyle(child);
+      if (result) return result;
+    }
+  }
+
+  if (
+    typeof propChildren === "object" &&
+    propChildren !== null &&
+    "type" in propChildren
+  ) {
+    return findOverlayStyle(propChildren);
+  }
+
+  return null;
+};
+
+describe("TopCutoffOverlay", () => {
+  const mockUseMarginTop = useMarginTop as jest.MockedFunction<
+    typeof useMarginTop
+  >;
+
+  const mockUseScreenConfig = useScreenConfiguration as jest.MockedFunction<
+    typeof useScreenConfiguration
+  >;
+
+  const mockUseTheme = useTheme as jest.MockedFunction<typeof useTheme>;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseMarginTop.mockReturnValue(60);
+    mockUseScreenConfig.mockReturnValue({ backgroundColor: "#1a1a1a" });
+    mockUseTheme.mockReturnValue({ app_background_color: "#222222" });
+  });
+
+  it("renders children when applyTopCutoff is false", () => {
+    const { getByText } = render(
+      <TopCutoffOverlay applyTopCutoff={false}>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(getByText("Child content")).toBeTruthy();
+  });
+
+  it("does not render overlay when applyTopCutoff is false", () => {
+    const tree = render(
+      <TopCutoffOverlay applyTopCutoff={false}>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(findOverlayStyle(tree.toJSON())).toBeNull();
+  });
+
+  it("renders overlay when applyTopCutoff is true (default)", () => {
+    const tree = render(
+      <TopCutoffOverlay>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(findOverlayStyle(tree.toJSON())).not.toBeNull();
+  });
+
+  it("renders overlay with correct height from useMarginTop", () => {
+    const tree = render(
+      <TopCutoffOverlay>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(findOverlayStyle(tree.toJSON())?.height).toBe(60);
+  });
+
+  it("uses screenBackgroundColor from useScreenConfiguration when available", () => {
+    mockUseScreenConfig.mockReturnValue({ backgroundColor: "#ff0000" });
+
+    const tree = render(
+      <TopCutoffOverlay>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(findOverlayStyle(tree.toJSON())?.backgroundColor).toBe("#ff0000");
+  });
+
+  it("falls back to themeBackgroundColor when screenBackgroundColor is not available", () => {
+    mockUseScreenConfig.mockReturnValue({ backgroundColor: undefined });
+
+    const tree = render(
+      <TopCutoffOverlay>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(findOverlayStyle(tree.toJSON())?.backgroundColor).toBe("#222222");
+  });
+
+  it("falls back to transparent when neither screenBackgroundColor nor themeBackgroundColor is available", () => {
+    mockUseScreenConfig.mockReturnValue({ backgroundColor: undefined });
+    mockUseTheme.mockReturnValue({});
+
+    const tree = render(
+      <TopCutoffOverlay>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(findOverlayStyle(tree.toJSON())?.backgroundColor).toBe(
+      "transparent"
+    );
+  });
+
+  it("passes targetScreenId to useMarginTop and useScreenConfiguration", () => {
+    render(
+      <TopCutoffOverlay targetScreenId="custom-screen-1">
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(mockUseMarginTop).toHaveBeenCalledWith("custom-screen-1");
+    expect(mockUseScreenConfig).toHaveBeenCalledWith("custom-screen-1");
+  });
+
+  it("positions overlay at top with left/right 0", () => {
+    const tree = render(
+      <TopCutoffOverlay>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    const style = findOverlayStyle(tree.toJSON());
+    expect(style?.top).toBe(0);
+    expect(style?.left).toBe(0);
+    expect(style?.right).toBe(0);
+  });
+
+  it("renders children inside the container", () => {
+    const { getByText } = render(
+      <TopCutoffOverlay>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(getByText("Child content")).toBeTruthy();
+  });
+});