@applicaster/zapp-react-native-ui-components 15.0.0-rc.12 → 15.0.0-rc.121

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

@@ -137,6 +137,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
       keyExtractor={[Function]}
       maxToRenderPerBatch={10}
       onContentSizeChange={[Function]}
+      onEndReached={[Function]}
       onLayout={[Function]}
       onMomentumScrollBegin={[Function]}
       onMomentumScrollEnd={[Function]}
@@ -154,6 +155,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         }
       }
       stickyHeaderIndices={[]}
+      testID="components-map-flat-list"
       viewabilityConfigCallbackPairs={[]}
       windowSize={12}
     >

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

@@ -139,7 +139,13 @@ 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");
 
@@ -190,4 +196,36 @@ 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/index.web.tsx

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

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

@@ -1,19 +1,17 @@
 import * as React from "react";
 import { View } from "react-native";
-import { render } from "@testing-library/react-native";
+import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
 
 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", () => ({
@@ -35,12 +33,14 @@ 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",
   })),
@@ -77,21 +77,44 @@ jest.mock(
   })
 );
 
-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/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", () => ({
   ...jest.requireActual("@applicaster/zapp-react-native-utils/reactHooks"),
@@ -112,26 +135,6 @@ 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,
@@ -151,6 +154,19 @@ 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();
@@ -160,14 +176,22 @@ describe("<Screen Component />", () => {
 
   describe("when the navbar should show", () => {
     it("renders correctly", () => {
-      const { toJSON } = render(<Screen {...screenProps} />);
+      const { toJSON } = renderWithProviders(
+        <Screen {...screenProps} />,
+        store
+      );
+
       expect(toJSON()).toMatchSnapshot();
     });
   });
 
   describe("when the navbar should be hidden", () => {
     it("renders correctly", () => {
-      const { toJSON } = render(<Screen {...screenProps} />);
+      const { toJSON } = renderWithProviders(
+        <Screen {...screenProps} />,
+        store
+      );
+
       expect(toJSON()).toMatchSnapshot();
     });
   });

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

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

package/Components/Screen/hooks.ts

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

package/Components/Screen/index.tsx

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

@@ -1,35 +1,19 @@
 import { resolveNavigationPlugin } from "@applicaster/zapp-react-native-utils/navigationUtils";
 
-/**
- * This function helps to decide wether the menu should be presented on the screen
- * based on route and / or screen Data
- *
- * is similar to the navbar, except that it covers scenarios where only the navbar (and not)
- * the menu, will be hidden
- *
- * - playable screens
- * - qb_search_screen
- * - screen hooks that specify showNavBar or presentFullScreen
- * - screens or nested screens that have allow_screen_plugin_presentation set to true
- *
- * @param {String} route current route of the screen
- * @param {Object} screenData payload associated with the currently presented screen
- * @returns {Boolean}
- */
-export function isMenuVisible(route, screenData, plugins) {
-  const plugin = resolveNavigationPlugin({
+export const BOTTOM_TABS_PLUGIN_ID = "quick-brick-bottom-tabs";
+
+export const SIDE_MENU_PLUGIN_ID = "quick_brick_side_menu";
+
+export function getMenuPlugin(screenData, plugins) {
+  return resolveNavigationPlugin({
     category: "menu",
     navigations:
       screenData?.navigations || screenData?.targetScreen?.navigations,
     plugins,
   });
+}
 
-  const isBottomTabsPlugin = plugin?.identifier === "quick-brick-bottom-tabs";
-
-  if (!isBottomTabsPlugin) {
-    return false;
-  }
-
+function shouldShowNavigation(route, screenData) {
   if (route.includes("playable")) {
     return false;
   }
@@ -56,3 +40,44 @@ export function isMenuVisible(route, screenData, plugins) {
 
   return true;
 }
+
+/**
+ * This function helps to decide whether the menu should be presented on the screen
+ * based on route and / or screen Data
+ *
+ * is similar to the navbar, except that it covers scenarios where only the navbar (and not)
+ * the menu will be hidden
+ *
+ * - playable screens
+ * - qb_search_screen
+ * - screen hooks that specify showNavBar or presentFullScreen
+ * - screens or nested screens that have allow_screen_plugin_presentation set to true
+ *
+ * @param {String} route current route of the screen
+ * @param {Object} screenData payload associated with the currently presented screen
+ * @returns {Boolean}
+ */
+export function isMenuVisible(route, screenData, plugins) {
+  const plugin = getMenuPlugin(screenData, plugins);
+
+  const isBottomTabsPlugin = plugin?.identifier === BOTTOM_TABS_PLUGIN_ID;
+  const isSideMenuPlugin = plugin?.identifier === SIDE_MENU_PLUGIN_ID;
+
+  if (!isBottomTabsPlugin && !isSideMenuPlugin) {
+    return false;
+  }
+
+  return shouldShowNavigation(route, screenData);
+}
+
+export function isBottomTabVisible(route, screenData, plugins) {
+  const plugin = getMenuPlugin(screenData, plugins);
+
+  const isBottomTabsPlugin = plugin?.identifier === BOTTOM_TABS_PLUGIN_ID;
+
+  if (!isBottomTabsPlugin) {
+    return false;
+  }
+
+  return shouldShowNavigation(route, screenData);
+}

package/Components/Screen/orientationHandler.ts

@@ -1,18 +1,16 @@
-import React, { useLayoutEffect } from "react";
+import { useLayoutEffect } from "react";
 
 import {
   allowedOrientationsForScreen,
-  ORIENTATIONS,
   getOrientation,
+  ORIENTATIONS,
   useGetScreenOrientation,
 } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
 import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePlugins, useAppData } from "@applicaster/zapp-react-native-redux";
 import { findPluginByType } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
-
-import { ZappHookModalContext } from "../../Contexts";
-import { HookModalContextT } from "../../Contexts/ZappHookModalContext";
+import { zappHookModalStore } from "../../Contexts/ZappHookModalContext";
 
 /**
  * This function calls the native module needed to set orientation
@@ -65,8 +63,8 @@ export function useNewOrientationForScreenData({
 }: OrientationHookArgs) {
   const isTablet = useIsTablet();
 
-  const { appData, plugins } = usePickFromState(["appData", "plugins"]);
-  const isTabletPortrait = appData?.isTabletPortrait;
+  const plugins = usePlugins();
+  const { isTabletPortrait } = useAppData();
   const isLandscapeTablet = isTablet && !isTabletPortrait;
 
   const screenOrientation = useGetScreenOrientation(screenData);
@@ -89,10 +87,6 @@ type Props = {
 };
 
 export function useScreenOrientationHandler({ screenData, isActive }: Props) {
-  const { isHooksExecutionInProgress } = React.useContext<HookModalContextT>(
-    ZappHookModalContext.ReactContext
-  );
-
   const prevIsActive = usePrevious(isActive);
 
   const newOrientation = useNewOrientationForScreenData({
@@ -105,6 +99,9 @@ export function useScreenOrientationHandler({ screenData, isActive }: Props) {
       return;
     }
 
+    // TODO: make sure it can be static getter and subscription is not needed
+    const { isHooksExecutionInProgress } = zappHookModalStore.getState();
+
     // If modal hook presented we need to skip
     // Change orientation for presenter screen
     if (isHooksExecutionInProgress) {
@@ -116,7 +113,7 @@ export function useScreenOrientationHandler({ screenData, isActive }: Props) {
 
       setOrientation(newOrientation);
     }
-  }, [newOrientation, isHooksExecutionInProgress, prevIsActive, isActive]);
+  }, [newOrientation, prevIsActive, isActive]);
 }
 
 export function useOrientationHandler({ screenData }: OrientationHookArgs) {