@applicaster/zapp-react-native-ui-components 15.0.0-rc.99 → 15.1.0-alpha.4285753931

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

@@ -139,13 +139,7 @@ jest.mock(
   })
 );
 
-jest.mock("@applicaster/zapp-react-native-ui-components/events", () => ({
-  ...jest.requireActual("@applicaster/zapp-react-native-ui-components/events"),
-  emitScrollEndReached: jest.fn(),
-}));
-
 const { View } = require("react-native");
-const events = require("@applicaster/zapp-react-native-ui-components/events");
 const { ComponentsMap } = require("../ComponentsMap/ComponentsMap");
 const theme = require("./theme-mock.json");
 
@@ -196,36 +190,4 @@ describe("componentsMap", () => {
 
     expect(toJSON()).toMatchSnapshot();
   });
-
-  it("calls emitScrollEndReached when onScroll was called and isScreenWrappedInContainer is false", () => {
-    themeSpy = jest
-      .spyOn(themeUtils, "useTheme")
-      .mockImplementation(() => () => theme);
-
-    events.emitScrollEndReached.mockClear();
-
-    const { getByTestId } = render(
-      <Provider store={store}>
-        <ComponentsMap
-          {...props}
-          isScreenWrappedInContainer={false}
-          feed={{ entry: [] }}
-        />
-      </Provider>
-    );
-
-    const flatList = getByTestId("components-map-flat-list");
-
-    flatList.props.onScroll({
-      nativeEvent: {
-        contentOffset: { y: 0 },
-        layoutMeasurement: { height: 100 },
-        contentSize: { height: 200 },
-      },
-    });
-
-    flatList.props.onEndReached();
-
-    expect(events.emitScrollEndReached).toHaveBeenCalledTimes(1);
-  });
 });

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

@@ -9,10 +9,9 @@ import {
 import {
   useIsScreenActive,
   useNavigation,
-  useRivers,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
-import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import {
   useNavbarState,
   useScreenBackgroundColor,
@@ -21,7 +20,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";
@@ -103,8 +102,7 @@ export const Screen = ({ route, Components }: Props) => {
   }
 
   const navigator = useNavigation();
-  const plugins = usePlugins();
-  const rivers = useRivers();
+  const { plugins = [], rivers = [] } = usePickFromState(["plugins", "rivers"]);
 
   const pathAttributes = getPathAttributes({ pathname: route });
   const routeState = navigator.getStackForPathname(route);
@@ -157,6 +155,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 +172,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/__tests__/Screen.test.tsx

@@ -1,16 +1,20 @@
 import * as React from "react";
 import { View } from "react-native";
-import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+import { render } from "@testing-library/react-native";
 
 const Mocked_RouteManager = jest.fn((props) => (
   <View testID="routeManager" {...props} />
 ));
 
+const mock_navBarVisibleFlag = true;
+
+const mockIsNavBarVisible = jest.fn(() => mock_navBarVisibleFlag);
+
 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", () => ({
@@ -32,14 +36,12 @@ jest.mock(
 );
 
 jest.mock("@applicaster/zapp-react-native-utils/analyticsUtils", () => ({
-  ...jest.requireActual("@applicaster/zapp-react-native-utils/analyticsUtils"),
   useAnalytics: jest.fn(() => ({
     sendScreenEvent: jest.fn(),
   })),
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
-  ...jest.requireActual("@applicaster/zapp-react-native-utils/theme"),
   useTheme: jest.fn(() => ({
     app_background_color: "blue",
   })),
@@ -76,44 +78,21 @@ jest.mock(
   })
 );
 
-jest.mock(
-  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation",
-  () => ({
-    ...jest.requireActual(
-      "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation"
-    ),
-    useNavigation: jest.fn(() => ({
-      canGoBack: () => false,
-      currentRoute: "/river/testId",
-      activeRiver: { id: "testId" },
-      screenData: { id: "testId" },
-      data: { screen: { id: "testId" } },
-    })),
-  })
-);
-
-jest.mock(
-  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
-  () => ({
-    ...jest.requireActual(
-      "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive"
-    ),
-    useIsScreenActive: jest.fn().mockReturnValue(true),
-  })
-);
-
-jest.mock(
-  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute",
-  () => ({
-    ...jest.requireActual(
-      "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute"
-    ),
-    useRoute: jest.fn(() => ({
-      pathname: "/river/testId",
-      screenData: { id: "testId" },
-    })),
-  })
-);
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
+  isNavBarVisible: mockIsNavBarVisible,
+  useIsScreenActive: jest.fn().mockReturnValue(true),
+  useNavigation: jest.fn(() => ({
+    canGoBack: () => false,
+    currentRoute: "/river/testId",
+    activeRiver: { id: "testId" },
+    screenData: { id: "testId" },
+    data: { screen: { id: "testId" } },
+  })),
+  useRoute: jest.fn(() => ({
+    pathname: "/river/testId",
+    screenData: { id: "testId" },
+  })),
+}));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
   ...jest.requireActual("@applicaster/zapp-react-native-utils/reactHooks"),
@@ -134,6 +113,26 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
   useIsTablet: jest.fn(() => false),
 }));
 
+jest.mock("@applicaster/zapp-react-native-redux/hooks", () => {
+  const View = jest.requireActual("react-native").View;
+
+  return {
+    ...jest.requireActual("@applicaster/zapp-react-native-redux/hooks"),
+    usePickFromState: () => ({
+      plugins: [
+        {
+          name: "Offline Plugin",
+          identifier: "offline-experience",
+          type: "general",
+          module: {
+            OfflineFallbackScreen: ({ children }) => <View>{children}</View>, // eslint-disable-line
+          },
+        },
+      ],
+    }),
+  };
+});
+
 const {
   allowedOrientationsForScreen,
   getOrientation,
@@ -153,19 +152,6 @@ const screenProps = {
 
 const { Screen } = require("..");
 
-const store = {
-  plugins: [
-    {
-      name: "Offline Plugin",
-      identifier: "offline-experience",
-      type: "general",
-      module: {
-        OfflineFallbackScreen: ({ children }) => <View>{children}</View>, // eslint-disable-line
-      },
-    },
-  ],
-};
-
 describe("<Screen Component />", () => {
   beforeEach(() => {
     allowedOrientationsForScreen.mockClear();
@@ -175,22 +161,14 @@ describe("<Screen Component />", () => {
 
   describe("when the navbar should show", () => {
     it("renders correctly", () => {
-      const { toJSON } = renderWithProviders(
-        <Screen {...screenProps} />,
-        store
-      );
-
+      const { toJSON } = render(<Screen {...screenProps} />);
       expect(toJSON()).toMatchSnapshot();
     });
   });
 
   describe("when the navbar should be hidden", () => {
     it("renders correctly", () => {
-      const { toJSON } = renderWithProviders(
-        <Screen {...screenProps} />,
-        store
-      );
-
+      const { toJSON } = render(<Screen {...screenProps} />);
       expect(toJSON()).toMatchSnapshot();
     });
   });

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

@@ -1,91 +1,67 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Screen Component /> when the navbar should be hidden renders correctly 1`] = `
-<RNCSafeAreaProvider
-  onInsetsChange={[Function]}
+<View
+  importantForAccessibility="yes"
   style={
-    [
-      {
-        "flex": 1,
-      },
-      undefined,
-    ]
+    {
+      "backgroundColor": "blue",
+      "flex": 1,
+      "paddingTop": 0,
+    }
   }
 >
   <View
-    importantForAccessibility="yes"
-    style={
-      {
-        "backgroundColor": "blue",
-        "flex": 1,
-        "paddingTop": 0,
-      }
-    }
-  >
+    hasMenu={false}
+    id="/river/testId"
+    pathname="/river/testId"
+    selected="testId"
+    testID="navBar"
+    title="Test Title"
+  />
+  <View>
     <View
-      hasMenu={false}
-      id="/river/testId"
       pathname="/river/testId"
-      selected="testId"
-      testID="navBar"
-      title="Test Title"
-    />
-    <View>
-      <View
-        pathname="/river/testId"
-        screenData={
-          {
-            "id": "testId",
-          }
+      screenData={
+        {
+          "id": "testId",
         }
-        testID="routeManager"
-      />
-    </View>
+      }
+      testID="routeManager"
+    />
   </View>
-</RNCSafeAreaProvider>
+</View>
 `;
 
 exports[`<Screen Component /> when the navbar should show renders correctly 1`] = `
-<RNCSafeAreaProvider
-  onInsetsChange={[Function]}
+<View
+  importantForAccessibility="yes"
   style={
-    [
-      {
-        "flex": 1,
-      },
-      undefined,
-    ]
+    {
+      "backgroundColor": "blue",
+      "flex": 1,
+      "paddingTop": 0,
+    }
   }
 >
   <View
-    importantForAccessibility="yes"
-    style={
-      {
-        "backgroundColor": "blue",
-        "flex": 1,
-        "paddingTop": 0,
-      }
-    }
-  >
+    hasMenu={false}
+    id="/river/testId"
+    pathname="/river/testId"
+    selected="testId"
+    testID="navBar"
+    title="Test Title"
+  />
+  <View>
     <View
-      hasMenu={false}
-      id="/river/testId"
       pathname="/river/testId"
-      selected="testId"
-      testID="navBar"
-      title="Test Title"
-    />
-    <View>
-      <View
-        pathname="/river/testId"
-        screenData={
-          {
-            "id": "testId",
-          }
+      screenData={
+        {
+          "id": "testId",
         }
-        testID="routeManager"
-      />
-    </View>
+      }
+      testID="routeManager"
+    />
   </View>
-</RNCSafeAreaProvider>
+</View>
 `;

package/Components/Screen/hooks.ts

@@ -1,19 +1,89 @@
-import { useAppData } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import {
   useGetScreenOrientation,
   isOrientationCompatible,
 } 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,
   });
 
@@ -25,7 +95,8 @@ export const useWaitForValidOrientation = () => {
 
   const isTablet = useIsTablet();
 
-  const { isTabletPortrait } = useAppData();
+  const { appData } = usePickFromState(["appData"]);
+  const isTabletPortrait = appData?.isTabletPortrait;
 
   const layoutData = useMemo(
     () => ({ isTablet, isTabletPortrait, width: screenWidth, height }),

package/Components/Screen/index.tsx

@@ -1,7 +1,8 @@
 /// <reference types="@applicaster/applicaster-types" />
 import React from "react";
 import { AccessibilityInfo, findNodeHandle, View } from "react-native";
-import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { getComponentModule } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import {
@@ -40,7 +41,7 @@ type Props = {
 export function Screen(_props: Props) {
   const theme = useTheme<BaseThemePropertiesMobile>();
   const navigation = useNavigation();
-  const plugins = usePlugins();
+  const { plugins } = usePickFromState(["plugins"]);
 
   // Gets the data for the current screen configuration
   const currentScreenData = useCurrentScreenData();
@@ -92,7 +93,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/Screen/orientationHandler.ts

@@ -7,7 +7,7 @@ import {
   useGetScreenOrientation,
 } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
 import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
-import { usePlugins, useAppData } from "@applicaster/zapp-react-native-redux";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { findPluginByType } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { zappHookModalStore } from "../../Contexts/ZappHookModalContext";
@@ -63,8 +63,8 @@ export function useNewOrientationForScreenData({
 }: OrientationHookArgs) {
   const isTablet = useIsTablet();
 
-  const plugins = usePlugins();
-  const { isTabletPortrait } = useAppData();
+  const { appData, plugins } = usePickFromState(["appData", "plugins"]);
+  const isTabletPortrait = appData?.isTabletPortrait;
   const isLandscapeTablet = isTablet && !isTabletPortrait;
 
   const screenOrientation = useGetScreenOrientation(screenData);