@applicaster/zapp-react-native-ui-components 15.0.0-rc.14 → 15.0.0-rc.140

package/Components/TopCutoffOverlay/hooks/__tests__/useMarginTop.test.ts

@@ -0,0 +1,130 @@
+import { renderHook } from "@testing-library/react-native";
+import { useMarginTop } from "../useMarginTop";
+
+// Mocks
+jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  useTheme: jest.fn(),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  useCurrentScreenData: jest.fn(),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/componentsUtils", () => ({
+  isFirstComponentScreenPicker: jest.fn(),
+}));
+
+// Imports after mocks
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { isFirstComponentScreenPicker } from "@applicaster/zapp-react-native-utils/componentsUtils";
+
+describe("useMarginTop", () => {
+  const mockTheme = {
+    screen_margin_top: 10,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    (useTheme as jest.Mock).mockReturnValue(mockTheme);
+  });
+
+  it("returns 0 when ScreenPicker is first component", () => {
+    (useCurrentScreenData as jest.Mock).mockReturnValue({
+      ui_components: [],
+    });
+
+    (isFirstComponentScreenPicker as jest.Mock).mockReturnValue(true);
+
+    const { result } = renderHook(() => useMarginTop("screen1"));
+
+    expect(result.current).toBe(0);
+  });
+
+  it("returns 0 for player screen", () => {
+    (useCurrentScreenData as jest.Mock).mockReturnValue({
+      plugin_type: "player",
+    });
+
+    (isFirstComponentScreenPicker as jest.Mock).mockReturnValue(false);
+
+    const { result } = renderHook(() => useMarginTop("screen1"));
+
+    expect(result.current).toBe(0);
+  });
+
+  it("returns theme value when margin is empty string", () => {
+    (useCurrentScreenData as jest.Mock).mockReturnValue({
+      styles: {
+        screen_margin_top: "",
+      },
+    });
+
+    (isFirstComponentScreenPicker as jest.Mock).mockReturnValue(false);
+
+    const { result } = renderHook(() => useMarginTop("screen1"));
+
+    expect(result.current).toBe(10);
+  });
+
+  it("returns theme value when undefined and general content screen", () => {
+    (useCurrentScreenData as jest.Mock).mockReturnValue({
+      plugin_type: "general_content",
+      styles: {
+        screen_margin_top: undefined,
+      },
+    });
+
+    (isFirstComponentScreenPicker as jest.Mock).mockReturnValue(false);
+
+    const { result } = renderHook(() => useMarginTop("screen1"));
+
+    expect(result.current).toBe(10);
+  });
+
+  it("returns theme value when undefined and supports ui_components", () => {
+    (useCurrentScreenData as jest.Mock).mockReturnValue({
+      ui_components: ["something"],
+      styles: {
+        screen_margin_top: undefined,
+      },
+    });
+
+    (isFirstComponentScreenPicker as jest.Mock).mockReturnValue(false);
+
+    const { result } = renderHook(() => useMarginTop("screen1"));
+
+    expect(result.current).toBe(10);
+  });
+
+  it("returns 0 when undefined and not general content and no ui_components", () => {
+    (useCurrentScreenData as jest.Mock).mockReturnValue({
+      plugin_type: "other",
+      ui_components: null,
+      styles: {
+        screen_margin_top: undefined,
+      },
+    });
+
+    (isFirstComponentScreenPicker as jest.Mock).mockReturnValue(false);
+
+    const { result } = renderHook(() => useMarginTop("screen1"));
+
+    expect(result.current).toBe(0);
+  });
+
+  it("returns value from screenData when defined", () => {
+    (useCurrentScreenData as jest.Mock).mockReturnValue({
+      styles: {
+        screen_margin_top: 25,
+      },
+    });
+
+    (isFirstComponentScreenPicker as jest.Mock).mockReturnValue(false);
+
+    const { result } = renderHook(() => useMarginTop("screen1"));
+
+    expect(result.current).toBe(25);
+  });
+});

package/Components/TopCutoffOverlay/hooks/index.ts

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

package/Components/TopCutoffOverlay/hooks/useMarginTop.ts

@@ -0,0 +1,59 @@
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { isFirstComponentScreenPicker } from "@applicaster/zapp-react-native-utils/componentsUtils";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+/**
+ * The MarginTop is essentially a feature used for managing the visibility of components on your screen.
+ * A more accurate term for this might be something like a 'component visibility threshold' or 'cut-off point'.
+ * In practical terms, MarginTop determines a specific vertical position (given in the 'y' coordinate)
+ * on your screen above which components aren't shown.
+ * You might visualize this as a horizontal line across your screen, and any component crossing this line becomes invisible.
+ *
+ * Classic use case for this feature is making sure that component aren't displayed underneath the navigation bar.
+ */
+
+export const useMarginTop = (targetScreenId: string): number => {
+  const theme = useTheme<BaseThemePropertiesTV>();
+  const screenData = useCurrentScreenData(targetScreenId);
+  const isGeneralContentScreen = screenData?.plugin_type === "general_content";
+  const supportsUiComponents = screenData?.ui_components;
+
+  /**
+   * ScreenPicker is a component but should really be a screen.
+   * We need to skip margin top for it as it's already applied to the target screen
+   **/
+
+  // ignore margin on screenPicker
+  if (isFirstComponentScreenPicker(screenData?.ui_components)) {
+    return 0;
+  }
+
+  const isPlayer = screenData?.plugin_type === "player";
+
+  // ignore margin on inlinePlayer (remove if better way of identifying cases for plugins that don't have marginTop)
+  if (isPlayer) {
+    return 0;
+  }
+
+  // Empty string means that value is blank in the CMS. Fallback to theme
+  if (String(screenData?.styles?.screen_margin_top) === "") {
+    return toNumberWithDefaultZero(theme.screen_margin_top);
+  }
+
+  /**
+   *  If value is undefined it means one of three things
+   *  1. Screen is not a general content screen and it doesn't handle ui components (return 0)
+   *  2. Screen is a general content screen but it doesn't have a margin top value (return theme value)
+   *  3. Screen isn't general content screen but it handles the ui components (return theme value)
+   */
+  if (screenData?.styles?.screen_margin_top === undefined) {
+    if (isGeneralContentScreen || supportsUiComponents) {
+      return toNumberWithDefaultZero(theme.screen_margin_top);
+    }
+
+    return 0;
+  }
+
+  return toNumberWithDefaultZero(screenData?.styles?.screen_margin_top);
+};

package/Components/TopCutoffOverlay/index.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { useScreenConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/River/useScreenConfiguration";
+
+import { useMarginTop } from "./hooks";
+
+interface IProps {
+  targetScreenId?: string;
+  children?: React.ReactNode;
+  applyTopCutoff?: boolean;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+export const TopCutoffOverlay: React.FC<IProps> = ({
+  targetScreenId,
+  children,
+  applyTopCutoff = true,
+}: IProps) => {
+  const cutoffHeight = useMarginTop(targetScreenId);
+
+  const { backgroundColor: screenBackgroundColor } =
+    useScreenConfiguration(targetScreenId);
+
+  const theme = useTheme();
+  const themeBackgroundColor = theme?.app_background_color;
+
+  if (!applyTopCutoff) {
+    return children;
+  }
+
+  return (
+    <View style={styles.container}>
+      {children}
+
+      <View
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          height: cutoffHeight,
+
+          backgroundColor:
+            screenBackgroundColor || themeBackgroundColor || "transparent",
+        }}
+      />
+    </View>
+  );
+};

package/Components/Transitioner/Scene.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { equals } from "ramda";
 import { Animated, ViewProps, ViewStyle } from "react-native";
-import { useSafeAreaFrame } from "react-native-safe-area-context";
 
 import { useScreenOrientationHandler } from "@applicaster/zapp-react-native-ui-components/Components/Screen/orientationHandler";
+import { useMemoizedSafeAreaFrameWithActiveState } from "@applicaster/zapp-react-native-ui-components/Components/Screen/hooks";
 
 import { PathnameContext } from "../../Contexts/PathnameContext";
 import { ScreenDataContext } from "../../Contexts/ScreenDataContext";
@@ -94,10 +94,17 @@ function SceneComponent({
     isActive,
   });
 
-  const frame = useSafeAreaFrame();
+  // Use shared memoized frame hook - synchronized with useWaitForValidOrientation
+  // to prevent race conditions during orientation changes
+  // Pass isActive from props since Scene knows its active state from Transitioner
+  const memoFrame = useMemoizedSafeAreaFrameWithActiveState({
+    updateForInactiveScreens: false,
+    isActive,
+  });
+
   const isAnimating = animating && overlayStyle;
 
-  const dimensions = isAnimating ? fullWidthDimensions : frame;
+  const dimensions = isAnimating ? fullWidthDimensions : memoFrame;
 
   return (
     <Animated.View

package/Components/Transitioner/index.js

@@ -1,7 +1,8 @@
 import * as React from "react";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useAppData } from "@applicaster/zapp-react-native-redux";
+
 import { TransitionerComponent } from "./Transitioner";
 
 export const Transitioner = (props) => {
@@ -16,8 +17,7 @@ export const Transitioner = (props) => {
     deviceInfo: true,
   });
 
-  const { appData } = usePickFromState(["appData"]);
-  const isTabletPortrait = appData?.isTabletPortrait;
+  const { isTabletPortrait } = useAppData();
 
   return (
     <TransitionerComponent