@applicaster/zapp-react-native-utils 16.0.0-alpha.6001988150 → 16.0.0-alpha.6088600543

package/actionsExecutor/ActionExecutorContext.tsx

@@ -7,6 +7,7 @@ import {
 } from "./ActionExecutor";
 import {
   batchRemoveAllFromNamespaceForStorage,
+  batchRemoveFromStorage,
   batchSave,
 } from "../zappFrameworkUtils/localStorageHelper";
 import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
@@ -38,13 +39,17 @@ import {
 } from "./StorageActions";
 
 import { screenSetVariable, screenToggleFlag } from "./ScreenActions";
+import {
+  StorageValuesToAdd,
+  StorageValuesToRemove,
+} from "../zappFrameworkUtils/types";
 
 export const { log_error, log_info, log_debug } = createLogger({
   subsystem: "ActionExecutorContext",
   category: "General",
 });
 
-type ActionExecutorContextType = {
+export type ActionExecutorContextType = {
   registerAction: (
     type: string,
     handler: (
@@ -66,6 +71,7 @@ type ActionExecutorContextType = {
     context?: Record<string, any>
   ) => Promise<ActionResult>;
 };
+
 type Props = {
   children: React.ReactNode;
 };
@@ -88,7 +94,7 @@ function findParentComponent(
 
 const prepareDefaultActions = (actionExecutor) => {
   actionExecutor.registerAction("localStorageSet", async (action) => {
-    const namespaces = action.options.content;
+    const namespaces: StorageValuesToAdd = action.options.content;
     await batchSave(namespaces, localStorage);
     // TODO: Add support for ownershipKey and ownershipNamespace
 
@@ -96,13 +102,29 @@ const prepareDefaultActions = (actionExecutor) => {
   });
 
   actionExecutor.registerAction("sessionStorageSet", async (action) => {
-    const namespaces = action.options.content;
+    const namespaces: StorageValuesToAdd = action.options.content;
     await batchSave(namespaces, sessionStorage);
     // TODO: Add support for ownershipKey and ownershipNamespace
 
     return ActionResult.Success;
   });
 
+  actionExecutor.registerAction("localStorageRemove", async (action) => {
+    const namespaces: StorageValuesToRemove = action.options.content;
+    await batchRemoveFromStorage(namespaces, localStorage);
+    // TODO: Add support for ownershipKey and ownershipNamespace
+
+    return ActionResult.Success;
+  });
+
+  actionExecutor.registerAction("sessionStorageRemove", async (action) => {
+    const namespaces: StorageValuesToRemove = action.options.content;
+    await batchRemoveFromStorage(namespaces, sessionStorage);
+    // TODO: Add support for ownershipKey and ownershipNamespace
+
+    return ActionResult.Success;
+  });
+
   actionExecutor.registerAction(
     "refreshComponent",
     async (_action, context) => {
@@ -129,7 +151,7 @@ const prepareDefaultActions = (actionExecutor) => {
           getInflatedDataSourceUrl({
             source,
             contexts: {
-              entry: context?.entryContext,
+              entry: context?.screenEntry,
               screen: context?.screenData,
               search: getSearchContext(null, mapping),
             },
@@ -198,7 +220,7 @@ const prepareDefaultActions = (actionExecutor) => {
 
       const entry = context?.entry || {};
       const entryResolver = new EntryResolver(entry);
-      const screenData = context?.screenStateStore.getState().data || {};
+      const screenData = context?.screenStateStore?.getState().data || {};
       const screenResolver = new EntryResolver(screenData || {});
 
       const data =

package/analyticsUtils/AnalyticsEvents/sendMenuClickEvent.ts

@@ -6,9 +6,9 @@ import { postAnalyticEvent } from "../manager";
 import { ANALYTICS_CORE_EVENTS } from "../events";
 
 type AnalyticsDefaultHelperProperties = {
-  analyticsScreenData: AnalyticsScreenProperties;
+  analyticsScreenData?: AnalyticsScreenProperties;
   extraProps: any;
-  props;
+  props?: any;
 };
 
 export const sendMenuClickEvent = ({

package/analyticsUtils/__tests__/analyticsMapper.test.ts

@@ -74,4 +74,39 @@ describe("Analytics Mapper", () => {
     const rules = fixtures.ACPEventRules;
     await setConfigRunMapTest(rules, fixtures.ACPEventEvents);
   });
+
+  it("Does not let an ignore rule short-circuit later events", async () => {
+    await setConfigRunMapTest(
+      fixtures.ignoreOrderingRules,
+      fixtures.ignoreOrderingEvents
+    );
+  });
+
+  it("Keeps the original name when rename is empty", async () => {
+    await setConfigRunMapTest(
+      fixtures.emptyRenameRules,
+      fixtures.emptyRenameEvents
+    );
+  });
+
+  it("Renames via a regex with no named groups", async () => {
+    await setConfigRunMapTest(
+      fixtures.regexNonNamedFullMatchRules,
+      fixtures.regexNonNamedFullMatchEvents
+    );
+  });
+
+  it("Substitutes every named group in a regex rename", async () => {
+    await setConfigRunMapTest(
+      fixtures.regexMultiGroupRenameRules,
+      fixtures.regexMultiGroupRenameEvents
+    );
+  });
+
+  it("Does not fall back to event match when a regex rule does not match", async () => {
+    await setConfigRunMapTest(
+      fixtures.regexEventNoFallbackRules,
+      fixtures.regexEventNoFallbackEvents
+    );
+  });
 });

package/analyticsUtils/__tests__/fixtures/analytics_mapper_testACP_events.json

@@ -23,7 +23,7 @@
     "second": {
       "name": "EventName",
       "params": {
-        "acp": 1
+        "acp": "1"
       }
     }
   }

package/analyticsUtils/__tests__/fixtures/analytics_mapper_testBlockUnlistedParams_rules.json

@@ -12,4 +12,4 @@
     }
   ],
   "strategy": "allowUnlisted"
-}
+}

package/analyticsUtils/__tests__/fixtures/analytics_mapper_testEmptyRenameKeepsName_events.json

@@ -0,0 +1,4 @@
+[
+  { "first": { "name": "keep_me", "params": {} },
+    "second": { "name": "keep_me", "params": {} } }
+]

package/analyticsUtils/__tests__/fixtures/analytics_mapper_testEmptyRenameKeepsName_rules.json

@@ -0,0 +1,6 @@
+{
+  "rules": [
+    { "event": "keep_me", "ignore": false, "rename": "", "strategy": "allowUnlisted" }
+  ],
+  "strategy": "allowUnlisted"
+}

package/analyticsUtils/__tests__/fixtures/analytics_mapper_testEventRegex_events.json

@@ -2,17 +2,11 @@
   {
     "first": {
       "name": "Screen viewed: Ads & redirects",
-      "params": {
-        "ignored_param": "removed_value",
-        "kept_param": "kept_value"
-      }
+      "params": {}
     },
     "second": {
       "name": "Screen Ads & redirects",
-      "params": {
-        "ignored_param": "removed_value",
-        "kept_param": "kept_value"
-      }
+      "params": {}
     }
   }
-]
+]

package/analyticsUtils/__tests__/fixtures/analytics_mapper_testIgnoreOrdering_events.json

@@ -0,0 +1,18 @@
+[
+  {
+    "first": {
+      "name": "screen_view",
+      "params": {}
+    },
+    "second": {
+      "name": "page_view",
+      "params": {}
+    }
+  },
+  {
+    "first": {
+      "name": "player_presented",
+      "params": {}
+    }
+  }
+]

package/analyticsUtils/__tests__/fixtures/analytics_mapper_testIgnoreOrdering_rules.json

@@ -0,0 +1,16 @@
+{
+  "rules": [
+    {
+      "event": "player_presented",
+      "ignore": true,
+      "strategy": "allowUnlisted"
+    },
+    {
+      "event": "screen_view",
+      "ignore": false,
+      "rename": "page_view",
+      "strategy": "allowUnlisted"
+    }
+  ],
+  "strategy": "allowUnlisted"
+}

package/analyticsUtils/__tests__/fixtures/analytics_mapper_testRegexEventNoFallback_events.json

@@ -0,0 +1,4 @@
+[
+  { "first": { "name": "my_event", "params": {} },
+    "second": { "name": "my_event", "params": {} } }
+]

package/analyticsUtils/__tests__/fixtures/analytics_mapper_testRegexEventNoFallback_rules.json

@@ -0,0 +1,6 @@
+{
+  "rules": [
+    { "event": "my_event", "ignore": false, "rename": "should_not_apply", "regex": "wont_match_.*", "strategy": "allowUnlisted" }
+  ],
+  "strategy": "allowUnlisted"
+}

package/analyticsUtils/__tests__/fixtures/analytics_mapper_testRegexMultiGroupRename_events.json

@@ -0,0 +1,4 @@
+[
+  { "first": { "name": "play-video", "params": {} },
+    "second": { "name": "play_video", "params": {} } }
+]

package/analyticsUtils/__tests__/fixtures/analytics_mapper_testRegexMultiGroupRename_rules.json

@@ -0,0 +1,6 @@
+{
+  "rules": [
+    { "ignore": false, "rename": "$<first>_$<second>", "regex": "(?<first>[a-z]+)-(?<second>[a-z]+)", "strategy": "allowUnlisted" }
+  ],
+  "strategy": "allowUnlisted"
+}

package/analyticsUtils/__tests__/fixtures/analytics_mapper_testRegexNonNamedFullMatch_events.json

@@ -0,0 +1,4 @@
+[
+  { "first": { "name": "screen_view", "params": {} },
+    "second": { "name": "renamed", "params": {} } }
+]

package/analyticsUtils/__tests__/fixtures/analytics_mapper_testRegexNonNamedFullMatch_rules.json

@@ -0,0 +1,6 @@
+{
+  "rules": [
+    { "ignore": false, "rename": "renamed", "regex": "screen_view", "strategy": "allowUnlisted" }
+  ],
+  "strategy": "allowUnlisted"
+}

package/analyticsUtils/__tests__/fixtures/index.js

@@ -14,6 +14,16 @@ import blockUnlistedEventEvents from "./analytics_mapper_testBlockUnlistedEvents
 import blockUnlistedEventRules from "./analytics_mapper_testBlockUnlistedEvents_rules.json";
 import ACPEventEvents from "./analytics_mapper_testACP_events.json";
 import ACPEventRules from "./analytics_mapper_testACP_rules.json";
+import emptyRenameRules from "./analytics_mapper_testEmptyRenameKeepsName_rules.json";
+import emptyRenameEvents from "./analytics_mapper_testEmptyRenameKeepsName_events.json";
+import ignoreOrderingRules from "./analytics_mapper_testIgnoreOrdering_rules.json";
+import ignoreOrderingEvents from "./analytics_mapper_testIgnoreOrdering_events.json";
+import regexEventNoFallbackRules from "./analytics_mapper_testRegexEventNoFallback_rules.json";
+import regexEventNoFallbackEvents from "./analytics_mapper_testRegexEventNoFallback_events.json";
+import regexMultiGroupRenameRules from "./analytics_mapper_testRegexMultiGroupRename_rules.json";
+import regexMultiGroupRenameEvents from "./analytics_mapper_testRegexMultiGroupRename_events.json";
+import regexNonNamedFullMatchRules from "./analytics_mapper_testRegexNonNamedFullMatch_rules.json";
+import regexNonNamedFullMatchEvents from "./analytics_mapper_testRegexNonNamedFullMatch_events.json";
 
 export const fixtures = {
   renameRules,
@@ -32,4 +42,14 @@ export const fixtures = {
   blockUnlistedEventRules,
   ACPEventEvents,
   ACPEventRules,
+  emptyRenameRules,
+  emptyRenameEvents,
+  ignoreOrderingRules,
+  ignoreOrderingEvents,
+  regexEventNoFallbackRules,
+  regexEventNoFallbackEvents,
+  regexMultiGroupRenameRules,
+  regexMultiGroupRenameEvents,
+  regexNonNamedFullMatchRules,
+  regexNonNamedFullMatchEvents,
 };

package/analyticsUtils/analyticsMapper.ts

@@ -76,7 +76,10 @@ class StateHolder {
       delete this.pluckedParams[prefix];
     }
 
-    return this._cap?.[suffix];
+    // Stringify so values match the native iOS/Android mappers (which coerce
+    // analyticsCustomProperties values to strings) — keeps GA4 data consistent
+    // across web/LG/Samsung and native platforms.
+    return this._cap?.[suffix]?.toString() ?? null;
   }
 
   private async getFromLocalAndSession(

package/cellUtils/index.ts

@@ -1,7 +1,7 @@
 import * as R from "ramda";
 import { dayjs } from "../dateUtils";
-import validateColor from "validate-color";
 
+import { isValidColor } from "@applicaster/zapp-react-native-utils/colorUtils";
 import { transformColorCode as fixColorHexCode } from "@applicaster/zapp-react-native-utils/transform";
 import {
   capitalize,
@@ -468,15 +468,13 @@ export const getColorFromData = ({
   data,
   valueFromLayout,
 }: GetColorFromData): string => {
-  // Temporary hack to fix color validation when alpha is floating point number
-  // https://github.com/dreamyguy/validate-color/issues/44
-  if (validateColor(valueFromLayout.replace(".00", ""))) {
+  if (isValidColor(valueFromLayout)) {
     return valueFromLayout;
   }
 
   const pathValue = R.path(valueFromLayout.split("."), data);
 
-  if (pathValue && validateColor(pathValue)) {
+  if (pathValue && isValidColor(pathValue)) {
     return pathValue;
   }
 

package/colorUtils/__tests__/isTransparentColor.test.ts

@@ -0,0 +1,76 @@
+import { isTransparentColor } from "..";
+
+describe("isTransparentColor", () => {
+  it("returns true for transparent keyword and rgba colors with zero alpha", () => {
+    const transparentColors = [
+      "transparent",
+      "rgba(0,0,0,0)",
+      "rgba(255, 255, 255, 0)",
+      "rgba(0,0,0,0.0)",
+      "rgba(0,0,0,0.00)",
+      "rgba(0,0,0, 0)",
+      "hsla(0,0%,0%,0)",
+    ];
+
+    expect.assertions(transparentColors.length);
+
+    transparentColors.forEach((color) => {
+      expect(isTransparentColor(color)).toBe(true);
+    });
+  });
+
+  it("returns false for valid colors that are not fully transparent", () => {
+    const nonTransparentColors = [
+      "red",
+      "#fff",
+      "#ffffff",
+      "rgb(0,0,0)",
+      "rgba(0,0,0)",
+      "rgba(0,0,0,0.5)",
+      "rgba(255, 255, 255, 0.3)",
+      "rgba(255, 255, 255, 1.0)",
+      "rgba(239,239,239,1.0)",
+      "currentColor",
+      "inherit",
+      "#00000000",
+      "#fff0",
+    ];
+
+    expect.assertions(nonTransparentColors.length);
+
+    nonTransparentColors.forEach((color) => {
+      expect(isTransparentColor(color)).toBe(false);
+    });
+  });
+
+  it("returns false for case variants of the transparent keyword", () => {
+    expect(isTransparentColor("Transparent")).toBe(false);
+    expect(isTransparentColor("TRANSPARENT")).toBe(false);
+  });
+
+  it("returns false for invalid color strings", () => {
+    const invalidColors = [
+      "invalid",
+      "",
+      "#gggggg",
+      "#fff.00",
+      "unset",
+      " rgba(0,0,0,0) ",
+      "transparent ",
+    ];
+
+    expect.assertions(invalidColors.length);
+
+    invalidColors.forEach((color) => {
+      expect(isTransparentColor(color)).toBe(false);
+    });
+  });
+
+  it("returns false for nullish and non-string values", () => {
+    expect(isTransparentColor(undefined)).toBe(false);
+    expect(isTransparentColor(null)).toBe(false);
+    expect(isTransparentColor(123)).toBe(false);
+    expect(isTransparentColor({})).toBe(false);
+    expect(isTransparentColor([])).toBe(false);
+  });
+});

package/colorUtils/__tests__/isValidColor.test.ts

@@ -0,0 +1,70 @@
+import { isValidColor } from "..";
+
+describe("isValidColor", () => {
+  it("returns true for valid hex colors", () => {
+    const validHexColors = ["#fff", "#ffffff", "#FF0000", "#000", "#abc123"];
+
+    expect.assertions(validHexColors.length);
+
+    validHexColors.forEach((color) => {
+      expect(isValidColor(color)).toBe(true);
+    });
+  });
+
+  it("returns true for valid rgb and rgba colors", () => {
+    const validRgbColors = [
+      "rgb(255,0,0)",
+      "rgb(255, 0, 0)",
+      "rgba(255,0,0,0.5)",
+      "rgba(255, 0, 0, 0.5)",
+    ];
+
+    expect.assertions(validRgbColors.length);
+
+    validRgbColors.forEach((color) => {
+      expect(isValidColor(color)).toBe(true);
+    });
+  });
+
+  it("returns true for valid named and special CSS colors", () => {
+    const validNamedColors = ["red", "transparent", "currentColor", "inherit"];
+
+    expect.assertions(validNamedColors.length);
+
+    validNamedColors.forEach((color) => {
+      expect(isValidColor(color)).toBe(true);
+    });
+  });
+
+  it("returns true for valid hsl colors", () => {
+    expect(isValidColor("hsl(0, 100%, 50%)")).toBe(true);
+  });
+
+  it("returns false for invalid color strings", () => {
+    const invalidColors = [
+      "invalid",
+      "",
+      "#gggggg",
+      "#fff.00",
+      "unset",
+      undefined,
+      null,
+    ];
+
+    expect.assertions(invalidColors.length);
+
+    invalidColors.forEach((color) => {
+      expect(isValidColor(color)).toBe(false);
+    });
+  });
+
+  it("returns true for valid rgb and rgba colors", () => {
+    const validRgbColors = ["rgba(239,239,239,1.0)"];
+
+    expect.assertions(validRgbColors.length);
+
+    validRgbColors.forEach((color) => {
+      expect(isValidColor(color)).toBe(true);
+    });
+  });
+});

package/colorUtils/index.ts

@@ -0,0 +1,50 @@
+import validateColor from "validate-color";
+import { isNil } from "@applicaster/zapp-react-native-utils/utils";
+import { isString } from "@applicaster/zapp-react-native-utils/stringUtils";
+
+const normalizeRgbaAlpha = (color: string): string => {
+  return color.replace(
+    /^rgba\(([^)]+),\s*(\d+(?:\.\d+)?)\s*\)$/i,
+    (_, rgb, alpha) => {
+      const alphaValue = parseFloat(alpha);
+
+      if (!Number.isFinite(alphaValue) || !Number.isInteger(alphaValue)) {
+        return color;
+      }
+
+      return `rgba(${rgb},${alphaValue})`;
+    }
+  );
+};
+
+export const isValidColor = (color: string): boolean => {
+  if (isNil(color) || !isString(color)) {
+    return false;
+  }
+
+  if (validateColor(color)) {
+    return true;
+  }
+
+  // validate-color rejects integer alpha values written as floats (e.g. 1.0)
+  // https://github.com/dreamyguy/validate-color/issues/44
+  const normalizedColor = normalizeRgbaAlpha(color);
+
+  return normalizedColor !== color && validateColor(normalizedColor);
+};
+
+function isRgbaAlphaZero(color: string): boolean {
+  const layers = color
+    .replace("rgba(", "")
+    .replace(")", "")
+    .split(",")
+    .map((layer) => layer.trim());
+
+  return Number(layers[3]) === 0;
+}
+
+export const isTransparentColor = (color: string): boolean => {
+  return (
+    isValidColor(color) && (color === "transparent" || isRgbaAlphaZero(color))
+  );
+};

package/manifestUtils/defaultManifestConfigurations/generalContent.js

@@ -308,6 +308,41 @@ const generalContent = () => ({
         key: "pull_to_refresh_enabled",
         initial_value: false,
       },
+      {
+        type: "switch",
+        label: "Allow using this screen as a hook",
+        label_tooltip:
+          "Make sure that screen uses 'finishHook' action or performs navigation action to exit the screen after performing the hook action, or user will be stuck on the screen", // eslint-disable-line max-len
+        key: "available_as_hook",
+        initial_value: false,
+      },
+      {
+        type: "data_source_selector",
+        label: "Skip hook endpoint",
+        key: "skip_hook_endpoint",
+        label_tooltip:
+          "If set, this endpoint will check with the server whether the hook should be skipped",
+        conditional_fields: [
+          {
+            key: "rules/available_as_hook",
+            condition_value: true,
+          },
+        ],
+      },
+      {
+        key: "skip_hook_storage_key",
+        type: "text_input",
+        label: "Hook will be skipped if storage key is set",
+        initial_value: "",
+        label_tooltip:
+          "Comma-separated keys in namespace.key format (key without a dot uses the default namespace)", // eslint-disable-line max-len
+        conditional_fields: [
+          {
+            key: "rules/available_as_hook",
+            condition_value: true,
+          },
+        ],
+      },
     ],
   },
 });

package/manifestUtils/keys.js

@@ -43,6 +43,7 @@ const TV_PLATFORMS = [
   "tvos_for_quickbrick",
   "samsung_tv",
   "lg_tv",
+  "vidaa",
   "vizio",
 ];
 

package/manifestUtils/platformIsTV.js

@@ -4,6 +4,7 @@ function platformIsTV(platform) {
     "android_tv_for_quickbrick",
     "amazon_fire_tv_for_quickbrick",
     "lg_tv",
+    "vidaa",
     "samsung_tv",
     "web",
     "vizio",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "16.0.0-alpha.6001988150",
+  "version": "16.0.0-alpha.6088600543",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-alpha.6001988150",
+    "@applicaster/applicaster-types": "16.0.0-alpha.6088600543",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/pipesUtils/__tests__/buildUrlWithQuery.test.ts

@@ -0,0 +1,33 @@
+import { buildUrlWithQuery } from "../withPipesEndpoint";
+
+describe("buildUrlWithQuery", () => {
+  it("returns the url unchanged when requestParams is null", () => {
+    expect(buildUrlWithQuery("https://foo.com/path", null)).toBe(
+      "https://foo.com/path"
+    );
+  });
+
+  it("returns the url unchanged when requestParams has no params", () => {
+    expect(buildUrlWithQuery("https://foo.com/path", { headers: {} })).toBe(
+      "https://foo.com/path"
+    );
+  });
+
+  it("returns the url unchanged when url is empty", () => {
+    expect(buildUrlWithQuery("", { params: { a: "1" } })).toBe("");
+  });
+
+  it("appends params to a url with no existing query", () => {
+    expect(
+      buildUrlWithQuery("https://foo.com/path", { params: { token: "abc" } })
+    ).toBe("https://foo.com/path?token=abc");
+  });
+
+  it("merges params with an existing query string", () => {
+    expect(
+      buildUrlWithQuery("https://foo.com/path?existing=1", {
+        params: { token: "abc" },
+      })
+    ).toBe("https://foo.com/path?existing=1&token=abc");
+  });
+});

package/pipesUtils/__tests__/withPipesEndpoint.test.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { render } from "@testing-library/react-native";
+import { Text } from "react-native";
+
+const mockedUseBuildPipesUrl = jest.fn();
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/feed", () => ({
+  useBuildPipesUrl: (args) => mockedUseBuildPipesUrl(args),
+}));
+
+const { withPipesEndpoint } = require("../withPipesEndpoint");
+
+// eslint-disable-next-line react/display-name
+const Wrapped = React.forwardRef((props: any, _ref) => (
+  <Text testID="wrapped">{`${props.uri}|${JSON.stringify(props.headers)}`}</Text>
+));
+
+describe("withPipesEndpoint", () => {
+  afterEach(() => jest.clearAllMocks());
+
+  it("renders nothing while the endpoint context is resolving", () => {
+    mockedUseBuildPipesUrl.mockReturnValue({ requestParams: null });
+
+    const Decorated = withPipesEndpoint(Wrapped);
+    const { queryByTestId } = render(<Decorated uri="https://foo.com" />);
+
+    expect(queryByTestId("wrapped")).toBeNull();
+  });
+
+  it("passes the uri through unchanged when there are no params", () => {
+    mockedUseBuildPipesUrl.mockReturnValue({ requestParams: {} });
+
+    const Decorated = withPipesEndpoint(Wrapped);
+    const { getByTestId } = render(<Decorated uri="https://foo.com/path" />);
+
+    expect(getByTestId("wrapped").props.children).toBe(
+      "https://foo.com/path|{}"
+    );
+  });
+
+  it("merges resolved params into the uri and forwards headers", () => {
+    mockedUseBuildPipesUrl.mockReturnValue({
+      requestParams: {
+        params: { token: "abc" },
+        headers: { Authorization: "Bearer xyz" },
+      },
+    });
+
+    const Decorated = withPipesEndpoint(Wrapped);
+    const { getByTestId } = render(<Decorated uri="https://foo.com/path" />);
+
+    expect(getByTestId("wrapped").props.children).toBe(
+      'https://foo.com/path?token=abc|{"Authorization":"Bearer xyz"}'
+    );
+  });
+});

package/pipesUtils/index.ts

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

package/pipesUtils/withPipesEndpoint.tsx

@@ -0,0 +1,54 @@
+import React, { forwardRef, RefObject } from "react";
+import URL from "url";
+
+import { useBuildPipesUrl } from "@applicaster/zapp-react-native-utils/reactHooks/feed";
+
+/**
+ * Merges the query params resolved from a pipes endpoint context into the url.
+ * Returns the url unchanged when there is nothing to merge.
+ */
+export function buildUrlWithQuery(url: string, requestParams): string {
+  if (!url || !requestParams?.params) {
+    return url;
+  }
+
+  const parsedURL = URL.parse(url, true);
+
+  parsedURL.query = { ...parsedURL.query, ...requestParams.params };
+  parsedURL.search = null;
+
+  return URL.format(parsedURL);
+}
+
+type Props = {
+  uri: string;
+} & Record<string, unknown>;
+
+/**
+ * HOC that resolves the wrapped component's `uri` against its matching Zapp
+ * Pipes endpoint. Endpoint context keys are added as query params (merged into
+ * the uri) and as request `headers`. Rendering is deferred until the context
+ * has been resolved so the component never loads without its required headers.
+ */
+export function withPipesEndpoint(Component) {
+  function WithPipesEndpoint(props: Props, ref: RefObject<unknown>) {
+    const { requestParams } = useBuildPipesUrl({ url: props.uri });
+
+    if (requestParams !== null) {
+      const urlWithQuery = buildUrlWithQuery(props.uri, requestParams);
+
+      return (
+        <Component
+          ref={ref}
+          {...props}
+          uri={urlWithQuery}
+          headers={requestParams.headers || {}}
+        />
+      );
+    }
+
+    return null;
+  }
+
+  return forwardRef(WithPipesEndpoint);
+}

package/reactHooks/cell-click/index.ts

@@ -49,12 +49,13 @@ export const useCellClick = ({
   const actionExecutor = React.useContext(ActionExecutorContext);
   const screenData = useCurrentScreenData();
   const screenState = useScreenContext()?.options;
+  const entry = useScreenContext()?.entry;
 
   const cellSelectable = toBooleanWithDefaultTrue(
     component?.rules?.component_cells_selectable
   );
 
-  const [entryContext, setEntryContext] =
+  const [_entryContext, setEntryContext] =
     ZappPipesEntryContext.useZappPipesContext(pathname);
 
   const logTimestamp = useProfilerLogging();
@@ -89,7 +90,8 @@ export const useCellClick = ({
           screenState,
           screenRoute: pathname,
           screenStateStore,
-          entryContext,
+          entryContext: selectedItem,
+          screenEntry: entry,
         });
       }
 
@@ -117,14 +119,20 @@ export const useCellClick = ({
       }
     },
     [
-      onCellTap,
-      currentRoute,
+      item,
       setEntryContext,
-      pathname,
-      push,
       sendAnalyticsOnPress,
+      logTimestamp,
+      pathname,
+      component,
+      onCellTap,
+      entry,
+      actionExecutor,
       screenData,
       screenState,
+      screenStateStore,
+      currentRoute,
+      push,
     ]
   );
 
@@ -138,5 +146,5 @@ export const useCellClick = ({
     onPressRef.current = onPress;
   }
 
-  return React.useCallback(onPressRef.current, []);
+  return React.useCallback(onPressRef.current, [item]);
 };

package/reactHooks/feed/__mocks__/useMarkPipesDataStale.ts

@@ -0,0 +1,4 @@
+export const useMarkPipesDataStale = jest.fn();
+
+/** @deprecated alias of useMarkPipesDataStale */
+export const usePipesCacheReset = useMarkPipesDataStale;

package/reactHooks/feed/index.ts

@@ -6,7 +6,11 @@ export { useEntryScreenId } from "./useEntryScreenId";
 
 export { useBuildPipesUrl } from "./useBuildPipesUrl";
 
-export { usePipesCacheReset } from "./usePipesCacheReset";
+export {
+  useMarkPipesDataStale,
+  // eslint-disable-next-line @typescript-eslint/no-deprecated
+  usePipesCacheReset,
+} from "./useMarkPipesDataStale";
 
 export { useBatchLoading } from "./useBatchLoading";
 

package/reactHooks/feed/useBatchLoading.ts

@@ -159,9 +159,17 @@ export const useBatchLoading = (
     options.riverId,
   ]);
 
+  // Initial preload only. Batch loading warms the first batch of component
+  // feeds and signals readiness; the feed set is frozen at mount on purpose.
+  // Per-component loads and reloads (including stale revalidation) are owned by
+  // useFeedLoader in ZappPipesDataConnector. Re-running on `feeds`/input changes
+  // would re-fire on every store update and cause redundant dispatch storms, so
+  // this intentionally runs once on mount.
+  /* eslint-disable @wogns3623/better-exhaustive-deps/exhaustive-deps */
   React.useEffect(() => {
     runBatchLoading();
-  }, [runBatchLoading]); // Adding runBatchLoading as a dependency to ensure that it reloads feeds when clearPipesData is called
+  }, []);
+  /* eslint-enable @wogns3623/better-exhaustive-deps/exhaustive-deps */
 
   React.useEffect(() => {
     // check if all feeds are ready and set hasEverBeenReady to true

package/reactHooks/feed/{usePipesCacheReset.ts → useMarkPipesDataStale.ts}

@@ -2,17 +2,19 @@ import React from "react";
 
 import { getDatasourceUrl } from "@applicaster/zapp-react-native-ui-components/Decorators/RiverFeedLoader/utils/getDatasourceUrl";
 import { usePipesContexts } from "@applicaster/zapp-react-native-ui-components/Decorators/RiverFeedLoader/utils/usePipesContexts";
-import { clearPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
+import { markPipesDataStale } from "@applicaster/zapp-react-native-redux/ZappPipes";
 
 import { useRoute } from "../navigation";
 import { useAppDispatch } from "@applicaster/zapp-react-native-redux";
 
 /**
- * reset river components cache when screen is unmounted
+ * Mark a river's `clear_cache_on_reload` feeds as stale when the screen is
+ * unmounted. The cached data is kept (so a screen sharing the same feed does
+ * not lose it mid-mount) and revalidated on next access.
  * @param {string} riverId screen id
  * @param {Array} riverComponents list of UI components
  */
-export const usePipesCacheReset = (riverId, riverComponents) => {
+export const useMarkPipesDataStale = (riverId, riverComponents) => {
   const dispatch = useAppDispatch();
   const { screenData, pathname } = useRoute();
   const pipesContexts = usePipesContexts(riverId, pathname);
@@ -35,10 +37,16 @@ export const usePipesCacheReset = (riverId, riverComponents) => {
           );
 
           if (url) {
-            dispatch(clearPipesData(url, { riverId }));
+            dispatch(markPipesDataStale(url, { riverId }));
           }
         }
       });
     };
   }, []);
 };
+
+/**
+ * @deprecated Renamed to `useMarkPipesDataStale`. Kept as an alias for backward
+ * compatibility with external consumers.
+ */
+export const usePipesCacheReset = useMarkPipesDataStale;

package/reactHooks/utils/index.ts

@@ -1,4 +1,4 @@
-import { useRef, useEffect } from "react";
+import { useEffect, useRef } from "react";
 
 /**
  * This hook returns a previous value that was passed to it.
@@ -40,6 +40,7 @@ export const shouldDispatchData = (
 ) => {
   const currentFeedHasData = feed?.data;
   const isLocalFeed = checkIsLocalFeed(url);
+  const isFeedStale = feed?.stale;
 
-  return !currentFeedHasData || clearCache || isLocalFeed;
+  return !currentFeedHasData || clearCache || isFeedStale || isLocalFeed;
 };

package/riverComponetsMeasurementProvider/index.tsx

@@ -1,10 +1,20 @@
 import * as React from "react";
-import { NativeModules, StyleSheet, View } from "react-native";
+import { NativeModules, View, StyleSheet } from "react-native";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 
-import { isApplePlatform, isWeb } from "../reactUtils";
+import { isApplePlatform, isWeb, isTV } from "../reactUtils";
 import { useRivers } from "../reactHooks";
 
+const isTVPlatform = isTV();
+
+const styles = StyleSheet.create({
+  container: isTVPlatform
+    ? {
+        flex: 1,
+      }
+    : {},
+});
+
 const layoutReducer = (state, { payload }) => {
   return state.map((item, index, _state) => ({
     height: index === payload.index ? payload.height : item.height,
@@ -30,12 +40,6 @@ type MeasurementContext = {
   onLayout: (index: number) => (event) => void;
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});
-
 const { Logger } = getXray();
 
 const logger = new Logger("general", "ui");

package/reactHooks/feed/__mocks__/usePipesCacheReset.ts

@@ -1 +0,0 @@
-export const usePipesCacheReset = jest.fn();