@applicaster/zapp-react-native-ui-components 15.0.0-rc.99 → 16.0.0-rc.1

package/Components/River/River.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import * as R from "ramda";
 import { GeneralContentScreen } from "@applicaster/zapp-react-native-ui-components/Components/GeneralContentScreen";
 
-import { FeedLoader } from "../FeedLoader";
 import { ScreenResolver } from "../ScreenResolver";
 
 type Props = ZappScreenProps & {
@@ -23,24 +22,13 @@ type Props = ZappScreenProps & {
   river: ZappRiver;
 };
 
-type State = {
-  refreshing: boolean;
-};
-
-export class RiverComponent extends React.Component<Props, State> {
+export class RiverComponent extends React.Component<Props> {
   private currentScreenTitle: string;
   private currentScreenSummary: string;
   constructor(props: Props) {
     super(props);
 
-    this.state = {
-      refreshing: false,
-    };
-
     this.applyContexts();
-
-    this.pullToRefreshPipesV1RefreshingStateUpdater =
-      this.pullToRefreshPipesV1RefreshingStateUpdater.bind(this);
   }
 
   applyContexts() {
@@ -69,20 +57,9 @@ export class RiverComponent extends React.Component<Props, State> {
     }
   }
 
-  usesPipesV1Layout() {
-    return this.props?.appData?.layoutVersion === "v1";
-  }
-
-  // Method added to keep pipes v1 logic up to date with the pullToRefresh state.
-  // TODO: Remove when pipes v1 is deprecated.
-  pullToRefreshPipesV1RefreshingStateUpdater(refreshing) {
-    this.setState({ refreshing });
-  }
-
   render() {
     const {
       river,
-      feedUrl,
       screenData,
       isInsideContainer,
       groupId,
@@ -91,22 +68,10 @@ export class RiverComponent extends React.Component<Props, State> {
 
     const { id, type } = river;
 
-    const connectedFeedURL = R.path(["content", "src"], screenData);
-    const _feedUrl = feedUrl || connectedFeedURL;
-
     if (type !== "general_content") {
-      let riverWithConnectedDatasource;
-
-      if (_feedUrl && this.usesPipesV1Layout()) {
-        riverWithConnectedDatasource = {
-          ...river,
-          data: R.merge(river.data || {}, { source: _feedUrl }),
-        };
-      }
-
       return (
         <ScreenResolver
-          screenData={R.mergeLeft(riverWithConnectedDatasource || river, {
+          screenData={R.mergeLeft(river, {
             groupId,
             ...screenData,
           })}
@@ -116,53 +81,15 @@ export class RiverComponent extends React.Component<Props, State> {
       );
     }
 
-    if (!_feedUrl || !this.usesPipesV1Layout()) {
-      this.currentScreenTitle = (screenData && screenData.title) || null;
-
-      return (
-        <GeneralContentScreen
-          screenId={id}
-          isScreenWrappedInContainer={isInsideContainer}
-          groupId={groupId}
-          scrollViewExtraProps={scrollViewExtraProps}
-        />
-      );
-    }
+    this.currentScreenTitle = (screenData && screenData.title) || null;
 
     return (
-      <FeedLoader
-        feedUrl={_feedUrl}
-        refreshing={this.state.refreshing}
-        refreshCallback={() =>
-          this.pullToRefreshPipesV1RefreshingStateUpdater(false)
-        }
-      >
-        {(feed) => {
-          if (!feed) {
-            return null;
-          }
-
-          this.currentScreenSummary = (feed && feed.summary) || null;
-
-          this.currentScreenTitle =
-            (feed && feed.title) || (screenData && screenData.title) || null;
-
-          return (
-            <GeneralContentScreen
-              screenId={id}
-              groupId={groupId}
-              feed={feed}
-              isScreenWrappedInContainer={isInsideContainer}
-              scrollViewExtraProps={scrollViewExtraProps}
-              componentsMapExtraProps={{
-                pullToRefreshPipesV1RefreshingStateUpdater:
-                  this.pullToRefreshPipesV1RefreshingStateUpdater,
-                refreshingPipesV1: this.state.refreshing,
-              }}
-            />
-          );
-        }}
-      </FeedLoader>
+      <GeneralContentScreen
+        screenId={id}
+        isScreenWrappedInContainer={isInsideContainer}
+        groupId={groupId}
+        scrollViewExtraProps={scrollViewExtraProps}
+      />
     );
   }
 }

package/Components/River/RiverItem.tsx

@@ -14,6 +14,7 @@ import { tvPluginsWithCellRenderer } from "../../const";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import type { BehaviorSubject } from "rxjs";
 import { useCallbackActions } from "@applicaster/zapp-react-native-utils/zappFrameworkUtils/HookCallback/useCallbackActions";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 export type RiverItemType = {
   item: ZappUIComponent;
@@ -112,33 +113,38 @@ function RiverItemComponent(props: RiverItemType) {
     CellRenderer = undefined;
   }
 
-  React.useEffect(() => {
-    riverLogger.log({
-      message: "mounting component",
-      data: { item, feedUrl, Component, CellRenderer },
-      jsOnly: true,
-    });
+  const isComponentMissing = isNilOrEmpty(Component);
 
-    if (!CellRenderer && !isGroup(item)) {
+  /**
+   * TODO: Move this plugin existence check further up the stack (before ComponentsMap).
+   * Filtering items at the list-rendering or data-processing level would prevent
+   * mounting RiverItem entirely for missing components.
+   */
+  React.useEffect(() => {
+    if (isComponentMissing) {
       riverLogger.warning({
-        message: "Cell Renderer is null - will fallback to default cell",
-        data: { item, CellRenderer },
+        message: `Component ${item.component_type} is null - skipping rendering`,
+      });
+
+      onLoadFinished(index);
+    } else {
+      riverLogger.log({
+        message: "mounting component",
+        data: { item, feedUrl, Component, CellRenderer },
         jsOnly: true,
       });
+
+      if (!CellRenderer && !isGroup(item)) {
+        riverLogger.warning({
+          message: "Cell Renderer is null - will fallback to default cell",
+          data: { item, CellRenderer },
+          jsOnly: true,
+        });
+      }
     }
   }, []);
 
-  if (!readyToBeDisplayed) {
-    return null;
-  }
-
-  if (Component === null || typeof Component === "undefined") {
-    riverLogger.warning({
-      message: `Component ${item.component_type} is null - skipping rendering`,
-    });
-
-    onLoadFinished(index);
-
+  if (!readyToBeDisplayed || isComponentMissing) {
     return null;
   }
 

package/Components/River/hooks/__tests__/usePullToRefresh.test.ts

@@ -0,0 +1,132 @@
+import { act, renderHook } from "@testing-library/react-native";
+import { refreshCoordinator } from "@applicaster/zapp-react-native-utils/refreshUtils/RefreshCoordinator";
+
+import { usePullToRefresh } from "../usePullToRefresh";
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/refreshUtils/RefreshCoordinator",
+  () => ({
+    refreshCoordinator: {
+      triggerRefresh: jest.fn(),
+    },
+  })
+);
+
+jest.useFakeTimers();
+
+describe("usePullToRefresh", () => {
+  const screenId = "test-screen";
+  const components = [{ id: "comp1" }, { id: "comp2" }] as any;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should initialize with refreshing=false", () => {
+    const { result } = renderHook(() => usePullToRefresh(screenId, components));
+
+    expect(result.current.refreshing).toBe(false);
+  });
+
+  it("should trigger refresh and set refreshing=true", () => {
+    const { result } = renderHook(() => usePullToRefresh(screenId, components));
+
+    act(() => {
+      result.current.onRefresh();
+    });
+
+    expect(result.current.refreshing).toBe(true);
+
+    expect(refreshCoordinator.triggerRefresh).toHaveBeenCalledWith(
+      components,
+      screenId
+    );
+  });
+
+  it("should set refreshing=false after spinner duration", () => {
+    const { result } = renderHook(() => usePullToRefresh(screenId, components));
+
+    act(() => {
+      result.current.onRefresh();
+    });
+
+    expect(result.current.refreshing).toBe(true);
+
+    act(() => {
+      jest.advanceTimersByTime(1500);
+    });
+
+    expect(result.current.refreshing).toBe(false);
+  });
+
+  it("should not stop refreshing before spinner duration", () => {
+    const { result } = renderHook(() => usePullToRefresh(screenId, components));
+
+    act(() => {
+      result.current.onRefresh();
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
+
+    expect(result.current.refreshing).toBe(true);
+  });
+
+  it("should clear timeout on unmount", () => {
+    const clearTimeoutSpy = jest.spyOn(global, "clearTimeout");
+
+    const { result, unmount } = renderHook(() =>
+      usePullToRefresh(screenId, components)
+    );
+
+    act(() => {
+      result.current.onRefresh();
+    });
+
+    unmount();
+
+    expect(clearTimeoutSpy).toHaveBeenCalled();
+  });
+
+  it("should handle multiple refresh calls correctly", () => {
+    const { result } = renderHook(() => usePullToRefresh(screenId, components));
+
+    act(() => {
+      result.current.onRefresh();
+      result.current.onRefresh();
+    });
+
+    expect(refreshCoordinator.triggerRefresh).toHaveBeenCalledTimes(2);
+    expect(result.current.refreshing).toBe(true);
+
+    act(() => {
+      jest.advanceTimersByTime(1500);
+    });
+
+    expect(result.current.refreshing).toBe(false);
+  });
+
+  it("should use latest props in callback", () => {
+    const { result, rerender } = renderHook(
+      ({ screenId, components }) => usePullToRefresh(screenId, components),
+      {
+        initialProps: { screenId, components },
+      }
+    );
+
+    const newComponents = [{ id: "new-comp" }] as any;
+    const newScreenId = "new-screen";
+
+    rerender({ screenId: newScreenId, components: newComponents });
+
+    act(() => {
+      result.current.onRefresh();
+    });
+
+    expect(refreshCoordinator.triggerRefresh).toHaveBeenCalledWith(
+      newComponents,
+      newScreenId
+    );
+  });
+});

package/Components/River/hooks/index.ts

@@ -0,0 +1 @@
+export { usePullToRefresh } from "./usePullToRefresh";

package/Components/River/hooks/usePullToRefresh.ts

@@ -0,0 +1,51 @@
+import { useState, useCallback, useRef, useEffect } from "react";
+import { refreshCoordinator } from "@applicaster/zapp-react-native-utils/refreshUtils/RefreshCoordinator";
+
+const SPINNER_DURATION_MS = 1500;
+
+/**
+ * Pull-to-refresh hook.
+ *
+ * Triggers a refresh for all screen components via RefreshCoordinator.
+ * Each component's UrlFeedResolver already subscribes to refresh$ events
+ * and calls reloadData() when triggered — so this hook only needs to:
+ * 1. Push events into the refresh bus
+ * 2. Show a fixed-duration spinner as UX feedback
+ *
+ * Data updates arrive reactively via Redux (silentRefresh: true keeps
+ * old data visible while loading).
+ */
+export const usePullToRefresh = (
+  screenId: string,
+  components: ZappUIComponent[] = []
+) => {
+  const [refreshing, setRefreshing] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Cleanup timer on unmount
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+
+  const onRefresh = useCallback(() => {
+    setRefreshing(true);
+    refreshCoordinator.triggerRefresh(components, screenId);
+
+    // Spinner is UX feedback for the gesture.
+    // Data updates arrive reactively via Redux (silentRefresh: true).
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+
+    timerRef.current = setTimeout(
+      () => setRefreshing(false),
+      SPINNER_DURATION_MS
+    );
+  }, [components, screenId]);
+
+  return { refreshing, onRefresh };
+};

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

@@ -11,6 +11,7 @@ const mockIsOrientationCompatible = jest.fn(() => true);
 jest.mock("react-native-safe-area-context", () => ({
   ...jest.requireActual("react-native-safe-area-context"),
   useSafeAreaInsets: () => ({ top: 44 }),
+  useSafeAreaFrame: () => ({ x: 0, y: 0, width: 375, height: 812 }),
 }));
 
 jest.mock("../../RouteManager", () => ({

package/Components/Screen/hooks.ts

@@ -5,15 +5,85 @@ import {
 } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
 import {
   useCurrentScreenData,
-  useDimensions,
   useRoute,
   useIsTablet,
+  useIsScreenActive,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useMemo, useEffect, useState } from "react";
+import { useSafeAreaFrame } from "react-native-safe-area-context";
+
+type MemoizedSafeAreaFrameWithActiveStateOptions = {
+  updateForInactiveScreens?: boolean;
+  isActive: boolean;
+};
+
+/**
+ * Base hook that wraps useSafeAreaFrame with memoization and inactive screen filtering.
+ * Requires isActive to be passed explicitly - use useMemoizedSafeAreaFrame for automatic detection.
+ *
+ * @param options.updateForInactiveScreens - If false, frame won't update when screen is inactive (default: true)
+ * @param options.isActive - Whether the screen is currently active
+ * @returns The memoized safe area frame { x, y, width, height }
+ */
+export const useMemoizedSafeAreaFrameWithActiveState = (
+  options: MemoizedSafeAreaFrameWithActiveStateOptions
+) => {
+  const { updateForInactiveScreens = true, isActive } = options;
+  const frame = useSafeAreaFrame();
+
+  const [memoFrame, setMemoFrame] = useState(frame);
+
+  useEffect(() => {
+    const shouldUpdate = isActive || updateForInactiveScreens;
+
+    const dimensionsChanged =
+      frame.width !== memoFrame.width || frame.height !== memoFrame.height;
+
+    if (shouldUpdate && dimensionsChanged) {
+      setMemoFrame(frame);
+    }
+  }, [
+    frame.width,
+    frame.height,
+    isActive,
+    updateForInactiveScreens,
+    frame,
+    memoFrame.width,
+    memoFrame.height,
+  ]);
+
+  return memoFrame;
+};
+
+type MemoizedSafeAreaFrameOptions = {
+  updateForInactiveScreens?: boolean;
+};
+
+/**
+ * Hook that wraps useSafeAreaFrame with memoization and inactive screen filtering.
+ * Uses useIsScreenActive() internally to determine active state - use useMemoizedSafeAreaFrameWithActiveState
+ * if you need to pass isActive explicitly.
+ *
+ * @param options.updateForInactiveScreens - If false, frame won't update when screen is inactive (default: true)
+ * @returns The memoized safe area frame { x, y, width, height }
+ */
+export const useMemoizedSafeAreaFrame = (
+  options: MemoizedSafeAreaFrameOptions = {}
+) => {
+  const { updateForInactiveScreens = true } = options;
+  const isActive = useIsScreenActive();
+
+  return useMemoizedSafeAreaFrameWithActiveState({
+    updateForInactiveScreens,
+    isActive,
+  });
+};
 
 export const useWaitForValidOrientation = () => {
-  const { width: screenWidth, height } = useDimensions("screen", {
-    fullDimensions: true,
+  // Use memoized safe area frame to synchronize with Scene's dimension source
+  // This prevents race conditions where the orientation check passes before
+  // Scene's memoFrame has updated to the new dimensions
+  const { width: screenWidth, height } = useMemoizedSafeAreaFrame({
     updateForInactiveScreens: false,
   });
 

package/Components/Screen/index.tsx

@@ -92,7 +92,13 @@ export function Screen(_props: Props) {
   const isActive = useIsScreenActive();
 
   const ref = React.useRef(null);
-  const isReady = useWaitForValidOrientation();
+  const isOrientationReady = useWaitForValidOrientation();
+
+  // Playable screens handle their own orientation via the native player plugin,
+  // so we skip the orientation wait gate to avoid a deadlock where the screen
+  // waits for landscape but blocks rendering that would trigger the rotation.
+  const isPlayableRoute = pathname?.includes("/playable");
+  const isReady = isOrientationReady || isPlayableRoute;
 
   React.useEffect(() => {
     if (ref.current && isActive && isReady) {

package/Components/ScreenFeedLoader/ScreenFeedLoader.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect } from "react";
+import { PreloaderWrapper } from "../PreloaderWrapper";
+import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { useFeedLoader } from "@applicaster/zapp-react-native-utils/reactHooks";
+
+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 }) => {
+  const { source: feedUrl, mapping } = feedData;
+
+  const { data, loading, error } = useFeedLoader({
+    feedUrl,
+    mapping,
+    pipesOptions: {},
+  });
+
+  const feedStore = useScreenContextV2()._feedStore;
+
+  useEffect(() => {
+    if (data && !loading) {
+      feedStore.setState({ screenFeed: data, screenFeedError: null });
+
+      logger.log("screenFeed set for active screen", { data, screenId: id });
+    }
+
+    if (error && !loading) {
+      feedStore.setState({ screenFeed: data, screenFeedError: error });
+
+      logger.warning("Feed data error:", {
+        data,
+        loading,
+        error,
+        screenId: id,
+      });
+    }
+  }, [data, loading, error, feedStore, id]);
+
+  return (
+    <PreloaderWrapper showPreloader={loading}>{children}</PreloaderWrapper>
+  );
+};

package/Components/ScreenFeedLoader/__tests__/ScreenFeedLoader.test.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { Text } from "react-native";
+import { render, waitFor } from "@testing-library/react-native";
+import { ScreenFeedLoader } from "../ScreenFeedLoader";
+
+const mockUseFeedLoader = jest.fn();
+const mockUseScreenContextV2 = jest.fn();
+const mockSetState = jest.fn();
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  useFeedLoader: (...args) => mockUseFeedLoader(...args),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext",
+  () => ({
+    useScreenContextV2: (...args) => mockUseScreenContextV2(...args),
+  })
+);
+
+describe("ScreenFeedLoader", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockUseScreenContextV2.mockReturnValue({
+      _feedStore: {
+        setState: mockSetState,
+      },
+    });
+  });
+
+  it("hides children while loading", () => {
+    mockUseFeedLoader.mockReturnValue({
+      data: null,
+      loading: true,
+      error: null,
+    });
+
+    const { queryByText } = render(
+      <ScreenFeedLoader id="test" feedData={{ source: "url", mapping: {} }}>
+        <Text>child</Text>
+      </ScreenFeedLoader>
+    );
+
+    expect(queryByText("child")).toBeNull();
+  });
+
+  it("writes loaded feed data to _feedStore", async () => {
+    const data = { entry: { id: "1" } };
+
+    mockUseFeedLoader.mockReturnValue({
+      data,
+      loading: false,
+      error: null,
+    });
+
+    render(
+      <ScreenFeedLoader id="test" feedData={{ source: "url", mapping: {} }}>
+        <Text>child</Text>
+      </ScreenFeedLoader>
+    );
+
+    await waitFor(() => {
+      expect(mockSetState).toHaveBeenCalledWith({
+        screenFeed: data,
+        screenFeedError: null,
+      });
+    });
+  });
+
+  it("writes feed error to _feedStore", async () => {
+    const error = new Error("feed failed");
+    const data = { fallback: true };
+
+    mockUseFeedLoader.mockReturnValue({
+      data,
+      loading: false,
+      error,
+    });
+
+    render(
+      <ScreenFeedLoader id="test" feedData={{ source: "url", mapping: {} }}>
+        <Text>child</Text>
+      </ScreenFeedLoader>
+    );
+
+    await waitFor(() => {
+      expect(mockSetState).toHaveBeenCalledWith({
+        screenFeed: data,
+        screenFeedError: error,
+      });
+    });
+  });
+});

package/Components/ScreenFeedLoader/index.ts

@@ -0,0 +1 @@
+export { ScreenFeedLoader } from "./ScreenFeedLoader";

package/Components/ScreenResolver/__tests__/screenResolver.test.js

@@ -53,6 +53,9 @@ const mockComponents = { ScreenType1, ScreenType2, PlayerController };
 
 const mockState = {
   components: mockComponents,
+  remoteConfigurations: {
+    assets: {},
+  },
   plugins: [
     mockScreenType3,
     mockScreenType4,
@@ -127,6 +130,21 @@ const getWrapper = (screenId, screenType, screenData) => {
   );
 };
 
+const getWrappedWrapper = (screenId, screenType, screenData) => {
+  const ScreenResolver = require("../").ScreenResolver;
+
+  return renderWithProviders(
+    <ScreenResolver
+      {...{
+        screenId,
+        screenType,
+        screenData,
+      }}
+    />,
+    mockState
+  );
+};
+
 describe("<ScreenResolver />", () => {
   it("renders correctly", () => {
     const wrapper = getWrapper("1234", "screen_type_1", {});
@@ -134,6 +152,12 @@ describe("<ScreenResolver />", () => {
     expect(wrapper.getByTestId("screen_type_1")).toBeDefined();
   });
 
+  it("renders correctly when wrapped with default screen context", () => {
+    const wrapper = getWrappedWrapper("1234", "screen_type_1", {});
+
+    expect(wrapper.getByTestId("screen_type_1")).toBeDefined();
+  });
+
   it("picks screen from plugins if it exists", () => {
     const wrapper = getWrapper("A1234", "screen_type_3", {});