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

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 {
@@ -18,10 +19,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 = {
@@ -40,7 +44,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();
@@ -82,9 +86,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]
   );
@@ -92,7 +97,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);

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", {});
 

package/Components/ScreenResolver/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useGetComponent } from "./useGetComponent";
+
+export { useScreenComponentResolver } from "./useScreenComponentResolver";

package/Components/ScreenResolver/hooks/useGetComponent.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+import { toPascalCase } from "@applicaster/zapp-react-native-utils/stringUtils";
+import {
+  useAppSelector,
+  selectComponents,
+} from "@applicaster/zapp-react-native-redux";
+
+export const useGetComponent = (screenType) => {
+  const components = useAppSelector(selectComponents);
+
+  return React.useMemo(() => {
+    return components[toPascalCase(screenType)];
+  }, [components, screenType]);
+};

package/Components/ScreenResolver/hooks/useScreenComponentResolver.tsx

@@ -0,0 +1,90 @@
+import * as React from "react";
+import { path, prop } from "ramda";
+import {
+  findPluginByType,
+  findPluginByIdentifier,
+} from "@applicaster/zapp-react-native-utils/pluginUtils";
+import { HandlePlayable } from "../../HandlePlayable";
+import { HookRenderer } from "../../HookRenderer";
+import { LinkHandler } from "../../LinkHandler";
+import { Favorites } from "../../Favorites";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+
+import { useCallbackActions } from "@applicaster/zapp-react-native-utils/zappFrameworkUtils/HookCallback/useCallbackActions";
+import { useGetComponent } from "./useGetComponent";
+import { getScreenTypeProps } from "../utils";
+
+export enum PresentationType {
+  Standalone = "Standalone",
+  Hook = "Hook",
+}
+
+const screenTypeComponents = {
+  favorites: Favorites,
+  link: LinkHandler,
+  playable: HandlePlayable,
+  hooks: HookRenderer,
+};
+
+export const useScreenComponentResolver = (screenType, props) => {
+  const plugins = usePlugins();
+  const { hookPlugin } = props.screenData || {};
+  const component = useGetComponent(screenType);
+
+  const screenAction = useCallbackActions(
+    hookPlugin || props.screenData,
+    props.screenData.callback
+  );
+
+  const {
+    videoModalState: { mode },
+  } = useNavigation();
+
+  const componentProps = {
+    ...props,
+    mode,
+    screenAction,
+  };
+
+  const ScreenTypeComponent = screenTypeComponents?.[screenType];
+
+  if (ScreenTypeComponent) {
+    return (
+      <ScreenTypeComponent
+        {...getScreenTypeProps(screenType, componentProps)}
+      />
+    );
+  }
+
+  const ScreenPlugin =
+    findPluginByType(screenType, plugins, { skipWarning: true }) ||
+    findPluginByIdentifier(screenType, plugins) ||
+    findPluginByIdentifier(hookPlugin && hookPlugin.identifier, plugins) ||
+    component;
+
+  const ScreenComponent =
+    path(["module", "Component"], ScreenPlugin) ||
+    prop("module", ScreenPlugin) ||
+    prop("Component", ScreenPlugin) ||
+    ScreenPlugin;
+
+  const configuration =
+    prop("configuration", ScreenPlugin) ||
+    prop("__plugin_configuration", ScreenComponent);
+
+  if (!ScreenComponent) {
+    return null;
+  }
+
+  return (
+    <ScreenComponent
+      {...props}
+      callback={props.resultCallback || screenAction}
+      screenId={props.screenId}
+      screenData={props.screenData}
+      presentationType={PresentationType.Standalone}
+      configuration={configuration}
+    />
+  );
+};