@applicaster/zapp-react-native-ui-components 16.0.0-alpha.2628821467 → 16.0.0-alpha.2851031376

package/Components/GeneralContentScreen/GeneralContentScreenHookAdapter.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { GeneralContentScreen } from "./GeneralContentScreen";
+import { HookContentFocusGroup } from "./hookFocus";
+import { runInBackground } from "./hookAdapter/runInBackground";
+import { log_error } from "./hookAdapter/logger";
+
+type HookComponentProps = HookPluginProps & {
+  configuration?: unknown;
+};
+
+function GeneralContentScreenHookComponent(props: HookComponentProps) {
+  const { hookPlugin, focused, parentFocus } = props;
+
+  if (!hookPlugin?.screen_id) {
+    log_error(
+      "GeneralContentScreenHookAdapter: This component should only be used as a hook, but no hookPlugin was provided."
+    );
+
+    return null;
+  }
+
+  return (
+    <HookContentFocusGroup>
+      <GeneralContentScreen
+        screenId={hookPlugin.screen_id}
+        isScreenWrappedInContainer={false}
+        focused={focused}
+        parentFocus={parentFocus}
+      />
+    </HookContentFocusGroup>
+  );
+}
+
+export const GeneralContentScreenHookAdapter = {
+  isFlowBlocker: () => true,
+  presentFullScreen: true,
+  Component: GeneralContentScreenHookComponent,
+  runInBackground,
+};

package/Components/GeneralContentScreen/__tests__/GeneralContentScreenHookAdapter.test.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { GeneralContentScreenHookAdapter } from "../GeneralContentScreenHookAdapter";
+import { log_error } from "../hookAdapter/logger";
+
+const mockScreenSpy = jest.fn();
+
+jest.mock("../GeneralContentScreen", () => ({
+  GeneralContentScreen: (props) => {
+    const React = require("react");
+    const { View } = require("react-native");
+
+    mockScreenSpy(props);
+
+    return <View testID="general-content-screen" />;
+  },
+}));
+
+jest.mock("../hookAdapter/runInBackground", () => ({
+  runInBackground: jest.fn(),
+}));
+
+jest.mock("../hookAdapter/logger", () => ({
+  log_debug: jest.fn(),
+  log_error: jest.fn(),
+  log_info: jest.fn(),
+}));
+
+const { Component } = GeneralContentScreenHookAdapter;
+
+describe("GeneralContentScreenHookAdapter", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders GeneralContentScreen with the hook plugin screen id", () => {
+    const { getByTestId } = render(
+      <Component hookPlugin={{ screen_id: "screen-1" }} focused />
+    );
+
+    expect(getByTestId("general-content-screen")).toBeDefined();
+
+    expect(mockScreenSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        screenId: "screen-1",
+        isScreenWrappedInContainer: false,
+      })
+    );
+  });
+
+  it("renders nothing and logs an error when hookPlugin is missing", () => {
+    const { toJSON } = render(<Component />);
+
+    expect(toJSON()).toBeNull();
+    expect(mockScreenSpy).not.toHaveBeenCalled();
+    expect(log_error).toHaveBeenCalled();
+  });
+
+  it("renders nothing when hookPlugin has no screen_id", () => {
+    const { toJSON } = render(<Component hookPlugin={{}} />);
+
+    expect(toJSON()).toBeNull();
+  });
+});

package/Components/GeneralContentScreen/__tests__/HookContentFocusGroup.web.test.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { View } from "react-native";
+
+import { HookContentFocusGroup } from "../hookFocus/index.web";
+
+const mockFocusableGroupSpy = jest.fn();
+const mockUseInitialFocusSpy = jest.fn();
+
+const mockModalState = { isRunningInBackground: false };
+
+jest.mock("../../FocusableGroup", () => ({
+  FocusableGroup: (props) => {
+    const React = require("react");
+    const { View } = require("react-native");
+
+    mockFocusableGroupSpy(props);
+
+    return <View testID="focusable-group">{props.children}</View>;
+  },
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
+  useContentId: () => "quick-brick-content___route",
+  useNavbarId: () => "quick-brick-navbar___route",
+  usePathname: () => "hooks-modal/profile-select",
+}));
+
+jest.mock("../../Screen/TV/hooks", () => ({
+  useInitialFocus: () => mockUseInitialFocusSpy(),
+}));
+
+jest.mock("../../../Contexts/ZappHookModalContext", () => ({
+  useZappHookModalStore: (selector) => selector(mockModalState),
+}));
+
+describe("HookContentFocusGroup (web)", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockModalState.isRunningInBackground = false;
+  });
+
+  it("wraps content in a preferred-focus content group and triggers initial focus when presented full screen", () => {
+    const { getByTestId } = render(
+      <HookContentFocusGroup>
+        <View testID="child" />
+      </HookContentFocusGroup>
+    );
+
+    expect(getByTestId("focusable-group")).toBeDefined();
+    expect(getByTestId("child")).toBeDefined();
+    expect(mockUseInitialFocusSpy).toHaveBeenCalledTimes(1);
+
+    expect(mockFocusableGroupSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        id: "quick-brick-content___route",
+        groupId: "hooks-modal/profile-select",
+        nextFocusUp: "quick-brick-navbar___route",
+        preferredFocus: true,
+        shouldUsePreferredFocus: true,
+      })
+    );
+  });
+
+  it("injects the content group id into the wrapped child so its cells register under it", () => {
+    render(
+      <HookContentFocusGroup>
+        <View testID="child" />
+      </HookContentFocusGroup>
+    );
+
+    const child = mockFocusableGroupSpy.mock.calls[0][0].children;
+
+    expect(child.props.groupId).toBe("quick-brick-content___route");
+  });
+
+  it("renders the child without focus handling when running in background (not full screen)", () => {
+    mockModalState.isRunningInBackground = true;
+
+    const { getByTestId, queryByTestId } = render(
+      <HookContentFocusGroup>
+        <View testID="child" />
+      </HookContentFocusGroup>
+    );
+
+    expect(getByTestId("child")).toBeDefined();
+    expect(queryByTestId("focusable-group")).toBeNull();
+    expect(mockUseInitialFocusSpy).not.toHaveBeenCalled();
+    expect(mockFocusableGroupSpy).not.toHaveBeenCalled();
+  });
+});

package/Components/GeneralContentScreen/hookAdapter/__tests__/networkService.test.ts

@@ -0,0 +1,74 @@
+import { requestToSkipHook } from "../networkService";
+
+const mockCall = jest.fn();
+const mockBuildAxiosRequest = jest.fn();
+let mockHelper: Record<string, any>;
+
+jest.mock("@applicaster/zapp-pipes-v2-client", () => ({
+  RequestBuilder: jest.fn().mockImplementation(() => ({
+    setEntryContext: jest.fn().mockReturnThis(),
+    setScreenContext: jest.fn().mockReturnThis(),
+    setUrl: jest.fn().mockReturnThis(),
+    buildAxiosRequest: (...args) => mockBuildAxiosRequest(...args),
+    call: (...args) => mockCall(...args),
+  })),
+  PipesClientResponseHelper: jest.fn().mockImplementation(() => mockHelper),
+}));
+
+jest.mock("../logger", () => ({
+  log_debug: jest.fn(),
+  log_error: jest.fn(),
+  log_info: jest.fn(),
+}));
+
+const dataSource = { source: "https://skip-endpoint", mapping: {} };
+const payload = { id: "entry-1" };
+
+describe("requestToSkipHook", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockBuildAxiosRequest.mockResolvedValue({ url: "https://skip-endpoint" });
+    mockCall.mockResolvedValue({});
+
+    mockHelper = {
+      error: null,
+      statusCode: 200,
+      responseData: null,
+      getLogsData: jest.fn(() => ({})),
+    };
+  });
+
+  it("returns true when the endpoint returns a non-empty body", async () => {
+    mockHelper.responseData = true;
+
+    await expect(requestToSkipHook(dataSource, payload)).resolves.toBe(true);
+  });
+
+  it("treats any truthy payload as skip (hook-screen-wrapper contract)", async () => {
+    mockHelper.responseData = { entry: [] };
+
+    await expect(requestToSkipHook(dataSource, payload)).resolves.toBe(true);
+  });
+
+  it("returns false when the endpoint returns an empty body", async () => {
+    mockHelper.responseData = null;
+
+    await expect(requestToSkipHook(dataSource, payload)).resolves.toBe(false);
+  });
+
+  it("throws when the response contains an error", async () => {
+    mockHelper.error = new Error("server error");
+
+    await expect(requestToSkipHook(dataSource, payload)).rejects.toThrow(
+      "server error"
+    );
+  });
+
+  it("throws when the request itself fails", async () => {
+    mockCall.mockRejectedValue(new Error("network down"));
+
+    await expect(requestToSkipHook(dataSource, payload)).rejects.toThrow(
+      "network down"
+    );
+  });
+});

package/Components/GeneralContentScreen/hookAdapter/__tests__/runInBackground.test.ts

@@ -0,0 +1,139 @@
+import { runInBackground } from "../runInBackground";
+import { shouldSkipHook } from "../validationHelper";
+import { requestToSkipHook } from "../networkService";
+
+jest.mock("../validationHelper", () => ({
+  shouldSkipHook: jest.fn(),
+}));
+
+jest.mock("../networkService", () => ({
+  requestToSkipHook: jest.fn(),
+}));
+
+jest.mock("../logger", () => ({
+  log_debug: jest.fn(),
+  log_error: jest.fn(),
+  log_info: jest.fn(),
+}));
+
+const mockShouldSkipHook = shouldSkipHook as jest.Mock;
+const mockRequestToSkipHook = requestToSkipHook as jest.Mock;
+
+const item = { id: "entry-1" };
+const endpoint = { source: "https://skip-endpoint", mapping: {} };
+
+describe("runInBackground", () => {
+  let callback: jest.Mock;
+  let presentUI: jest.Mock;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    callback = jest.fn();
+    presentUI = jest.fn();
+    mockShouldSkipHook.mockResolvedValue(false);
+    mockRequestToSkipHook.mockResolvedValue(false);
+  });
+
+  it("presents the UI when no skip rules are configured", async () => {
+    await runInBackground(item, callback, {}, presentUI);
+
+    expect(presentUI).toHaveBeenCalled();
+    expect(callback).not.toHaveBeenCalled();
+    expect(mockShouldSkipHook).not.toHaveBeenCalled();
+    expect(mockRequestToSkipHook).not.toHaveBeenCalled();
+  });
+
+  it("finishes the hook when a storage key is found, without calling the endpoint", async () => {
+    mockShouldSkipHook.mockResolvedValue(true);
+
+    const configuration = {
+      rules: {
+        skip_hook_storage_key: "ns.key",
+        skip_hook_endpoint: endpoint,
+      },
+    };
+
+    await runInBackground(item, callback, configuration, presentUI);
+
+    expect(mockShouldSkipHook).toHaveBeenCalledWith("ns.key");
+
+    expect(callback).toHaveBeenCalledWith({
+      success: true,
+      error: null,
+      payload: item,
+    });
+
+    expect(mockRequestToSkipHook).not.toHaveBeenCalled();
+    expect(presentUI).not.toHaveBeenCalled();
+  });
+
+  it("falls through to the endpoint check when storage keys are not found", async () => {
+    const configuration = {
+      rules: {
+        skip_hook_storage_key: "ns.key",
+        skip_hook_endpoint: endpoint,
+      },
+    };
+
+    await runInBackground(item, callback, configuration, presentUI);
+
+    expect(mockRequestToSkipHook).toHaveBeenCalledWith(endpoint, item);
+    expect(presentUI).toHaveBeenCalled();
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it("finishes the hook when the endpoint allows skipping", async () => {
+    mockRequestToSkipHook.mockResolvedValue(true);
+
+    const configuration = {
+      rules: { skip_hook_endpoint: endpoint },
+    };
+
+    await runInBackground(item, callback, configuration, presentUI);
+
+    expect(callback).toHaveBeenCalledWith({
+      success: true,
+      error: null,
+      payload: item,
+    });
+
+    expect(presentUI).not.toHaveBeenCalled();
+  });
+
+  it("ignores an endpoint configuration without a source", async () => {
+    const configuration = {
+      rules: { skip_hook_endpoint: { mapping: {} } },
+    };
+
+    await runInBackground(item, callback, configuration, presentUI);
+
+    expect(mockRequestToSkipHook).not.toHaveBeenCalled();
+    expect(presentUI).toHaveBeenCalled();
+  });
+
+  it("presents the UI when the endpoint check throws", async () => {
+    mockRequestToSkipHook.mockRejectedValue(new Error("network down"));
+
+    const configuration = {
+      rules: { skip_hook_endpoint: endpoint },
+    };
+
+    await runInBackground(item, callback, configuration, presentUI);
+
+    expect(presentUI).toHaveBeenCalled();
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it("presents the UI when the storage check throws", async () => {
+    mockShouldSkipHook.mockRejectedValue(new Error("storage error"));
+
+    const configuration = {
+      rules: { skip_hook_storage_key: "ns.key" },
+    };
+
+    await runInBackground(item, callback, configuration, presentUI);
+
+    expect(presentUI).toHaveBeenCalled();
+    expect(callback).not.toHaveBeenCalled();
+  });
+});

package/Components/GeneralContentScreen/hookAdapter/__tests__/validationHelper.test.ts

@@ -0,0 +1,124 @@
+import {
+  parseKeyEntries,
+  getKeyToSkipHook,
+  shouldSkipHook,
+} from "../validationHelper";
+
+const mockSessionGetItem = jest.fn();
+const mockLocalGetItem = jest.fn();
+
+jest.mock(
+  "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage",
+  () => ({
+    sessionStorage: { getItem: (...args) => mockSessionGetItem(...args) },
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage",
+  () => ({
+    localStorage: { getItem: (...args) => mockLocalGetItem(...args) },
+  })
+);
+
+jest.mock("../logger", () => ({
+  log_debug: jest.fn(),
+  log_error: jest.fn(),
+  log_info: jest.fn(),
+}));
+
+describe("parseKeyEntries", () => {
+  it("parses a namespaced key as namespace.key", () => {
+    expect(parseKeyEntries("myNamespace.myKey")).toEqual([
+      { namespace: "myNamespace", key: "myKey" },
+    ]);
+  });
+
+  it("treats everything before the last dot as the namespace", () => {
+    expect(parseKeyEntries("com.applicaster.feature.someKey")).toEqual([
+      { namespace: "com.applicaster.feature", key: "someKey" },
+    ]);
+  });
+
+  it("falls back to the default namespace when there is no dot", () => {
+    expect(parseKeyEntries("plainKey")).toEqual([
+      { namespace: "applicaster.v2", key: "plainKey" },
+    ]);
+  });
+
+  it("splits comma-separated entries, trimming whitespace and empty items", () => {
+    expect(parseKeyEntries(" ns1.key1 , , ns2.key2 ,")).toEqual([
+      { namespace: "ns1", key: "key1" },
+      { namespace: "ns2", key: "key2" },
+    ]);
+  });
+});
+
+describe("getKeyToSkipHook", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("returns the session storage value when present, without hitting local storage", async () => {
+    mockSessionGetItem.mockResolvedValue("session-value");
+
+    const value = await getKeyToSkipHook("myKey", "myNamespace");
+
+    expect(value).toBe("session-value");
+    expect(mockSessionGetItem).toHaveBeenCalledWith("myKey", "myNamespace");
+    expect(mockLocalGetItem).not.toHaveBeenCalled();
+  });
+
+  it("falls back to local storage when session storage is empty", async () => {
+    mockSessionGetItem.mockResolvedValue(null);
+    mockLocalGetItem.mockResolvedValue("local-value");
+
+    const value = await getKeyToSkipHook("myKey", "myNamespace");
+
+    expect(value).toBe("local-value");
+    expect(mockLocalGetItem).toHaveBeenCalledWith("myKey", "myNamespace");
+  });
+});
+
+describe("shouldSkipHook", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockSessionGetItem.mockResolvedValue(null);
+    mockLocalGetItem.mockResolvedValue(null);
+  });
+
+  it("returns false when no condition is provided", async () => {
+    await expect(shouldSkipHook(undefined)).resolves.toBe(false);
+    await expect(shouldSkipHook("")).resolves.toBe(false);
+    await expect(shouldSkipHook("   ")).resolves.toBe(false);
+  });
+
+  it("returns true when a key is found in storage, querying with parsed namespace and key", async () => {
+    mockSessionGetItem.mockResolvedValue("value");
+
+    await expect(shouldSkipHook("myNamespace.myKey")).resolves.toBe(true);
+    expect(mockSessionGetItem).toHaveBeenCalledWith("myKey", "myNamespace");
+  });
+
+  it("returns true when any of the comma-separated keys is found", async () => {
+    mockLocalGetItem.mockImplementation((key) =>
+      Promise.resolve(key === "key2" ? "value" : null)
+    );
+
+    await expect(shouldSkipHook("ns1.key1, ns2.key2")).resolves.toBe(true);
+  });
+
+  it("returns false when none of the keys are found", async () => {
+    await expect(shouldSkipHook("ns1.key1, ns2.key2")).resolves.toBe(false);
+    expect(mockSessionGetItem).toHaveBeenCalledTimes(2);
+    expect(mockLocalGetItem).toHaveBeenCalledTimes(2);
+  });
+
+  it("continues to the next key when a storage read throws", async () => {
+    mockSessionGetItem
+      .mockRejectedValueOnce(new Error("storage error"))
+      .mockResolvedValueOnce("value");
+
+    await expect(shouldSkipHook("ns1.key1, ns2.key2")).resolves.toBe(true);
+  });
+});

package/Components/GeneralContentScreen/hookAdapter/logger.ts

@@ -0,0 +1,6 @@
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+
+export const { log_debug, log_error, log_info } = createLogger({
+  category: "runInBackground",
+  subsystem: "GeneralContentScreenHookAdapter",
+});

package/Components/GeneralContentScreen/hookAdapter/networkService.ts

@@ -0,0 +1,53 @@
+import {
+  PipesClientResponseHelper,
+  RequestBuilder,
+} from "@applicaster/zapp-pipes-v2-client";
+import { log_debug, log_error } from "./logger";
+
+export const requestToSkipHook = async (
+  dataSource: ZappDataSource,
+  payload: ZappEntry
+): Promise<boolean> => {
+  try {
+    const requestBuilder = new RequestBuilder()
+      .setEntryContext(payload)
+      // @ts-ignore: empty screen context is acceptable for this request
+      .setScreenContext({})
+      .setUrl(dataSource.source, dataSource.mapping);
+
+    const request = await requestBuilder.buildAxiosRequest();
+
+    log_debug(
+      `requestToSkipHook: Request built for source: ${
+        request?.url || dataSource.source
+      }`,
+      { ...request, source: dataSource.source }
+    );
+
+    const responseObject = await requestBuilder.call<boolean>();
+    const responseHelper = new PipesClientResponseHelper(responseObject);
+
+    const error = responseHelper.error;
+    const logData = responseHelper.getLogsData();
+
+    if (error) {
+      log_error(`requestToSkipHook: Error: ${error.message}`, {
+        response: logData,
+      });
+
+      throw error;
+    }
+
+    log_debug(
+      `requestToSkipHook: Request received successfully. Status: ${responseHelper.statusCode}`,
+      { response: logData }
+    );
+
+    // Non-empty body = skip the hook (same contract as hook-screen-wrapper)
+    return Boolean(responseHelper.responseData);
+  } catch (error) {
+    log_error(`requestToSkipHook: Error: ${error.message}`, { error });
+
+    throw error;
+  }
+};

package/Components/GeneralContentScreen/hookAdapter/runInBackground.ts

@@ -0,0 +1,48 @@
+import { shouldSkipHook } from "./validationHelper";
+import { requestToSkipHook } from "./networkService";
+import { log_debug, log_error } from "./logger";
+
+/**
+ * Headless pre-hook for the General Content Screen. `configuration` is the
+ * Hook object with the screen merged in; skip-hook fields live under `rules`.
+ */
+export const runInBackground = async (
+  item,
+  callback,
+  configuration,
+  presentUI
+) => {
+  try {
+    const skipHookIfKeysExist = configuration?.rules?.skip_hook_storage_key;
+
+    if (skipHookIfKeysExist) {
+      const shouldSkip = await shouldSkipHook(skipHookIfKeysExist);
+
+      if (shouldSkip) {
+        log_debug(
+          `runInBackground: Storage key found: ${skipHookIfKeysExist}. Skipping hook.`
+        );
+
+        return callback({ success: true, error: null, payload: item });
+      }
+    }
+
+    const skipHookEndpoint = configuration?.rules?.skip_hook_endpoint;
+
+    if (skipHookEndpoint?.source) {
+      const success = await requestToSkipHook(skipHookEndpoint, item);
+
+      if (success) {
+        log_debug(
+          "runInBackground: Network call forced to finish hook. Skipping hook."
+        );
+
+        return callback({ success: true, error: null, payload: item });
+      }
+    }
+  } catch (error) {
+    log_error(`runInBackground: Error: ${error.message}`);
+  }
+
+  return presentUI();
+};

package/Components/GeneralContentScreen/hookAdapter/validationHelper.ts

@@ -0,0 +1,72 @@
+import { getNamespaceAndKey } from "@applicaster/zapp-react-native-utils/appUtils/contextKeysManager/utils";
+import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
+import { log_error, log_info } from "./logger";
+
+type ParseKey = { key: string; namespace?: string };
+
+export function parseKeyEntries(input: string): ParseKey[] {
+  return input.split(",").flatMap((item) => {
+    const trimmed = item.trim();
+
+    return trimmed ? getNamespaceAndKey(trimmed) : [];
+  });
+}
+
+export const getKeyToSkipHook = async (key: string, namespace?: string) => {
+  const value = await sessionStorage.getItem(key, namespace);
+
+  if (value) {
+    return value;
+  }
+
+  return await localStorage.getItem(key, namespace);
+};
+
+export const shouldSkipHook = async (
+  skipHookIfKeysExist?: string
+): Promise<boolean> => {
+  if (!skipHookIfKeysExist?.trim()) {
+    log_info("shouldSkipHook: No skipping condition provided");
+
+    return false;
+  }
+
+  const keyEntries = parseKeyEntries(skipHookIfKeysExist);
+
+  if (keyEntries.length === 0) {
+    log_info("shouldSkipHook: No valid keys provided");
+
+    return false;
+  }
+
+  for (const entry of keyEntries) {
+    try {
+      const value = await getKeyToSkipHook(entry.key, entry.namespace);
+
+      if (value) {
+        log_info(
+          `shouldSkipHook: Hook will be skipped due to: ${
+            entry.namespace ?? ""
+          } ${entry.key}. Finishing hook flow`
+        );
+
+        return true;
+      }
+    } catch (error) {
+      log_error(
+        `shouldSkipHook: Error: ${error.message} checking key: ${
+          entry.namespace ?? ""
+        } ${entry.key}`,
+        { error }
+      );
+    }
+  }
+
+  log_info(
+    // eslint-disable-next-line max-len
+    "shouldSkipHook: No skipping condition met, none of the provided keys found in storage, proceeding with hook"
+  );
+
+  return false;
+};

package/Components/GeneralContentScreen/hookFocus/index.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+
+type Props = {
+  children: React.ReactElement;
+};
+
+/**
+ * On native platforms the river `ComponentsMap` registers its own initial focus,
+ * so a hook-presented general content screen needs no extra focus wrapper here.
+ * The web counterpart (`index.web.tsx`) recreates the content focus group that
+ * the `River` wrapper would normally provide.
+ */
+export const HookContentFocusGroup = ({ children }: Props) => <>{children}</>;

package/Components/GeneralContentScreen/hookFocus/index.web.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { StyleSheet } from "react-native";
+import { shallow } from "zustand/shallow";
+
+import { FocusableGroup } from "../../FocusableGroup";
+import {
+  useContentId,
+  useNavbarId,
+  usePathname,
+} from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { useZappHookModalStore } from "../../../Contexts/ZappHookModalContext";
+
+import { useInitialFocus } from "../../Screen/TV/hooks";
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+});
+
+type Props = {
+  children: React.ReactElement;
+};
+
+/**
+ * A general content screen presented as a full-screen hook is rendered straight
+ * through `ComponentsMap`, bypassing the web `River` wrapper. That wrapper is what
+ * normally creates the `quick-brick-content` FocusableGroup (with `preferredFocus`)
+ * the focus manager relies on and what lets initial focus land on the content.
+ *
+ * Without it the hook screen renders but nothing is focusable on web TV. This
+ * recreates that content group and triggers initial focus, mirroring `River`.
+ */
+const FocusedHookContent = ({ children }: Props) => {
+  const contentId = useContentId();
+  const navbarId = useNavbarId();
+  const pathname = usePathname();
+
+  useInitialFocus();
+
+  return (
+    <FocusableGroup
+      id={contentId}
+      // Nest under the hook-modal route so the focus manager treats this as the
+      // active screen's content node; `useInitialFocus` targets the same route.
+      groupId={pathname}
+      nextFocusUp={navbarId}
+      preferredFocus
+      shouldUsePreferredFocus
+      style={styles.container}
+    >
+      {React.cloneElement(children, { groupId: contentId })}
+    </FocusableGroup>
+  );
+};
+
+export const HookContentFocusGroup = ({ children }: Props) => {
+  const isRunningInBackground = useZappHookModalStore(
+    (state) => state.isRunningInBackground,
+    shallow
+  );
+
+  // A hook presented full screen (either as a `/hooks/<id>` screen or a
+  // full-screen modal) needs the content focus group. Only background runs,
+  // which render invisibly, must be left alone so they don't steal focus.
+  if (isRunningInBackground) {
+    return <>{children}</>;
+  }
+
+  return <FocusedHookContent>{children}</FocusedHookContent>;
+};

package/Components/GeneralContentScreen/index.ts

@@ -1 +1,3 @@
 export { GeneralContentScreen } from "./GeneralContentScreen";
+
+export { GeneralContentScreenHookAdapter } from "./GeneralContentScreenHookAdapter";

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
-import { FlatList, ScrollView, ScrollViewProps, View } from "react-native";
+import { FlatList, StyleSheet, View } from "react-native";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { RiverItem } from "../RiverItem";
 import { RiverFooter } from "../RiverFooter";
@@ -36,16 +36,18 @@ type Props = {
   groupId?: string;
   isScreenWrappedInContainer?: boolean;
   riverComponents: ZappUIComponent[];
-  scrollViewExtraProps?: Partial<ScrollViewProps>;
+  scrollViewExtraProps?: {};
   riverId?: string;
-  getStaticComponentFeed: (args: {
-    component: ZappUIComponent;
-    index: number;
-  }) => ZappFeed | Promise<ZappFeed>;
+  getStaticComponentFeed: any;
   stickyHeaderIndices?: number[];
-  useScrollView?: boolean;
 };
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
 const getNearestValue = (value, optionA, optionB) =>
   Math.abs(value - optionA) < Math.abs(value - optionB) ? optionA : optionB;
 
@@ -62,14 +64,11 @@ function ComponentsMapComponent(props: Props) {
     riverId,
     getStaticComponentFeed,
     stickyHeaderIndices,
-    useScrollView,
   } = props;
 
   const flatListRef = React.useRef<FlatList | null>(null);
-  const scrollViewRef = React.useRef<ScrollView | null>(null);
   const flatListWrapperRef = React.useRef<View | null>(null);
   const hasUserScrolledRef = React.useRef(false);
-  const scrollEndReachedRef = React.useRef(false);
   const screenConfig = useScreenConfiguration(riverId);
   const screenData = useScreenData(riverId);
   const pullToRefreshEnabled = screenData?.rules?.pull_to_refresh_enabled;
@@ -88,7 +87,7 @@ function ComponentsMapComponent(props: Props) {
 
   const onLoadDone = React.useCallback(() => {
     logTimestamp(riverId?.toString());
-  }, [logTimestamp, riverId]);
+  }, [logTimestamp]);
 
   const { loadingState, onLoadFinished, onLoadFailed, shouldShowLoadingError } =
     useLoadingState(riverComponents.length, onLoadDone);
@@ -117,17 +116,7 @@ function ComponentsMapComponent(props: Props) {
         </ScreenLoadingMeasurementsListItemWrapper>
       );
     },
-    [
-      feed,
-      getStaticComponentFeed,
-      groupId,
-      isScreenWrappedInContainer,
-      loadingState,
-      onLoadFailed,
-      onLoadFinished,
-      riverComponents.length,
-      riverId,
-    ]
+    [feed, getStaticComponentFeed, onLoadFailed, onLoadFinished]
   );
 
   const screenStyle = React.useMemo(
@@ -149,13 +138,7 @@ function ComponentsMapComponent(props: Props) {
         R.prop("screen_padding_right")(theme)
       ),
     }),
-    [
-      screenConfig.paddingTop,
-      screenConfig.paddingBottom,
-      screenConfig.paddingLeft,
-      screenConfig.paddingRight,
-      theme,
-    ]
+    [riverId]
   );
 
   const handleOnLayout = React.useCallback(
@@ -190,50 +173,55 @@ function ComponentsMapComponent(props: Props) {
     canMomentum.current = true;
   }, []);
 
-  /* Snap the navbar to its expanded/collapsed state based on current offset. */
-  const snapToHeaderState = React.useCallback(
-    (rawOffsetY: number) => {
-      const { height: headerHeight, scrollState } = navBarStore.getState();
+  /* onMomentumScrollEnd: Handling snap to expanded/collapsed state ( for navbar ) */
+  const _onMomentumScrollEnd = React.useCallback(({ nativeEvent }) => {
+    if (!canMomentum.current) return;
+    canMomentum.current = false;
 
-      // Already fully expanded or fully collapsed — nothing to snap.
-      if (scrollState === 0 || scrollState === -headerHeight) return;
-      if (!flatListRef.current) return;
+    const { height: headerHeight, scrollState } = navBarStore.getState();
 
-      const offsetY = Math.max(0, rawOffsetY);
+    const offsetY = Math.max(0, nativeEvent.contentOffset.y);
 
-      const snapsToCollapsed =
+    if (
+      !(scrollState === 0 || scrollState === -headerHeight) &&
+      flatListRef.current
+    ) {
+      const offset =
         getNearestValue(Math.round(scrollState), -headerHeight, 0) ===
-        -headerHeight;
-
-      const offset = snapsToCollapsed
-        ? Math.round(offsetY + scrollState + headerHeight)
-        : Math.round(offsetY + scrollState);
+        -headerHeight
+          ? Math.round(offsetY + scrollState + headerHeight)
+          : Math.round(offsetY + scrollState);
+
+      flatListRef.current.scrollToOffset({
+        animated: true,
+        offset,
+      });
+    }
+  }, []);
 
-      flatListRef.current.scrollToOffset({ animated: true, offset });
-    },
-    [navBarStore]
-  );
+  /* onScrollEnd: Handling snap to expanded/collapsed state ( for navbar ) */
+  const _onScrollEndDrag = React.useCallback(({ nativeEvent }) => {
+    const { height: headerHeight, scrollState } = navBarStore.getState();
 
-  /* onMomentumScrollEnd: Handling snap to expanded/collapsed state ( for navbar ) */
-  const _onMomentumScrollEnd = React.useCallback(
-    ({ nativeEvent }) => {
-      if (!canMomentum.current) return;
-      canMomentum.current = false;
-      snapToHeaderState(nativeEvent.contentOffset.y);
-    },
-    [snapToHeaderState]
-  );
+    const offsetY = Math.max(0, nativeEvent.contentOffset.y);
 
-  /* onScrollEndDrag: Handling snap to expanded/collapsed state ( for navbar ) */
-  const _onScrollEndDrag = React.useCallback(
-    ({ nativeEvent }) => {
-      // Only snap on drag-end if there's no momentum to follow;
-      // otherwise _onMomentumScrollEnd handles it.
-      if (nativeEvent.velocity?.y !== 0) return;
-      snapToHeaderState(nativeEvent.contentOffset.y);
-    },
-    [snapToHeaderState]
-  );
+    if (
+      !(scrollState === 0 || scrollState === -headerHeight) &&
+      flatListRef.current &&
+      nativeEvent.velocity.y === 0
+    ) {
+      const offset =
+        getNearestValue(Math.round(scrollState), -headerHeight, 0) ===
+        -headerHeight
+          ? Math.round(offsetY + scrollState + headerHeight)
+          : Math.round(offsetY + scrollState);
+
+      flatListRef.current.scrollToOffset({
+        animated: true,
+        offset,
+      });
+    }
+  }, []);
 
   const onScroll = React.useCallback((event) => {
     hasUserScrolledRef.current = true;
@@ -257,42 +245,8 @@ function ComponentsMapComponent(props: Props) {
     }
   }, []);
 
-  const onScrollWithEndReached = React.useCallback(
-    (event) => {
-      onScroll(event);
-
-      if (!hasUserScrolledRef.current) return;
-      if (isScreenWrappedInContainer) return;
-
-      const {
-        nativeEvent: {
-          contentOffset: { y },
-          layoutMeasurement: { height },
-          contentSize: { height: contentHeight },
-        },
-      } = event;
-
-      const distanceFromEnd = contentHeight - y - height;
-
-      if (distanceFromEnd <= height * 0.5) {
-        if (!scrollEndReachedRef.current) {
-          scrollEndReachedRef.current = true;
-          emitScrollEndReached();
-        }
-      } else {
-        scrollEndReachedRef.current = false;
-      }
-    },
-    [onScroll, isScreenWrappedInContainer]
-  );
-
   const contentContainerStyle = React.useMemo(
-    () =>
-      isScreenWrappedInContainer
-        ? {
-            flexGrow: 1,
-          }
-        : screenStyle,
+    () => (isScreenWrappedInContainer ? {} : screenStyle),
     [isScreenWrappedInContainer, screenStyle]
   );
 
@@ -303,98 +257,61 @@ function ComponentsMapComponent(props: Props) {
   // TODO: support both "isScreenWrappedInContainer" and hasScreenPicker().
   // The Screen Picker in Mobile is completly different than the TV
   // so the various offsets / margins in TV do not apply here.
-  // Fix for WebView rerender crashes on Android API 28+
-  // https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-964035468
-  const sharedScrollProps = {
-    overScrollMode: isAndroid ? ("never" as const) : ("auto" as const),
-    scrollIndicatorInsets,
-    onLayout: handleOnLayout,
-    contentContainerStyle,
-    refreshControl,
-    onScrollBeginDrag,
-    onMomentumScrollEnd: _onMomentumScrollEnd,
-    onScrollEndDrag: _onScrollEndDrag,
-    scrollEventThrottle: 16,
-    ...scrollViewExtraProps,
-  };
-
-  const listContent = useScrollView ? (
-    <ScrollView
-      testID="components-map-scroll-view"
-      // ViewportTracker clones this child and calls its `ref` as a function
-      // (childrenRef.current.ref(node)), so a callback ref is required here
-      // — an object ref would throw "ref is not a function".
-      ref={(ref) => {
-        scrollViewRef.current = ref;
-      }}
-      onScroll={onScrollWithEndReached}
-      {...sharedScrollProps}
-    >
-      {riverComponents.map((item, index) => (
-        <React.Fragment key={keyExtractor(item)}>
-          {renderRiverItem({ item, index })}
-        </React.Fragment>
-      ))}
-      <RiverFooter
-        flatListHeight={flatListHeight}
-        loadingState={loadingState}
-      />
-    </ScrollView>
-  ) : (
-    <FlatList
-      testID="components-map-flat-list"
-      // ViewportTracker clones this child and calls its `ref` as a function
-      // (childrenRef.current.ref(node)), so a callback ref is required here
-      // — an object ref would throw "ref is not a function".
-      ref={(ref) => {
-        flatListRef.current = ref;
-      }}
-      extraData={feed}
-      stickyHeaderIndices={stickyHeaderIndices}
-      removeClippedSubviews={isAndroid}
-      initialNumToRender={3}
-      maxToRenderPerBatch={10}
-      windowSize={12}
-      keyExtractor={keyExtractor}
-      renderItem={renderRiverItem}
-      data={riverComponents}
-      ListFooterComponent={
-        <RiverFooter
-          flatListHeight={flatListHeight}
-          loadingState={loadingState}
-        />
-      }
-      onScroll={onScroll}
-      onEndReached={
-        /* TODO: end-reached detection is inconsistent between the two paths:
-        the ScrollView branch uses manual pixel-offset math (onScrollWithEndReached)
-        with a scrollEndReachedRef debounce, while this FlatList relies on the
-        native onEndReached. Consider unifying the threshold/debounce behavior. */
-        /* When wrapped in a parent ScrollView (e.g. tabs),
-        this FlatList doesn't scroll so onEndReached can fire repeatedly;
-        skip it here and let the parent ScrollView emit scroll-end instead. */
-        isScreenWrappedInContainer
-          ? undefined
-          : () => {
-              if (!hasUserScrolledRef.current) return;
-              emitScrollEndReached();
-            }
-      }
-      {...sharedScrollProps}
-    />
-  );
-
   return (
-    // Wrapper View exists only to expose a ref (via ComponentsMapRefContext)
-    // for measuring the list's position/height; it intentionally has no style.
-    <View ref={flatListWrapperRef}>
+    <View style={styles.container} ref={flatListWrapperRef}>
       <ComponentsMapHeightContext.Provider value={flatListHeight}>
         <ComponentsMapRefContext.Provider value={flatListWrapperRef}>
           <ScreenLoadingMeasurements
             riverId={riverId}
             numberOfComponents={riverComponents.length}
           >
-            <ViewportTracker>{listContent}</ViewportTracker>
+            <ViewportTracker>
+              <FlatList
+                testID="components-map-flat-list"
+                ref={(ref) => {
+                  flatListRef.current = ref;
+                }}
+                // Fix for WebView rerender crashes on Android API 28+
+                // https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-964035468
+                overScrollMode={isAndroid ? "never" : "auto"}
+                scrollIndicatorInsets={scrollIndicatorInsets}
+                extraData={feed}
+                stickyHeaderIndices={stickyHeaderIndices}
+                removeClippedSubviews={isAndroid}
+                onLayout={handleOnLayout}
+                initialNumToRender={3}
+                maxToRenderPerBatch={10}
+                windowSize={12}
+                keyExtractor={keyExtractor}
+                renderItem={renderRiverItem}
+                data={riverComponents}
+                contentContainerStyle={contentContainerStyle}
+                ListFooterComponent={
+                  <RiverFooter
+                    flatListHeight={flatListHeight}
+                    loadingState={loadingState}
+                  />
+                }
+                refreshControl={refreshControl}
+                onScrollBeginDrag={onScrollBeginDrag}
+                onScroll={onScroll}
+                onMomentumScrollEnd={_onMomentumScrollEnd}
+                onScrollEndDrag={_onScrollEndDrag}
+                scrollEventThrottle={16}
+                {...scrollViewExtraProps}
+                onEndReached={
+                  /* When wrapped in a parent ScrollView (e.g. tabs),
+                  this FlatList doesn't scroll so onEndReached can fire repeatedly;
+                  skip it here and let the parent ScrollView emit scroll-end instead. */
+                  isScreenWrappedInContainer
+                    ? undefined
+                    : () => {
+                        if (!hasUserScrolledRef.current) return;
+                        emitScrollEndReached();
+                      }
+                }
+              />
+            </ViewportTracker>
           </ScreenLoadingMeasurements>
         </ComponentsMapRefContext.Provider>
       </ComponentsMapHeightContext.Provider>

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

@@ -1,9 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`componentsMap renders renders components map correctly 1`] = `
-<View>
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
   <View
     onLayout={[Function]}
+    style={
+      {
+        "flex": 1,
+      }
+    }
   >
     <RCTScrollView
       ListFooterComponent={
@@ -156,6 +167,11 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         >
           <View
             onLayout={[Function]}
+            style={
+              {
+                "flex": 1,
+              }
+            }
           >
             <View />
           </View>
@@ -167,6 +183,11 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         >
           <View
             onLayout={[Function]}
+            style={
+              {
+                "flex": 1,
+              }
+            }
           />
         </View>
         <View

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-alpha.2628821467",
+  "version": "16.0.0-alpha.2851031376",
   "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": "16.0.0-alpha.2628821467",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-alpha.2628821467",
-    "@applicaster/zapp-react-native-redux": "16.0.0-alpha.2628821467",
-    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.2628821467",
+    "@applicaster/applicaster-types": "16.0.0-alpha.2851031376",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-alpha.2851031376",
+    "@applicaster/zapp-react-native-redux": "16.0.0-alpha.2851031376",
+    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.2851031376",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",