@applicaster/zapp-react-native-ui-components 15.0.0-alpha.4920595583 → 15.0.0-alpha.5104105031

package/Components/Cell/Cell.tsx

@@ -26,11 +26,15 @@ type Props = {
     componentAnchorPointY: number;
     headerOffset?: number;
     extraAnchorPointYOffset?: number;
+    componentPaddingTop?: number;
   }) => void;
   offsetUpdater: (arg1: string, arg2: number, arg3: number) => number;
   componentId: string;
   component: {
     id: string;
+    styles?: {
+      component_padding_top?: number;
+    };
   };
   selected?: boolean;
   CellRenderer: React.FunctionComponent<any> & {
@@ -178,6 +182,8 @@ export class CellComponent extends React.Component<Props, State> {
         componentAnchorPointY,
         headerOffset,
         extraAnchorPointYOffset,
+        componentPaddingTop:
+          this.props?.component?.styles?.component_padding_top,
       });
     }
   }

package/Components/GeneralContentScreen/utils/useCurationAPI.ts

@@ -9,10 +9,9 @@ import {
 import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { Categories } from "./logger";
 import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
-import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute";
+import { useScreenContext } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 
 import {
-  ZappPipesEntryContext,
   ZappPipesScreenContext,
   ZappPipesSearchContext,
 } from "@applicaster/zapp-react-native-ui-components/Contexts";
@@ -136,7 +135,6 @@ export const useCurationAPI = (
     [components]
   );
 
-  const { pathname } = useRoute();
   const [searchContext] = ZappPipesSearchContext.useZappPipesContext();
   const [screenContext] = ZappPipesScreenContext.useZappPipesContext();
 
@@ -146,10 +144,12 @@ export const useCurationAPI = (
     screenContextType === TABS_SCREEN_TYPE ||
     screenContextType === QB_TABS_SCREEN_TYPE;
 
-  const [entryContext] = ZappPipesEntryContext.useZappPipesContext(
-    pathname,
-    isNestedScreen
-  );
+  const screenContextData = useScreenContext();
+
+  const entryContext = ((isNestedScreen && screenContextData?.nested?.entry
+    ? screenContextData?.nested?.entry
+    : (screenContextData?.entry?.payload ?? screenContextData?.entry)) ||
+    {}) as ZappEntry;
 
   const urlsMap = useMemo<{ [key: string]: string }>(() => {
     const map = {};

package/Components/MasterCell/DefaultComponents/SecondaryImage/Image.tsx

@@ -3,8 +3,8 @@ import { isNil } from "ramda";
 import { ImageStyle, View } from "react-native";
 import {
   FIT_POSITION,
-  IMAGE_SIZING_FIT,
   IMAGE_SIZING_FILL,
+  IMAGE_SIZING_FIT,
 } from "@applicaster/zapp-react-native-utils/manifestUtils/secondaryImage";
 import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";
 
@@ -25,49 +25,51 @@ interface Props {
   fitPosition: typeof FIT_POSITION;
   fixedWidth: number;
   fixedHeight: number;
-  onAsyncRender: () => void;
+  onAsyncRender?: () => void;
 }
 
 /** Secondary Image Dynamic does not render until the image is loaded */
-const SecondaryImageDynamic = (props: Props) => {
-  const { uri, style, displayMode, imageSizing, fitPosition, onAsyncRender } =
-    props;
+const SecondaryImageDynamic = withAsyncRenderHOC(
+  (props: Props & { onAsyncRender: () => void }) => {
+    const { uri, style, displayMode, imageSizing, fitPosition, onAsyncRender } =
+      props;
 
-  const imageDimension = useGetImageDimensions(
-    uri,
-    style.width as number,
-    isImageSizingFit(imageSizing) ? undefined : (style.height as number)
-  );
+    const imageDimension = useGetImageDimensions(
+      uri,
+      style.width as number,
+      isImageSizingFit(imageSizing) ? undefined : (style.height as number)
+    );
 
-  const containerHeight = imageDimension?.height;
+    const containerHeight = imageDimension?.height;
 
-  const containerWidth = style?.width;
+    const containerWidth = style?.width;
 
-  if (isNil(imageDimension?.aspectRatio)) {
-    return null;
-  }
+    if (isNil(imageDimension?.aspectRatio)) {
+      return null;
+    }
 
-  return (
-    <View style={style} onLayout={onAsyncRender}>
-      <Image
-        {...props}
-        source={{ uri }}
-        style={{
-          ...getStyle({
-            imageSizing,
-            fitPosition,
-            displayMode,
-            imageDimension,
-            containerHeight,
-            containerWidth,
-          }),
-          borderRadius: style.borderRadius,
-          aspectRatio: imageDimension.aspectRatio,
-        }}
-      />
-    </View>
-  );
-};
+    return (
+      <View style={style} onLayout={onAsyncRender}>
+        <Image
+          {...props}
+          source={{ uri }}
+          style={{
+            ...getStyle({
+              imageSizing,
+              fitPosition,
+              displayMode,
+              imageDimension,
+              containerHeight,
+              containerWidth,
+            }),
+            borderRadius: style.borderRadius,
+            aspectRatio: imageDimension.aspectRatio,
+          }}
+        />
+      </View>
+    );
+  }
+);
 
 /** Secondary Image Fixed does not render  the image until the image is loaded, but keep container rendered */
 const SecondaryImageFixed = (props: Props) => {
@@ -79,7 +81,6 @@ const SecondaryImageFixed = (props: Props) => {
     fitPosition,
     fixedHeight,
     fixedWidth,
-    onAsyncRender,
   } = props;
 
   const imageDimension = useGetImageDimensions(
@@ -89,7 +90,7 @@ const SecondaryImageFixed = (props: Props) => {
   );
 
   return (
-    <View style={style} onLayout={onAsyncRender}>
+    <View style={style}>
       {isNil(imageDimension?.aspectRatio) ? null : (
         <Image
           {...props}
@@ -128,4 +129,4 @@ const SecondaryImageComponent = (props: Props) => {
   );
 };
 
-export const SecondaryImage = withAsyncRenderHOC(SecondaryImageComponent);
+export const SecondaryImage = SecondaryImageComponent;

package/Components/MasterCell/DefaultComponents/SecondaryImage/__tests__/Image.test.tsx

@@ -10,6 +10,10 @@ describe("SecondaryImage - Image", () => {
         displayMode="dynamic"
         uri={undefined}
         style={{ width: 100 }}
+        imageSizing="fit"
+        fitPosition="center"
+        fixedWidth={0}
+        fixedHeight={0}
       />
     );
 
@@ -23,6 +27,10 @@ describe("SecondaryImage - Image", () => {
         displayMode="dynamic"
         uri="someurl"
         style={{ width: 100 }}
+        imageSizing="fit"
+        fitPosition="center"
+        fixedWidth={0}
+        fixedHeight={0}
       />
     );
 
@@ -36,6 +44,93 @@ describe("SecondaryImage - Image", () => {
         uri="someUrl"
         displayMode="dynamic"
         style={{ width: 100, height: 100, borderRadius: 10 }}
+        imageSizing="fill"
+        fitPosition="center"
+        fixedWidth={0}
+        fixedHeight={0}
+      />
+    );
+
+    expect(wrapper.toJSON()).not.toEqual(null);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it("SecondaryImage should render in fixed mode without image until loaded", async () => {
+    const wrapper = await render(
+      <SecondaryImage
+        displayMode="fixed"
+        uri="someurl"
+        style={{ width: 100, height: 100, borderRadius: 5 }}
+        imageSizing="fit"
+        fitPosition="center"
+        fixedWidth={100}
+        fixedHeight={100}
+      />
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it("SecondaryImage should not render in dynamic mode without image", async () => {
+    const wrapper = await render(
+      <SecondaryImage
+        displayMode="dynamic"
+        uri={null}
+        style={{ width: 100, height: 100 }}
+        imageSizing="fit"
+        fitPosition="center"
+        fixedWidth={0}
+        fixedHeight={0}
+      />
+    );
+
+    expect(wrapper.toJSON()).toEqual(null);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it("SecondaryImage should render in fixed mode with known dimensions", async () => {
+    const wrapper = await render(
+      <SecondaryImage
+        uri="someUrl"
+        displayMode="fixed"
+        style={{ width: 100, height: 100, borderRadius: 10 }}
+        imageSizing="fill"
+        fitPosition="center"
+        fixedWidth={100}
+        fixedHeight={100}
+      />
+    );
+
+    expect(wrapper.toJSON()).not.toEqual(null);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it("SecondaryImage dynamic mode should call onAsyncRender when provided", async () => {
+    const wrapper = await render(
+      <SecondaryImage
+        uri="someUrl"
+        displayMode="dynamic"
+        style={{ width: 100, height: 100, borderRadius: 10 }}
+        imageSizing="fill"
+        fitPosition="center"
+        fixedWidth={0}
+        fixedHeight={0}
+      />
+    );
+
+    expect(wrapper.toJSON()).not.toEqual(null);
+  });
+
+  it("SecondaryImage fixed mode should not use async render props", async () => {
+    const wrapper = await render(
+      <SecondaryImage
+        uri="someUrl"
+        displayMode="fixed"
+        style={{ width: 100, height: 100, borderRadius: 10 }}
+        imageSizing="fill"
+        fitPosition="center"
+        fixedWidth={100}
+        fixedHeight={100}
       />
     );
 

package/Components/MasterCell/DefaultComponents/SecondaryImage/__tests__/__snapshots__/Image.test.tsx.snap

@@ -1,9 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`SecondaryImage - Image SecondaryImage fixed mode should not use async render props 1`] = `
+<View
+  style={
+    {
+      "borderRadius": 10,
+      "height": 100,
+      "width": 100,
+    }
+  }
+>
+  <Image
+    displayMode="fixed"
+    fitPosition="center"
+    fixedHeight={100}
+    fixedWidth={100}
+    imageSizing="fill"
+    source={
+      {
+        "uri": "someUrl",
+      }
+    }
+    style={
+      {
+        "aspectRatio": 1,
+        "borderRadius": 10,
+        "height": 100,
+        "width": 100,
+      }
+    }
+    uri="someUrl"
+  />
+</View>
+`;
+
 exports[`SecondaryImage - Image SecondaryImage should not render if no aspect ratio (dynamic) 1`] = `null`;
 
 exports[`SecondaryImage - Image SecondaryImage should not render if no uri 1`] = `null`;
 
+exports[`SecondaryImage - Image SecondaryImage should not render in dynamic mode without image 1`] = `null`;
+
 exports[`SecondaryImage - Image SecondaryImage should render if known dimensions 1`] = `
 <View
   onLayout={[Function]}
@@ -17,6 +53,10 @@ exports[`SecondaryImage - Image SecondaryImage should render if known dimensions
 >
   <Image
     displayMode="dynamic"
+    fitPosition="center"
+    fixedHeight={0}
+    fixedWidth={0}
+    imageSizing="fill"
     onAsyncRender={[Function]}
     source={
       {
@@ -35,3 +75,49 @@ exports[`SecondaryImage - Image SecondaryImage should render if known dimensions
   />
 </View>
 `;
+
+exports[`SecondaryImage - Image SecondaryImage should render in fixed mode with known dimensions 1`] = `
+<View
+  style={
+    {
+      "borderRadius": 10,
+      "height": 100,
+      "width": 100,
+    }
+  }
+>
+  <Image
+    displayMode="fixed"
+    fitPosition="center"
+    fixedHeight={100}
+    fixedWidth={100}
+    imageSizing="fill"
+    source={
+      {
+        "uri": "someUrl",
+      }
+    }
+    style={
+      {
+        "aspectRatio": 1,
+        "borderRadius": 10,
+        "height": 100,
+        "width": 100,
+      }
+    }
+    uri="someUrl"
+  />
+</View>
+`;
+
+exports[`SecondaryImage - Image SecondaryImage should render in fixed mode without image until loaded 1`] = `
+<View
+  style={
+    {
+      "borderRadius": 5,
+      "height": 100,
+      "width": 100,
+    }
+  }
+/>
+`;

package/Components/MasterCell/DefaultComponents/SecondaryImage/__tests__/index.test.ts

@@ -0,0 +1,141 @@
+import { SecondaryImage } from "../index";
+
+describe("SecondaryImage - Configuration Builder", () => {
+  const mockValue = (config: any) => (key: string, transformer?: Function) => {
+    const value = config[key];
+
+    return transformer ? transformer(value) : value;
+  };
+
+  it("should pass false as second argument to image_src_from_media_item", () => {
+    const config = {
+      secondary_image_switch: true,
+      secondary_image_position: "over_image",
+      secondary_image_visibility: "always",
+      secondary_image_image_key: "custom_image",
+      secondary_image_display_mode: "dynamic",
+      secondary_image_dynamic_width: 100,
+    };
+
+    const result = SecondaryImage({
+      value: mockValue(config),
+      currentPosition: "over_image",
+      state: "default",
+    });
+
+    expect(result).not.toBeNull();
+    expect(result?.elements).toBeDefined();
+    expect(result?.elements[0].data).toBeDefined();
+
+    const imageData = result?.elements[0].data[0];
+    expect(imageData.func).toBe("image_src_from_media_item");
+    expect(imageData.args).toEqual(["custom_image", false]);
+    expect(imageData.propName).toBe("uri");
+  });
+
+  it("should return null when secondary image is disabled", () => {
+    const config = {
+      secondary_image_switch: false,
+    };
+
+    const result = SecondaryImage({
+      value: mockValue(config),
+      currentPosition: "over_image",
+      state: "default",
+    });
+
+    expect(result).toBeNull();
+  });
+
+  it("should return null when position does not match currentPosition", () => {
+    const config = {
+      secondary_image_switch: true,
+      secondary_image_position: "above_text_label_1",
+      secondary_image_visibility: "always",
+    };
+
+    const result = SecondaryImage({
+      value: mockValue(config),
+      currentPosition: "over_image",
+      state: "default",
+    });
+
+    expect(result).toBeNull();
+  });
+
+  it("should return null when visibility does not match state", () => {
+    const config = {
+      secondary_image_switch: true,
+      secondary_image_position: "over_image",
+      secondary_image_visibility: "focused",
+    };
+
+    const result = SecondaryImage({
+      value: mockValue(config),
+      currentPosition: "over_image",
+      state: "default",
+    });
+
+    expect(result).toBeNull();
+  });
+
+  it("should include display mode and image sizing in additionalProps", () => {
+    const config = {
+      secondary_image_switch: true,
+      secondary_image_position: "over_image",
+      secondary_image_visibility: "always",
+      secondary_image_image_key: "logo",
+      secondary_image_display_mode: "fixed",
+      secondary_image_image_sizing: "fill",
+      secondary_image_fit_position: "center",
+      secondary_image_fixed_width: 200,
+      secondary_image_fixed_height: 150,
+    };
+
+    const result = SecondaryImage({
+      value: mockValue(config),
+      currentPosition: "over_image",
+      state: "default",
+    });
+
+    expect(result?.elements[0].additionalProps).toMatchObject({
+      displayMode: "fixed",
+      imageSizing: "fill",
+      fitPosition: "center",
+      fixedWidth: 200,
+      fixedHeight: 150,
+    });
+  });
+
+  it("should apply correct styles including margins and border radius", () => {
+    const config = {
+      secondary_image_switch: true,
+      secondary_image_position: "over_image",
+      secondary_image_visibility: "always",
+      secondary_image_display_mode: "fixed",
+      secondary_image_fixed_width: 100,
+      secondary_image_fixed_height: 100,
+      secondary_image_corner_radius: 12,
+      secondary_image_margin_top: 10,
+      secondary_image_margin_left: 5,
+      secondary_image_margin_right: 5,
+      secondary_image_margin_bottom: 10,
+    };
+
+    const result = SecondaryImage({
+      value: mockValue(config),
+      currentPosition: "over_image",
+      state: "default",
+    });
+
+    expect(result?.elements[0].style).toMatchObject({
+      width: 100,
+      height: 100,
+      borderRadius: 12,
+      marginTop: 10,
+      marginLeft: 5,
+      marginRight: 5,
+      marginBottom: 10,
+    });
+  });
+});

package/Components/MasterCell/DefaultComponents/SecondaryImage/index.ts

@@ -103,7 +103,7 @@ export const SecondaryImage = ({ value, currentPosition, state }: Props) => {
         data: [
           {
             func: "image_src_from_media_item",
-            args: [imageKey],
+            args: [imageKey, false],
             propName: "uri",
           },
         ],

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/utils/__tests__/getPluginIdentifier.test.ts

@@ -1,9 +1,15 @@
-import { getPluginIdentifier } from "..";
+import { getPluginIdentifier, memoizedGetPluginIdentifier } from "..";
 
 describe("getPluginIdentifier", () => {
   const prefix = "tv_buttons";
 
+  beforeAll(() => {
+    memoizedGetPluginIdentifier.clear();
+  });
+
   it("returns the first valid plugin identifier", () => {
+    expect.assertions(2);
+
     const configuration = {
       tv_buttons_button_1_other: "value",
       tv_buttons_button_1_assign_action:
@@ -15,10 +21,19 @@ describe("getPluginIdentifier", () => {
     const index = 0;
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toEqual(configuration.tv_buttons_button_1_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 
   it("returns the second valid plugin identifier", () => {
+    expect.assertions(2);
+
     const configuration = {
       tv_buttons_button_1_other: "value_1",
       tv_buttons_button_1_assign_action:
@@ -31,19 +46,37 @@ describe("getPluginIdentifier", () => {
     const index = 1;
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toEqual(configuration.tv_buttons_button_2_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 
   it("returns undefined when there are no assign_action keys", () => {
+    expect.assertions(2);
+
     const configuration = {};
     const index = 0;
 
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toBeUndefined();
+    expect(memoizedResult).toBeUndefined();
   });
 
   it("skips undefined values and returns the correct plugin identifier", () => {
+    expect.assertions(2);
+
     const configuration = {
       tv_buttons_button_1_assign_action: "tv_buttons_button_1_assign_action",
       tv_buttons_button_2_assign_action: undefined,
@@ -53,10 +86,19 @@ describe("getPluginIdentifier", () => {
     const index = 1;
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toEqual(configuration.tv_buttons_button_3_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 
   it("handles missing intermediate keys and returns the correct plugin identifier", () => {
+    expect.assertions(2);
+
     const configuration = {
       tv_buttons_button_1_assign_action: "tv_buttons_button_1_assign_action",
       tv_buttons_button_3_assign_action: "tv_buttons_button_3_assign_action",
@@ -65,10 +107,19 @@ describe("getPluginIdentifier", () => {
     const index = 1;
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toEqual(configuration.tv_buttons_button_3_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 
   it("skips empty string values and returns the first non-empty assign_action", () => {
+    expect.assertions(2);
+
     const configuration = {
       tv_buttons_button_1_assign_action: "",
       tv_buttons_button_2_assign_action: "tv_buttons_button_2_assign_action",
@@ -77,10 +128,19 @@ describe("getPluginIdentifier", () => {
     const index = 0;
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toEqual(configuration.tv_buttons_button_2_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 
   it("returns undefined for negative index", () => {
+    expect.assertions(2);
+
     const configuration = {
       tv_buttons_button_1_assign_action: "a",
       tv_buttons_button_2_assign_action: "b",
@@ -89,10 +149,19 @@ describe("getPluginIdentifier", () => {
     const index = -1;
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toBeUndefined();
+    expect(memoizedResult).toBeUndefined();
   });
 
   it("returns undefined for out-of-bounds index", () => {
+    expect.assertions(2);
+
     const configuration = {
       tv_buttons_button_1_assign_action: "a",
       tv_buttons_button_2_assign_action: "b",
@@ -101,10 +170,19 @@ describe("getPluginIdentifier", () => {
     const index = 5;
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toBeUndefined();
+    expect(memoizedResult).toBeUndefined();
   });
 
   it("ignores keys with wrong prefix or format", () => {
+    expect.assertions(2);
+
     const configuration = {
       tv_buttons_button_1_assign_action: "a",
       tv_buttons_wrongprefix_2_assign_action: "b",
@@ -114,10 +192,19 @@ describe("getPluginIdentifier", () => {
     const index = 1;
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toBeUndefined();
+    expect(memoizedResult).toBeUndefined();
   });
 
   it("returns undefined if all assign_actions are null or empty", () => {
+    expect.assertions(2);
+
     const configuration = {
       tv_buttons_button_1_assign_action: null,
       tv_buttons_button_2_assign_action: undefined,
@@ -127,10 +214,19 @@ describe("getPluginIdentifier", () => {
     const index = 0;
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toBeUndefined();
+    expect(memoizedResult).toBeUndefined();
   });
 
   it("handles non-string values correctly", () => {
+    expect.assertions(6);
+
     const configuration = {
       tv_buttons_button_1_assign_action: 123,
       tv_buttons_button_2_assign_action: true,
@@ -143,10 +239,21 @@ describe("getPluginIdentifier", () => {
     expect(getPluginIdentifier(configuration, prefix, 2)).toEqual({
       nested: "value",
     });
+
+    expect(memoizedGetPluginIdentifier(configuration, prefix, 0)).toEqual(123);
+    expect(memoizedGetPluginIdentifier(configuration, prefix, 1)).toEqual(true);
+
+    expect(memoizedGetPluginIdentifier(configuration, prefix, 2)).toEqual({
+      nested: "value",
+    });
   });
 });
 
 describe("getPluginIdentifier - when configuration has duplicate values", () => {
+  beforeAll(() => {
+    memoizedGetPluginIdentifier.clear();
+  });
+
   const prefix = "tv_buttons";
 
   const configuration = {
@@ -155,16 +262,34 @@ describe("getPluginIdentifier - when configuration has duplicate values", () =>
   };
 
   it("returns the first plugin identifier when values are identical", () => {
+    expect.assertions(2);
+
     const index = 0;
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toEqual(configuration.tv_buttons_button_1_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 
   it("returns the second plugin identifier when values are identical", () => {
+    expect.assertions(2);
+
     const index = 1;
     const result = getPluginIdentifier(configuration, prefix, index);
 
+    const memoizedResult = memoizedGetPluginIdentifier(
+      configuration,
+      prefix,
+      index
+    );
+
     expect(result).toEqual(configuration.tv_buttons_button_2_assign_action);
+    expect(memoizedResult).toEqual(result);
   });
 });

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/utils/index.ts

@@ -40,9 +40,7 @@ export const getPluginIdentifier = (
   return undefined;
 };
 
-export const memoizedGetPluginIdentifier = memoizee(getPluginIdentifier, {
-  primitive: true,
-});
+export const memoizedGetPluginIdentifier = memoizee(getPluginIdentifier);
 
 type Label = {
   name: string;

package/Components/MasterCell/hoc/__tests__/withAsyncRender.test.tsx

@@ -0,0 +1,219 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { Text, View } from "react-native";
+import { withAsyncRenderHOC } from "../withAsyncRender";
+
+describe("withAsyncRenderHOC", () => {
+  // Test component that requires onAsyncRender
+  const TestComponent = ({
+    onAsyncRender,
+    text,
+  }: {
+    onAsyncRender: () => void;
+    text?: string;
+  }) => {
+    React.useEffect(() => {
+      onAsyncRender();
+    }, [onAsyncRender]);
+
+    return (
+      <View>
+        <Text>{text || "Test"}</Text>
+      </View>
+    );
+  };
+
+  it("should wrap component and provide onAsyncRender callback", () => {
+    const WrappedComponent = withAsyncRenderHOC(TestComponent);
+
+    const wrapper = render(<WrappedComponent text="Hello" />);
+
+    expect(wrapper.toJSON()).not.toBeNull();
+    expect(wrapper.getByText("Hello")).toBeDefined();
+  });
+
+  it("should call emitAsyncElementRegistrate on mount", () => {
+    const mockRegistrate = jest.fn();
+    const WrappedComponent = withAsyncRenderHOC(TestComponent);
+
+    render(<WrappedComponent emitAsyncElementRegistrate={mockRegistrate} />);
+
+    expect(mockRegistrate).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call emitAsyncElementLayout when onAsyncRender is called", () => {
+    const mockLayout = jest.fn();
+
+    const ComponentWithAsyncCall = ({
+      onAsyncRender,
+    }: {
+      onAsyncRender: () => void;
+    }) => {
+      return (
+        <View onLayout={onAsyncRender}>
+          <Text>Async Component</Text>
+        </View>
+      );
+    };
+
+    const WrappedComponent = withAsyncRenderHOC(ComponentWithAsyncCall);
+
+    const wrapper = render(
+      <WrappedComponent emitAsyncElementLayout={mockLayout} />
+    );
+
+    // Trigger onLayout
+    const view = wrapper.UNSAFE_getByType(View);
+    view.props.onLayout();
+
+    expect(mockLayout).toHaveBeenCalled();
+  });
+
+  it("should return unsubscribe function from emitAsyncElementRegistrate", () => {
+    const mockUnsubscribe = jest.fn();
+    const mockRegistrate = jest.fn(() => mockUnsubscribe);
+    const WrappedComponent = withAsyncRenderHOC(TestComponent);
+
+    const { unmount } = render(
+      <WrappedComponent emitAsyncElementRegistrate={mockRegistrate} />
+    );
+
+    expect(mockRegistrate).toHaveBeenCalledTimes(1);
+
+    // Unmount should trigger cleanup
+    unmount();
+
+    expect(mockUnsubscribe).toHaveBeenCalled();
+  });
+
+  it("should work without emitAsyncElementRegistrate prop", () => {
+    const WrappedComponent = withAsyncRenderHOC(TestComponent);
+
+    const wrapper = render(<WrappedComponent text="No Registration" />);
+
+    expect(wrapper.toJSON()).not.toBeNull();
+    expect(wrapper.getByText("No Registration")).toBeDefined();
+  });
+
+  it("should work without emitAsyncElementLayout prop", () => {
+    const ComponentWithLayout = ({
+      onAsyncRender,
+    }: {
+      onAsyncRender: () => void;
+    }) => {
+      return (
+        <View onLayout={onAsyncRender}>
+          <Text>Test Layout</Text>
+        </View>
+      );
+    };
+
+    const WrappedComponent = withAsyncRenderHOC(ComponentWithLayout);
+
+    const wrapper = render(<WrappedComponent />);
+
+    // Should not throw when calling onLayout without emitAsyncElementLayout
+    const view = wrapper.UNSAFE_getByType(View);
+    expect(() => view.props.onLayout()).not.toThrow();
+  });
+
+  it("should pass through all other props to wrapped component", () => {
+    const ComponentWithProps = ({
+      customProp,
+      anotherProp,
+    }: {
+      onAsyncRender: () => void;
+      customProp: string;
+      anotherProp: number;
+    }) => {
+      return (
+        <View>
+          <Text>{customProp}</Text>
+          <Text>{anotherProp}</Text>
+        </View>
+      );
+    };
+
+    const WrappedComponent = withAsyncRenderHOC(ComponentWithProps);
+
+    const wrapper = render(
+      <WrappedComponent customProp="custom value" anotherProp={42} />
+    );
+
+    expect(wrapper.getByText("custom value")).toBeDefined();
+    expect(wrapper.getByText("42")).toBeDefined();
+  });
+
+  it("should call emitAsyncElementLayout multiple times if onAsyncRender is called multiple times", () => {
+    const mockLayout = jest.fn();
+
+    const ComponentWithMultipleCalls = ({
+      onAsyncRender,
+    }: {
+      onAsyncRender: () => void;
+    }) => {
+      return (
+        <View>
+          <View onLayout={onAsyncRender} testID="view1">
+            <Text>First</Text>
+          </View>
+          <View onLayout={onAsyncRender} testID="view2">
+            <Text>Second</Text>
+          </View>
+        </View>
+      );
+    };
+
+    const WrappedComponent = withAsyncRenderHOC(ComponentWithMultipleCalls);
+
+    const wrapper = render(
+      <WrappedComponent emitAsyncElementLayout={mockLayout} />
+    );
+
+    // Trigger both onLayout callbacks
+    const view1 = wrapper.getByTestId("view1");
+    const view2 = wrapper.getByTestId("view2");
+
+    view1.props.onLayout();
+    view2.props.onLayout();
+
+    expect(mockLayout).toHaveBeenCalledTimes(2);
+  });
+
+  it("should handle components that use onAsyncRender in effects", () => {
+    const mockLayout = jest.fn();
+
+    const ComponentWithEffect = ({
+      onAsyncRender,
+    }: {
+      onAsyncRender: () => void;
+    }) => {
+      React.useEffect(() => {
+        // Simulate async operation completing
+        const timer = setTimeout(() => {
+          onAsyncRender();
+        }, 0);
+
+        return () => clearTimeout(timer);
+      }, [onAsyncRender]);
+
+      return (
+        <View>
+          <Text>Effect Component</Text>
+        </View>
+      );
+    };
+
+    const WrappedComponent = withAsyncRenderHOC(ComponentWithEffect);
+
+    render(<WrappedComponent emitAsyncElementLayout={mockLayout} />);
+
+    // The effect should have been triggered
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        expect(mockLayout).toHaveBeenCalled();
+        resolve(true);
+      }, 10);
+    });
+  });
+});

package/Components/MasterCell/hoc/withAsyncRender.tsx

@@ -6,12 +6,12 @@ type withAsyncRenderHOCProps = {
   emitAsyncElementLayout?: () => void;
 };
 
-type withAsyncRenderHOCT = (
-  Component: React.ComponentType<{ onAsyncRender: () => void }>
-) => React.FC<withAsyncRenderHOCProps>;
-
-export const withAsyncRenderHOC: withAsyncRenderHOCT = (Component) => {
-  const WithAsyncRender = (props: withAsyncRenderHOCProps) => {
+export const withAsyncRenderHOC = <P extends { onAsyncRender: () => void }>(
+  Component: React.ComponentType<P>
+): React.FC<Omit<P, "onAsyncRender"> & withAsyncRenderHOCProps> => {
+  const WithAsyncRender = (
+    props: Omit<P, "onAsyncRender"> & withAsyncRenderHOCProps
+  ) => {
     const { emitAsyncElementRegistrate = noop, emitAsyncElementLayout = noop } =
       props;
 
@@ -27,7 +27,9 @@ export const withAsyncRenderHOC: withAsyncRenderHOCT = (Component) => {
       }
     }, [emitAsyncElementLayout]);
 
-    return <Component {...props} onAsyncRender={onAsyncRender} />;
+    return (
+      <Component {...(props as unknown as P)} onAsyncRender={onAsyncRender} />
+    );
   };
 
   return WithAsyncRender;

package/Components/OfflineHandler/NotificationView/NotificationView.lg.tsx

@@ -1,4 +1,6 @@
 import * as React from "react";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { useNetworkStatusLocalizations } from "./utils";
 
 type Props = {
   children?: React.ReactNode;
@@ -10,13 +12,6 @@ type Props = {
 
 const NOTIF_DURATION = 4500;
 
-export const ONLINE_MSG = "You are back online";
-
-export const OFFLINE_MSG = "No internet connection";
-
-const EXTRA_OFFLINE_MSG = "Please check your connection";
-const EXTRA_ONLINE_MSG = "Feel free to continue where you left off";
-
 const styles: Record<any, React.CSSProperties> = {
   body: {
     position: "absolute",
@@ -47,6 +42,9 @@ const styles: Record<any, React.CSSProperties> = {
 export const NotificationView = (props: Props) => {
   const { children, hidden, dismiss, previousOnline, online } = props;
 
+  const theme = useTheme<BaseThemePropertiesTV>();
+  const storedLocalizations = useNetworkStatusLocalizations();
+
   const [open, setOpen] = React.useState<boolean | null>(null);
 
   const timeout = React.useRef<NodeJS.Timeout>();
@@ -84,8 +82,18 @@ export const NotificationView = (props: Props) => {
   }, [hidden, online]);
 
   const showOnlineMsg = wentOnline || online;
-  const MSG = showOnlineMsg ? ONLINE_MSG : OFFLINE_MSG;
-  const EXTRA_MSG = showOnlineMsg ? EXTRA_ONLINE_MSG : EXTRA_OFFLINE_MSG;
+
+  const MSG = showOnlineMsg
+    ? (theme?.online_notification_title ??
+      storedLocalizations?.online_notification_title)
+    : (theme?.offline_notification_title ??
+      storedLocalizations?.offline_notification_title);
+
+  const EXTRA_MSG = showOnlineMsg
+    ? (theme?.online_notification_subtitle ??
+      storedLocalizations?.online_notification_subtitle)
+    : (theme?.offline_notification_subtitle ??
+      storedLocalizations?.offline_notification_subtitle);
 
   return (
     <div onClick={onClose}>

package/Components/OfflineHandler/NotificationView/NotificationView.samsung.tsx

@@ -1,4 +1,6 @@
 import * as React from "react";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { useNetworkStatusLocalizations } from "./utils";
 
 type Props = {
   children?: React.ReactNode;
@@ -9,12 +11,6 @@ type Props = {
 
 const DURATION_TO_HIDE_AFTER_BACK_TO_ONLINE = 4500; // ms
 
-const ONLINE_TITLE = "You are back online";
-const ONLINE_SUBTITLE = "Feel free to continue where you left off";
-
-const OFFLINE_TITLE = "No internet connection";
-const OFFLINE_SUBTITLE = "Please check your connection";
-
 const styles: Record<any, React.CSSProperties> = {
   body: {
     position: "absolute",
@@ -47,6 +43,9 @@ let timer: NodeJS.Timeout;
 export const NotificationView = (props: Props) => {
   const { children, dismiss, previousOnline = true, online } = props;
 
+  const theme = useTheme<BaseThemePropertiesTV>();
+  const storedLocalizations = useNetworkStatusLocalizations();
+
   const [shown, setShown] = React.useState<boolean>(false);
 
   const onClose = () => {
@@ -79,8 +78,17 @@ export const NotificationView = (props: Props) => {
     }
   }, [online, previousOnline]);
 
-  const title = online ? ONLINE_TITLE : OFFLINE_TITLE;
-  const subtitle = online ? ONLINE_SUBTITLE : OFFLINE_SUBTITLE;
+  const title = online
+    ? (theme?.online_notification_title ??
+      storedLocalizations?.online_notification_title)
+    : (theme?.offline_notification_title ??
+      storedLocalizations?.offline_notification_title);
+
+  const subtitle = online
+    ? (theme?.online_notification_subtitle ??
+      storedLocalizations?.online_notification_subtitle)
+    : (theme?.offline_notification_subtitle ??
+      storedLocalizations?.offline_notification_subtitle);
 
   return (
     <div onClick={onClose}>

package/Components/OfflineHandler/NotificationView/utils.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
+
+export const NETWORK_STATUS_LOCALIZATIONS_KEY = "network_status_localizations";
+
+export const THEME_STORAGE_NAMESPACE = "quick-brick-theme";
+
+export function useNetworkStatusLocalizations() {
+  const [storedLocalizations, setStoredLocalizations] = React.useState<Record<
+    string,
+    string
+  > | null>(null);
+
+  React.useEffect(() => {
+    async function loadStoredLocalizations() {
+      try {
+        const stored = await sessionStorage.getItem(
+          NETWORK_STATUS_LOCALIZATIONS_KEY,
+          THEME_STORAGE_NAMESPACE
+        );
+
+        if (stored) {
+          setStoredLocalizations(stored);
+        }
+      } catch (error) {
+        console.error("Error loading network status localizations", error);
+      }
+    }
+
+    loadStoredLocalizations();
+  }, []);
+
+  return storedLocalizations;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.0.0-alpha.4920595583",
+  "version": "15.0.0-alpha.5104105031",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.0.0-alpha.4920595583",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.4920595583",
-    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.4920595583",
-    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.4920595583",
+    "@applicaster/applicaster-types": "15.0.0-alpha.5104105031",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.5104105031",
+    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.5104105031",
+    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.5104105031",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",