@applicaster/zapp-react-native-ui-components 16.0.0-alpha.6593152532 → 16.0.0-alpha.6918106967

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

@@ -10,11 +10,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
 >
   <View
     onLayout={[Function]}
-    style={
-      {
-        "flex": 1,
-      }
-    }
+    style={{}}
   >
     <RCTScrollView
       ListFooterComponent={
@@ -167,11 +163,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         >
           <View
             onLayout={[Function]}
-            style={
-              {
-                "flex": 1,
-              }
-            }
+            style={{}}
           >
             <View />
           </View>
@@ -183,11 +175,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         >
           <View
             onLayout={[Function]}
-            style={
-              {
-                "flex": 1,
-              }
-            }
+            style={{}}
           />
         </View>
         <View

package/Components/River/__tests__/resultCallback.test.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+
+import { RiverComponent } from "../River";
+
+const mockResolverProps: any[] = [];
+
+jest.mock("../../ScreenResolver", () => ({
+  ScreenResolver: (props: any) => {
+    mockResolverProps.push(props);
+
+    return null;
+  },
+}));
+
+const river = { id: "river-parent-lock", type: "parent_lock" } as any;
+
+const baseProps = {
+  river,
+  screenData: {},
+  groupId: "group-1",
+  scrollViewExtraProps: {},
+  setIsScreenWrappedInContainer: jest.fn(),
+  screenContext: { navBar: { setTitle: jest.fn(), setSummary: jest.fn() } },
+} as any;
+
+const resolved = () => mockResolverProps[mockResolverProps.length - 1];
+
+describe("RiverComponent", () => {
+  beforeEach(() => {
+    mockResolverProps.length = 0;
+  });
+
+  it("forwards resultCallback to the screen it resolves", () => {
+    const resultCallback = jest.fn();
+
+    render(<RiverComponent {...baseProps} resultCallback={resultCallback} />);
+
+    expect(resolved().resultCallback).toBe(resultCallback);
+  });
+
+  it("resolves the screen without a resultCallback when none was given", () => {
+    render(<RiverComponent {...baseProps} />);
+
+    expect(resolved().resultCallback).toBeUndefined();
+  });
+});

package/Components/Screen/TV/hooks/__tests__/useAfterPaint.test.ts

@@ -0,0 +1,60 @@
+import { renderHook, act } from "@testing-library/react-native";
+
+import { useAfterPaint } from "../useAfterPaint";
+
+describe("useAfterPaint", () => {
+  let frameCallbacks: FrameRequestCallback[];
+  let originalRaf: typeof requestAnimationFrame;
+  let originalCancelRaf: typeof cancelAnimationFrame;
+
+  const flushFrame = () => {
+    const callbacks = frameCallbacks;
+    frameCallbacks = [];
+
+    act(() => {
+      callbacks.forEach((cb) => cb(0));
+    });
+  };
+
+  beforeEach(() => {
+    frameCallbacks = [];
+    originalRaf = global.requestAnimationFrame;
+    originalCancelRaf = global.cancelAnimationFrame;
+
+    global.requestAnimationFrame = jest.fn((cb: FrameRequestCallback) => {
+      frameCallbacks.push(cb);
+
+      return frameCallbacks.length;
+    }) as unknown as typeof requestAnimationFrame;
+
+    global.cancelAnimationFrame = jest.fn();
+  });
+
+  afterEach(() => {
+    global.requestAnimationFrame = originalRaf;
+    global.cancelAnimationFrame = originalCancelRaf;
+  });
+
+  it("returns false on the initial render", () => {
+    const { result } = renderHook(() => useAfterPaint());
+
+    expect(result.current).toBe(false);
+  });
+
+  it("stays false after only one animation frame (before paint completes)", () => {
+    const { result } = renderHook(() => useAfterPaint());
+
+    flushFrame();
+
+    expect(result.current).toBe(false);
+  });
+
+  it("returns true after two animation frames (a real post-paint boundary)", () => {
+    const { result } = renderHook(() => useAfterPaint());
+
+    flushFrame();
+    flushFrame();
+
+    expect(result.current).toBe(true);
+  });
+});

package/Components/Screen/TV/hooks/index.ts

@@ -1 +1,3 @@
 export { useInitialFocus } from "./useInitialFocus";
+
+export { useAfterPaint } from "./useAfterPaint";

package/Components/Screen/TV/hooks/useAfterPaint.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+export const useAfterPaint = (): boolean => {
+  const [painted, setPainted] = React.useState(false);
+
+  React.useEffect(() => {
+    let secondFrame: number | undefined;
+
+    const firstFrame = requestAnimationFrame(() => {
+      secondFrame = requestAnimationFrame(() => setPainted(true));
+    });
+
+    return () => {
+      cancelAnimationFrame(firstFrame);
+
+      if (secondFrame !== undefined) {
+        cancelAnimationFrame(secondFrame);
+      }
+    };
+  }, []);
+
+  return painted;
+};

package/Components/Screen/TV/index.web.tsx

@@ -21,7 +21,7 @@ import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/he
 
 import { NavBarContainer } from "../../Layout/TV/NavBarContainer";
 import { ScreenResolver } from "../../ScreenResolver";
-import { useInitialFocus } from "./hooks";
+import { useInitialFocus, useAfterPaint } from "./hooks";
 import { isPlayerPlugin } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils";
 import { FreezeWithCallback } from "../../FreezeWithCallback";
@@ -157,6 +157,13 @@ export const Screen = ({ route, Components }: Props) => {
 
   const isScreenActive = useIsScreenActive();
 
+  // We need to render menu first and then proceed with screen content,
+  // otherwise screen will stay black until everything is loaded and screen
+  // rendering put huge load the CPU pushing rendering even further.
+  // With this approach, menu will be rendered immediately and screen content
+  // will be rendered after paint, which makes it more responsive and prevents black screen.
+  const isContentReady = useAfterPaint();
+
   return (
     <FreezeWithCallback freeze={!isScreenActive} onRelease={onRelease}>
       <View style={[styles.container, { backgroundColor }]}>
@@ -167,12 +174,14 @@ export const Screen = ({ route, Components }: Props) => {
             navigationProps={navigationProps}
           />
         </NavBarContainer>
-        <ScreenResolver
-          screenType={screenType}
-          screenId={screenId}
-          screenData={screenData}
-          groupId={route}
-        />
+        {isContentReady ? (
+          <ScreenResolver
+            screenType={screenType}
+            screenId={screenId}
+            screenData={screenData}
+            groupId={route}
+          />
+        ) : null}
       </View>
     </FreezeWithCallback>
   );

package/Components/Screen/index.tsx

@@ -18,10 +18,13 @@ import {
   useScreenData,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { getNavigationPluginModule } from "@applicaster/zapp-react-native-app/App/Layout/layoutHelpers";
+import {
+  isValidColor,
+  isTransparentColor,
+} from "@applicaster/zapp-react-native-utils/colorUtils";
 
 import { RouteManager } from "../RouteManager";
 import { useScreenConfiguration } from "../River/useScreenConfiguration";
-import { isValidColor } from "./utils";
 import { useWaitForValidOrientation } from "./hooks";
 
 const screenStyles = {
@@ -82,9 +85,10 @@ export function Screen(_props: Props) {
   const style = React.useMemo(
     () => ({
       ...screenStyles,
-      backgroundColor: isValidColor(backgroundColor)
-        ? backgroundColor
-        : theme.app_background_color,
+      backgroundColor:
+        isValidColor(backgroundColor) && !isTransparentColor(backgroundColor)
+          ? backgroundColor
+          : theme.app_background_color,
     }),
     [theme.app_background_color, backgroundColor]
   );

package/Components/ScreenFeedLoader/ScreenFeedLoader.tsx

@@ -8,9 +8,11 @@ import { componentsLogger } from "../../Helpers/logger";
 const logger = componentsLogger.addSubsystem("ScreenFeedLoader");
 
 /** Loads and provides `feedData` and store to  */
-export const ScreenFeedLoader: React.FC<
-  React.PropsWithChildren<{ id: string; feedData: any }>
-> = ({ id, feedData, children }) => {
+export const ScreenFeedLoader: React.FC<{
+  id: string;
+  feedData: any;
+  children: React.ReactElement | null;
+}> = ({ id, feedData, children }) => {
   const { source: feedUrl, mapping } = feedData;
 
   const { data, loading, error } = useFeedLoader({

package/Components/ScreenResolverFeedProvider/ScreenResolverFeedProvider.tsx

@@ -8,7 +8,7 @@ export const ScreenResolverFeedProvider = ({
   useFeedData,
 }: {
   id: string;
-  children: React.ReactNode;
+  children: React.ReactElement | null;
   useFeedData: (id: string) => Option<ZappDataSource>;
 }) => {
   const feedData = useFeedData(id);

package/Components/ScreenRevealManager/Overlay.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { Animated, StyleSheet } from "react-native";
+
+import { BackgroundImage } from "@applicaster/zapp-react-native-ui-components/Components/BackgroundImage";
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    position: "absolute",
+  },
+});
+
+export const Overlay = ({
+  opacity,
+  backgroundColor,
+}: {
+  opacity: Animated.Value;
+  backgroundColor: string;
+}) => {
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        {
+          opacity,
+          backgroundColor,
+        },
+      ]}
+      testID="animated-component"
+    >
+      <BackgroundImage />
+    </Animated.View>
+  );
+};

package/Components/ScreenRevealManager/ScreenRevealManager.ts

@@ -42,9 +42,25 @@ export class ScreenRevealManager {
   private subject$ = new Subject<void>();
   private subscription: Subscription;
 
-  constructor(componentsToRender: ZappUIComponent[], callback: Callback) {
+  /**
+   * @param initialNumberToLoad how many components to wait for before revealing
+   * the screen. Staggering exists so a screen full of network-backed components
+   * does not load them all at once. A caller that has nothing to stagger - see
+   * `disableIncrementalLoading` on the HOC - passes the full count here so the
+   * reveal waits for exactly what gets rendered. Omitted, the count is derived
+   * from the components themselves.
+   */
+  constructor(
+    componentsToRender: ZappUIComponent[],
+    callback: Callback,
+    initialNumberToLoad?: number
+  ) {
     this.numberOfComponentsWaitToLoadBeforePresent =
-      getNumberOfComponentsWaitToLoadBeforePresent(componentsToRender);
+      initialNumberToLoad == null
+        ? getNumberOfComponentsWaitToLoadBeforePresent(componentsToRender)
+        : // Clamped like the computed path: waiting for components that do not
+          // exist would hold the screen behind its overlay until the timeout.
+          Math.min(initialNumberToLoad, componentsToRender.length);
 
     this.renderingState = makeListOf<ComponentLoadingState>(
       COMPONENT_LOADING_STATE.UNKNOWN,

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

@@ -22,6 +22,42 @@ 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 explicit component count", () => {
+  beforeEach(() => {
+    (isFirstComponentGallery as jest.Mock).mockReturnValue(false);
+
+    (makeListOf as jest.Mock).mockImplementation((value, length) =>
+      Array(length).fill(value)
+    );
+
+    (withTimeout$ as jest.Mock).mockReturnValue(new Subject());
+  });
+
+  it("waits for the number of components it is given, not the computed default", () => {
+    const components = Array(6).fill({}) as any;
+
+    const manager = new ScreenRevealManager(components, jest.fn(), 6);
+
+    expect(manager.numberOfComponentsWaitToLoadBeforePresent).toBe(6);
+  });
+
+  it("never waits for more components than it was handed", () => {
+    const components = Array(3).fill({}) as any;
+
+    const manager = new ScreenRevealManager(components, jest.fn(), 10);
+
+    expect(manager.numberOfComponentsWaitToLoadBeforePresent).toBe(3);
+  });
+
+  it("falls back to the computed default when given no explicit count", () => {
+    const components = Array(6).fill({}) as any;
+
+    const manager = new ScreenRevealManager(components, jest.fn());
+
+    expect(manager.numberOfComponentsWaitToLoadBeforePresent).toBe(3);
+  });
+});
+
 describe("ScreenRevealManager", () => {
   let mockCallback: jest.Mock;
   let timeout$: Subject<void>;

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

@@ -9,6 +9,12 @@ import {
   TIMEOUT,
 } from "../withScreenRevealManager";
 
+jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  useTheme: () => ({ app_background_color: "#000000" }),
+}));
+
+jest.mock("../Overlay", () => ({ Overlay: () => null }));
+
 // jest.mock("react-native/Libraries/Animated/NativeAnimatedHelper");
 
 const MockComponent = ({
@@ -37,6 +43,56 @@ const MockComponent = ({
 
 const WrappedComponent = withScreenRevealManager(MockComponent);
 
+describe("withScreenRevealManager disableIncrementalLoading", () => {
+  const components = (count: number) =>
+    Array(count).fill({ component_type: "grid-qb" });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("asks for every component at once when incremental loading is disabled", () => {
+    render(
+      <WrappedComponent
+        componentsToRender={components(6)}
+        disableIncrementalLoading
+      />
+    );
+
+    expect(screen.getByTestId("mock-component").props.initialNumberToLoad).toBe(
+      6
+    );
+  });
+
+  it("still tracks the component count after it changes", () => {
+    const { rerender } = render(
+      <WrappedComponent
+        componentsToRender={components(6)}
+        disableIncrementalLoading
+      />
+    );
+
+    rerender(
+      <WrappedComponent
+        componentsToRender={components(9)}
+        disableIncrementalLoading
+      />
+    );
+
+    expect(screen.getByTestId("mock-component").props.initialNumberToLoad).toBe(
+      9
+    );
+  });
+
+  it("loads incrementally when the flag is not set", () => {
+    render(<WrappedComponent componentsToRender={components(6)} />);
+
+    expect(screen.getByTestId("mock-component").props.initialNumberToLoad).toBe(
+      3
+    );
+  });
+});
+
 describe.skip("withScreenRevealManager", () => {
   beforeEach(() => {
     jest.clearAllMocks();

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
@@ -26,11 +21,23 @@ export const SHOWN = 1; // opacity = 1
 type Props = {
   componentsToRender: ZappUIComponent[];
   backgroundColor?: string;
+  /**
+   * Renders every component at once instead of revealing them a few at a time.
+   *
+   * For a screen that builds its own components and holds all of them already -
+   * a form, say - staggering buys nothing and costs: each rebuild of the list
+   * tears it back down to the first few and lets the rest crawl in again.
+   *
+   * This is a flag rather than a count on purpose. A count would have to be
+   * re-read whenever the number of components changes, while "do not stagger"
+   * stays true whatever the screen ends up holding.
+   */
+  disableIncrementalLoading?: boolean;
 };
 
 export const withScreenRevealManager = (Component) => {
   return function WithScreenRevealManager(props: Props) {
-    const { componentsToRender } = props;
+    const { componentsToRender, disableIncrementalLoading } = props;
 
     const [isContentReadyToBeShown, setIsContentReadyToBeShown] =
       React.useState(false);
@@ -47,7 +54,8 @@ export const withScreenRevealManager = (Component) => {
       () =>
         new ScreenRevealManager(
           componentsToRender,
-          handleSetIsContentReadyToBeShown
+          handleSetIsContentReadyToBeShown,
+          disableIncrementalLoading ? componentsToRender.length : undefined
         )
     );
 
@@ -85,7 +93,11 @@ export const withScreenRevealManager = (Component) => {
         <Component
           {...props}
           initialNumberToLoad={
-            managerRef.current.numberOfComponentsWaitToLoadBeforePresent
+            // Recomputed on every render, so the count follows the components
+            // even though the manager settled its own expectation at mount.
+            disableIncrementalLoading
+              ? componentsToRender.length
+              : managerRef.current.numberOfComponentsWaitToLoadBeforePresent
           }
           onLoadFinishedFromScreenRevealManager={
             managerRef.current.onLoadFinished
@@ -93,17 +105,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/TopCutoffOverlay/index.tsx

@@ -7,7 +7,7 @@ import { useMarginTop } from "./hooks";
 
 interface IProps {
   targetScreenId?: string;
-  children?: React.ReactNode;
+  children: React.ReactElement | null;
   applyTopCutoff?: boolean;
 }
 
@@ -21,7 +21,7 @@ export const TopCutoffOverlay: React.FC<IProps> = ({
   targetScreenId,
   children,
   applyTopCutoff = true,
-}: IProps) => {
+}) => {
   const cutoffHeight = useMarginTop(targetScreenId);
 
   const { backgroundColor: screenBackgroundColor } =