@applicaster/zapp-react-native-ui-components 16.0.0-rc.76 → 16.0.0-rc.78

package/Components/Cell/Cell.tsx

@@ -134,7 +134,7 @@ export class CellComponent extends React.Component<Props, State> {
     }
   }
 
-  onFocus(focusable, mouse) {
+  onFocus(focusable) {
     const {
       item: { id, title },
       shouldScrollVertically,
@@ -145,10 +145,7 @@ export class CellComponent extends React.Component<Props, State> {
     if (isFocusable) {
       this.setState({ cellFocused: true });
 
-      if (
-        shouldUpdate &&
-        shouldScrollVertically?.(mouse, focusable, id, title)
-      ) {
+      if (shouldUpdate && shouldScrollVertically?.(focusable, id, title)) {
         this.scrollVertically(focusable);
       }
     }
@@ -262,7 +259,7 @@ export class CellComponent extends React.Component<Props, State> {
     const handleFocus = (focusable, mouse) => {
       const focusFn = onFocus || noop;
       focusFn(focusable, mouse);
-      this.onFocus(focusable, mouse);
+      this.onFocus(focusable);
     };
 
     if (this.state.hasFocusableInside) {

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

@@ -0,0 +1,294 @@
+import {
+  looksLikeSkipExpression,
+  parseSkipExpression,
+  evaluateSkipExpression,
+} from "../skipExpression";
+
+jest.mock("../logger", () => ({
+  log_debug: jest.fn(),
+  log_error: jest.fn(),
+  log_info: jest.fn(),
+}));
+
+const TOKEN = "quick-brick-login-flow.access_token";
+const PROFILE = "user_account.profile";
+
+/**
+ * Stands in for `getKeyToSkipHook`: resolves a "namespace.key" store, so the
+ * expression evaluator is exercised against real lookups rather than mocks.
+ */
+const storage = (store: Record<string, unknown>) =>
+  jest.fn((key: string, namespace?: string) =>
+    Promise.resolve(store[`${namespace}.${key}`])
+  );
+
+const evaluate = (expression: unknown, store: Record<string, unknown> = {}) =>
+  evaluateSkipExpression(parseSkipExpression(expression), storage(store));
+
+describe("looksLikeSkipExpression", () => {
+  it("recognises a JSON object, whatever its content", () => {
+    expect(looksLikeSkipExpression('{"exists":"ns.key"}')).toBe(true);
+    expect(looksLikeSkipExpression('  {"exists":"ns.key"}  ')).toBe(true);
+    expect(looksLikeSkipExpression({ exists: "ns.key" })).toBe(true);
+  });
+
+  it("recognises a malformed expression, so it is never read as a key list", () => {
+    expect(looksLikeSkipExpression('{"any":')).toBe(true);
+  });
+
+  it("rejects a legacy comma-separated key list", () => {
+    expect(looksLikeSkipExpression("ns1.key1, ns2.key2")).toBe(false);
+  });
+
+  it("rejects empty and missing input", () => {
+    expect(looksLikeSkipExpression("")).toBe(false);
+    expect(looksLikeSkipExpression("   ")).toBe(false);
+    expect(looksLikeSkipExpression(undefined)).toBe(false);
+  });
+});
+
+describe("parseSkipExpression", () => {
+  it("parses a JSON string into an expression object", () => {
+    expect(parseSkipExpression('{"exists":"ns.key"}')).toEqual({
+      exists: "ns.key",
+    });
+  });
+
+  it("ignores leading and trailing whitespace around the JSON", () => {
+    expect(parseSkipExpression('  {"exists":"ns.key"}  ')).toEqual({
+      exists: "ns.key",
+    });
+  });
+
+  it("accepts an expression that is already an object", () => {
+    expect(parseSkipExpression({ exists: "ns.key" })).toEqual({
+      exists: "ns.key",
+    });
+  });
+
+  it("returns null for a legacy comma-separated key list", () => {
+    expect(parseSkipExpression("ns1.key1, ns2.key2")).toBeNull();
+  });
+
+  it("returns null for a malformed JSON object", () => {
+    expect(parseSkipExpression('{"exists":')).toBeNull();
+  });
+
+  it("returns null for empty and missing input", () => {
+    expect(parseSkipExpression("")).toBeNull();
+    expect(parseSkipExpression(undefined)).toBeNull();
+    expect(parseSkipExpression(null)).toBeNull();
+  });
+
+  it("returns null for a JSON array, which is not a valid expression", () => {
+    expect(parseSkipExpression('["ns.key"]')).toBeNull();
+  });
+});
+
+describe("evaluateSkipExpression", () => {
+  it("returns false when there is no expression", async () => {
+    await expect(evaluateSkipExpression(null, storage({}))).resolves.toBe(
+      false
+    );
+  });
+
+  describe("exists", () => {
+    it("is true when the key holds a value", async () => {
+      await expect(
+        evaluate({ exists: "ns.key" }, { "ns.key": "value" })
+      ).resolves.toBe(true);
+    });
+
+    it("is false when the key is absent", async () => {
+      await expect(evaluate({ exists: "ns.key" })).resolves.toBe(false);
+    });
+
+    it("is false when the key holds an empty string", async () => {
+      await expect(
+        evaluate({ exists: "ns.key" }, { "ns.key": "" })
+      ).resolves.toBe(false);
+    });
+
+    it("splits the namespace on the last dot, like the legacy format", async () => {
+      const readKey = storage({ "com.applicaster.feature.someKey": "value" });
+
+      await evaluateSkipExpression(
+        { exists: "com.applicaster.feature.someKey" },
+        readKey
+      );
+
+      expect(readKey).toHaveBeenCalledWith(
+        "someKey",
+        "com.applicaster.feature"
+      );
+    });
+
+    it("treats a bare string operand as a shorthand for exists", async () => {
+      await expect(
+        evaluateSkipExpression("ns.key", storage({ "ns.key": "value" }))
+      ).resolves.toBe(true);
+    });
+  });
+
+  describe("missing", () => {
+    it("is true when the key is absent", async () => {
+      await expect(evaluate({ missing: "ns.key" })).resolves.toBe(true);
+    });
+
+    it("is false when the key holds a value", async () => {
+      await expect(
+        evaluate({ missing: "ns.key" }, { "ns.key": "value" })
+      ).resolves.toBe(false);
+    });
+  });
+
+  describe("equals", () => {
+    it("is true when the stored value matches", async () => {
+      await expect(
+        evaluate(
+          { equals: { key: "ns.key", value: "kids" } },
+          { "ns.key": "kids" }
+        )
+      ).resolves.toBe(true);
+    });
+
+    it("is false when the stored value differs", async () => {
+      await expect(
+        evaluate(
+          { equals: { key: "ns.key", value: "kids" } },
+          { "ns.key": "adults" }
+        )
+      ).resolves.toBe(false);
+    });
+
+    it("compares a non-string stored value by its string form", async () => {
+      await expect(
+        evaluate({ equals: { key: "ns.key", value: "42" } }, { "ns.key": 42 })
+      ).resolves.toBe(true);
+    });
+  });
+
+  describe("all", () => {
+    it("is true only when every operand is true", async () => {
+      await expect(
+        evaluate({ all: ["ns.a", "ns.b"] }, { "ns.a": "1", "ns.b": "2" })
+      ).resolves.toBe(true);
+    });
+
+    it("is false when one operand is false", async () => {
+      await expect(
+        evaluate({ all: ["ns.a", "ns.b"] }, { "ns.a": "1" })
+      ).resolves.toBe(false);
+    });
+
+    it("stops reading storage after the first false operand", async () => {
+      const readKey = storage({ "ns.b": "2" });
+
+      await evaluateSkipExpression({ all: ["ns.a", "ns.b"] }, readKey);
+
+      expect(readKey).toHaveBeenCalledTimes(1);
+    });
+
+    it("is false for an empty operand list", async () => {
+      await expect(evaluate({ all: [] })).resolves.toBe(false);
+    });
+  });
+
+  describe("any", () => {
+    it("is true when one operand is true", async () => {
+      await expect(
+        evaluate({ any: ["ns.a", "ns.b"] }, { "ns.b": "2" })
+      ).resolves.toBe(true);
+    });
+
+    it("is false when every operand is false", async () => {
+      await expect(evaluate({ any: ["ns.a", "ns.b"] })).resolves.toBe(false);
+    });
+
+    it("stops reading storage after the first true operand", async () => {
+      const readKey = storage({ "ns.a": "1", "ns.b": "2" });
+
+      await evaluateSkipExpression({ any: ["ns.a", "ns.b"] }, readKey);
+
+      expect(readKey).toHaveBeenCalledTimes(1);
+    });
+
+    it("is false for an empty operand list", async () => {
+      await expect(evaluate({ any: [] })).resolves.toBe(false);
+    });
+  });
+
+  describe("not", () => {
+    it("inverts a true operand", async () => {
+      await expect(
+        evaluate({ not: "ns.key" }, { "ns.key": "value" })
+      ).resolves.toBe(false);
+    });
+
+    it("inverts a false operand", async () => {
+      await expect(evaluate({ not: "ns.key" })).resolves.toBe(true);
+    });
+  });
+
+  describe("malformed expressions fail open", () => {
+    it("is false for an unknown operator", async () => {
+      await expect(evaluate({ matches: "ns.key" })).resolves.toBe(false);
+    });
+
+    it("is false for an operator carrying the wrong operand type", async () => {
+      await expect(evaluate({ exists: 42 })).resolves.toBe(false);
+      await expect(evaluate({ all: "ns.key" })).resolves.toBe(false);
+    });
+
+    it("is false for an operand list holding a malformed node", async () => {
+      await expect(
+        evaluate({ all: ["ns.a", { matches: "ns.b" }] }, { "ns.a": "1" })
+      ).resolves.toBe(false);
+    });
+
+    it("is false when a storage read throws", async () => {
+      const readKey = jest.fn(() => Promise.reject(new Error("storage error")));
+
+      await expect(
+        evaluateSkipExpression({ exists: "ns.key" }, readKey)
+      ).resolves.toBe(false);
+    });
+
+    it("keeps evaluating the other operands when one storage read throws", async () => {
+      const readKey = jest.fn((key: string) =>
+        key === "a"
+          ? Promise.reject(new Error("storage error"))
+          : Promise.resolve("value")
+      );
+
+      await expect(
+        evaluateSkipExpression({ any: ["ns.a", "ns.b"] }, readKey)
+      ).resolves.toBe(true);
+    });
+  });
+
+  describe("profile selector scenario", () => {
+    const skipProfileSelector = {
+      any: [{ missing: TOKEN }, { exists: PROFILE }],
+    };
+
+    it("shows the hook to a logged-in user who has not picked a profile yet", async () => {
+      await expect(
+        evaluate(skipProfileSelector, { [TOKEN]: "a-token" })
+      ).resolves.toBe(false);
+    });
+
+    it("skips the hook for a logged-out user", async () => {
+      await expect(evaluate(skipProfileSelector)).resolves.toBe(true);
+    });
+
+    it("skips the hook once a profile has been picked", async () => {
+      await expect(
+        evaluate(skipProfileSelector, {
+          [TOKEN]: "a-token",
+          [PROFILE]: "profile-id",
+        })
+      ).resolves.toBe(true);
+    });
+  });
+});

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

@@ -122,3 +122,67 @@ describe("shouldSkipHook", () => {
     await expect(shouldSkipHook("ns1.key1, ns2.key2")).resolves.toBe(true);
   });
 });
+
+describe("shouldSkipHook with a packed expression", () => {
+  const SKIP_UNLESS_LOGGED_IN_WITHOUT_PROFILE = JSON.stringify({
+    any: [
+      { missing: "quick-brick-login-flow.access_token" },
+      { exists: "user_account.profile" },
+    ],
+  });
+
+  const storedKeys = (store: Record<string, string>) => {
+    mockSessionGetItem.mockImplementation((key, namespace) =>
+      Promise.resolve(store[`${namespace}.${key}`] ?? null)
+    );
+
+    mockLocalGetItem.mockResolvedValue(null);
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    storedKeys({});
+  });
+
+  it("does not skip for a logged-in user who has not picked a profile yet", async () => {
+    storedKeys({ "quick-brick-login-flow.access_token": "a-token" });
+
+    await expect(
+      shouldSkipHook(SKIP_UNLESS_LOGGED_IN_WITHOUT_PROFILE)
+    ).resolves.toBe(false);
+  });
+
+  it("skips for a logged-out user", async () => {
+    await expect(
+      shouldSkipHook(SKIP_UNLESS_LOGGED_IN_WITHOUT_PROFILE)
+    ).resolves.toBe(true);
+  });
+
+  it("skips once a profile has been picked", async () => {
+    storedKeys({
+      "quick-brick-login-flow.access_token": "a-token",
+      "user_account.profile": "profile-id",
+    });
+
+    await expect(
+      shouldSkipHook(SKIP_UNLESS_LOGGED_IN_WITHOUT_PROFILE)
+    ).resolves.toBe(true);
+  });
+
+  it("falls back to local storage for a key the session does not hold", async () => {
+    mockLocalGetItem.mockResolvedValue("a-token");
+
+    await expect(
+      shouldSkipHook(JSON.stringify({ exists: "ns.key" }))
+    ).resolves.toBe(true);
+
+    expect(mockSessionGetItem).toHaveBeenCalledWith("key", "ns");
+    expect(mockLocalGetItem).toHaveBeenCalledWith("key", "ns");
+  });
+
+  it("returns false for a malformed expression instead of reading storage", async () => {
+    await expect(shouldSkipHook('{"any":')).resolves.toBe(false);
+    expect(mockSessionGetItem).not.toHaveBeenCalled();
+    expect(mockLocalGetItem).not.toHaveBeenCalled();
+  });
+});

package/Components/GeneralContentScreen/hookAdapter/skipExpression.ts

@@ -0,0 +1,252 @@
+import { getNamespaceAndKey } from "@applicaster/zapp-react-native-utils/appUtils/contextKeysManager/utils";
+import { log_error, log_info } from "./logger";
+
+/**
+ * Boolean expressions over storage keys, used by the General Content Screen
+ * hook adapter to decide whether a hook should be skipped.
+ *
+ * The `skip_hook_storage_key` rule normally holds a comma-separated list of
+ * keys, meaning "skip when any of these exists". That covers presence only, so
+ * a condition such as "the user is logged in but has not picked a profile yet"
+ * cannot be expressed. To keep the manifest field untouched, an expression may
+ * be packed into the very same string as JSON: anything starting with `{` is
+ * parsed as an expression, anything else keeps the legacy behaviour.
+ *
+ * The expression evaluates to the SKIP condition — true means "do not present
+ * the hook" — matching the name of the rule it is configured in.
+ *
+ * Keys are written as `namespace.key` and resolved exactly like the legacy
+ * format: everything before the LAST dot is the namespace, so
+ * `com.applicaster.feature.someKey` reads `someKey` from `com.applicaster.feature`.
+ * A key with no dot falls back to the default namespace.
+ *
+ * Operators:
+ *
+ *   "ns.key"                              shorthand for { "exists": "ns.key" }
+ *   { "exists":  "ns.key" }               the key holds a truthy value
+ *   { "missing": "ns.key" }               the key holds no value
+ *   { "equals": { "key": "ns.key", "value": "kids" } }
+ *   { "all": [ …operands ] }              AND, short-circuits on the first false
+ *   { "any": [ …operands ] }              OR, short-circuits on the first true
+ *   { "not": operand }                    negation
+ *
+ * @example Show the profile selector to a logged-in user who has no profile yet
+ * ```json
+ * {
+ *   "any": [
+ *     { "missing": "quick-brick-login-flow.access_token" },
+ *     { "exists": "user_account.profile" }
+ *   ]
+ * }
+ * ```
+ * As it is stored in the `skip_hook_storage_key` string field:
+ * ```json
+ * "skip_hook_storage_key": "{\"any\":[{\"missing\":\"quick-brick-login-flow.access_token\"},{\"exists\":\"user_account.profile\"}]}"
+ * ```
+ *
+ * @example Skip an onboarding hook once it has been seen on a subscribed device
+ * ```json
+ * {
+ *   "all": [
+ *     "onboarding.completed",
+ *     { "equals": { "key": "user_account.plan", "value": "premium" } }
+ *   ]
+ * }
+ * ```
+ *
+ * Every failure mode — malformed JSON, an unknown operator, an operand of the
+ * wrong type, a storage read that throws — evaluates to false, so a broken
+ * configuration presents the hook rather than silently hiding a screen.
+ */
+export type SkipExpression =
+  | string
+  | { exists: string }
+  | { missing: string }
+  | { equals: { key: string; value: string } }
+  | { all: SkipExpression[] }
+  | { any: SkipExpression[] }
+  | { not: SkipExpression };
+
+/** Reads a single storage key. Injected so evaluation stays storage-agnostic. */
+export type ReadKey = (key: string, namespace?: string) => Promise<unknown>;
+
+const isPlainObject = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null && !Array.isArray(value);
+
+const hasOperator = (node: Record<string, unknown>, operator: string) =>
+  Object.prototype.hasOwnProperty.call(node, operator);
+
+/**
+ * Whether a `skip_hook_storage_key` value is meant as an expression at all.
+ *
+ * Deliberately a shape check rather than a successful parse: a value that opens
+ * with `{` was written as an expression even when its JSON is broken, and must
+ * never fall back to being read as a list of storage keys.
+ */
+export const looksLikeSkipExpression = (input: unknown): boolean =>
+  isPlainObject(input) ||
+  (typeof input === "string" && input.trim().startsWith("{"));
+
+/**
+ * Reads a `skip_hook_storage_key` value as an expression, or returns null when
+ * it is not one — an empty value, a legacy comma-separated key list, or an
+ * expression whose JSON is malformed.
+ */
+export const parseSkipExpression = (input: unknown): SkipExpression | null => {
+  if (isPlainObject(input)) {
+    return input as SkipExpression;
+  }
+
+  if (!looksLikeSkipExpression(input)) {
+    return null;
+  }
+
+  const trimmed = (input as string).trim();
+
+  try {
+    const parsed = JSON.parse(trimmed);
+
+    if (!isPlainObject(parsed)) {
+      log_error(
+        `parseSkipExpression: Expression must be an object, got: ${trimmed}`
+      );
+
+      return null;
+    }
+
+    return parsed as SkipExpression;
+  } catch (error) {
+    log_error(
+      `parseSkipExpression: Malformed expression: ${trimmed}. Error: ${error.message}`,
+      { error }
+    );
+
+    return null;
+  }
+};
+
+const keyIsTruthy = async (key: string, readKey: ReadKey): Promise<boolean> => {
+  const { namespace, key: name } = getNamespaceAndKey(key);
+
+  return Boolean(await readKey(name, namespace));
+};
+
+const evaluateEquals = async (
+  operand: { key: string; value: string },
+  readKey: ReadKey
+): Promise<boolean> => {
+  const { namespace, key: name } = getNamespaceAndKey(operand.key);
+  const value = await readKey(name, namespace);
+
+  return value == null ? false : String(value) === String(operand.value);
+};
+
+const evaluateNode = async (
+  node: SkipExpression,
+  readKey: ReadKey
+): Promise<boolean> => {
+  try {
+    if (typeof node === "string") {
+      return await keyIsTruthy(node, readKey);
+    }
+
+    if (!isPlainObject(node)) {
+      log_error(
+        `evaluateSkipExpression: Not an operator: ${JSON.stringify(node)}`
+      );
+
+      return false;
+    }
+
+    // The node came from configuration JSON, so every operand is read back as
+    // unknown and type-checked here rather than trusted from the union.
+    const operator = node as Record<string, unknown>;
+
+    if (
+      hasOperator(operator, "exists") &&
+      typeof operator.exists === "string"
+    ) {
+      return await keyIsTruthy(operator.exists, readKey);
+    }
+
+    if (
+      hasOperator(operator, "missing") &&
+      typeof operator.missing === "string"
+    ) {
+      return !(await keyIsTruthy(operator.missing, readKey));
+    }
+
+    if (hasOperator(operator, "equals") && isPlainObject(operator.equals)) {
+      return await evaluateEquals(
+        operator.equals as { key: string; value: string },
+        readKey
+      );
+    }
+
+    if (hasOperator(operator, "all") && Array.isArray(operator.all)) {
+      for (const operand of operator.all) {
+        if (!(await evaluateNode(operand, readKey))) {
+          return false;
+        }
+      }
+
+      // An empty operand list carries no condition, so it stays false rather
+      // than skipping the hook on the vacuous truth of an empty AND.
+      return operator.all.length > 0;
+    }
+
+    if (hasOperator(operator, "any") && Array.isArray(operator.any)) {
+      for (const operand of operator.any) {
+        if (await evaluateNode(operand, readKey)) {
+          return true;
+        }
+      }
+
+      return false;
+    }
+
+    if (hasOperator(operator, "not")) {
+      return !(await evaluateNode(operator.not as SkipExpression, readKey));
+    }
+
+    log_error(
+      `evaluateSkipExpression: Unknown or malformed operator: ${JSON.stringify(
+        node
+      )}`
+    );
+
+    return false;
+  } catch (error) {
+    log_error(
+      `evaluateSkipExpression: Error: ${error.message} evaluating: ${JSON.stringify(
+        node
+      )}`,
+      { error }
+    );
+
+    return false;
+  }
+};
+
+/**
+ * Evaluates a parsed expression to the skip decision. A null expression — the
+ * field held no expression — is not a condition, so nothing is skipped.
+ */
+export const evaluateSkipExpression = async (
+  expression: SkipExpression | null,
+  readKey: ReadKey
+): Promise<boolean> => {
+  if (!expression) {
+    return false;
+  }
+
+  const shouldSkip = await evaluateNode(expression, readKey);
+
+  log_info(
+    `evaluateSkipExpression: Expression evaluated to ${shouldSkip}, ${
+      shouldSkip ? "skipping hook" : "proceeding with hook"
+    }`
+  );
+
+  return shouldSkip;
+};

package/Components/GeneralContentScreen/hookAdapter/validationHelper.ts

@@ -1,6 +1,11 @@
 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 {
+  looksLikeSkipExpression,
+  parseSkipExpression,
+  evaluateSkipExpression,
+} from "./skipExpression";
 import { log_error, log_info } from "./logger";
 
 type ParseKey = { key: string; namespace?: string };
@@ -23,6 +28,12 @@ export const getKeyToSkipHook = async (key: string, namespace?: string) => {
   return await localStorage.getItem(key, namespace);
 };
 
+/**
+ * Decides whether the hook should be skipped, from the `skip_hook_storage_key`
+ * rule. The value is either a comma-separated key list — skip when ANY of them
+ * exists — or, packed into the same string, a JSON boolean expression over
+ * storage keys. See `skipExpression.ts` for the expression format.
+ */
 export const shouldSkipHook = async (
   skipHookIfKeysExist?: string
 ): Promise<boolean> => {
@@ -32,6 +43,13 @@ export const shouldSkipHook = async (
     return false;
   }
 
+  if (looksLikeSkipExpression(skipHookIfKeysExist)) {
+    return await evaluateSkipExpression(
+      parseSkipExpression(skipHookIfKeysExist),
+      getKeyToSkipHook
+    );
+  }
+
   const keyEntries = parseKeyEntries(skipHookIfKeysExist);
 
   if (keyEntries.length === 0) {

package/Components/ModalComponent/SortableList.web.tsx

@@ -1,37 +1,5 @@
 import React from "react";
-import { Text, View, ViewStyle, ScrollView } from "react-native";
-
-const DEFAULT_HEADERS: any[] = [];
-const DEFAULT_SORTABLE_DATA: any[] = [];
-
-const renderHeaderComponent = (component: any) => {
-  if (!component) return null;
-  if (React.isValidElement(component)) return component;
-
-  if (typeof component === "function") {
-    const HeaderComponent = component;
-
-    return <HeaderComponent />;
-  }
-
-  return null;
-};
-
-const SortableListHeader = ({
-  title,
-  style,
-}: {
-  title?: string;
-  style?: ViewStyle;
-}) => {
-  const displayTitle = typeof title === "string" ? title : String(title ?? "");
-
-  return (
-    <View style={style}>
-      {displayTitle ? <Text>{displayTitle}</Text> : null}
-    </View>
-  );
-};
+import type { ViewStyle } from "react-native";
 
 export type SortableListProps = {
   scrollViewStyle?: ViewStyle;
@@ -63,40 +31,4 @@ export type SortableListProps = {
   }) => void;
 };
 
-export const SortableList = ({
-  scrollViewStyle,
-  contentContainerStyle,
-  itemStyle,
-  headerStyle,
-  keyExtractor = (item, index) =>
-    `sortable-item-${item?.id ?? item?.title ?? index}`,
-  renderItem,
-  sortableData = DEFAULT_SORTABLE_DATA,
-  headers = DEFAULT_HEADERS,
-}: SortableListProps) => {
-  return (
-    <ScrollView
-      style={scrollViewStyle}
-      contentContainerStyle={contentContainerStyle}
-    >
-      {(headers || []).map((header, idx) => (
-        <View key={`static-header-${idx}`} style={headerStyle}>
-          {header.title ? (
-            <SortableListHeader title={header.title} />
-          ) : (
-            renderHeaderComponent(header.component)
-          )}
-        </View>
-      ))}
-      {(sortableData || []).map((item, index) => (
-        <View key={keyExtractor(item, index)} style={itemStyle}>
-          {renderItem({
-            item,
-            index,
-            renderHandle: (children) => children,
-          })}
-        </View>
-      ))}
-    </ScrollView>
-  );
-};
+export const SortableList = (_props: SortableListProps) => null;

package/Components/ModalComponent/__tests__/SortableList.web.test.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { SortableList } from "../SortableList.web";
+
+describe("SortableList.web", () => {
+  it("renders nothing", () => {
+    const { toJSON } = render(
+      <SortableList
+        renderItem={() => null}
+        sortableData={[{ id: "1", title: "Track 1" }]}
+      />
+    );
+
+    expect(toJSON()).toBeNull();
+  });
+});

package/Components/ScreenRevealManager/ScreenRevealManager.ts

@@ -42,9 +42,25 @@ export class ScreenRevealManager {
   private subject$ = new Subject<void>();
   private subscription: Subscription;
 
-  constructor(componentsToRender: ZappUIComponent[], callback: Callback) {
+  /**
+   * @param initialNumberToLoad how many components to wait for before revealing
+   * the screen. Staggering exists so a screen full of network-backed components
+   * does not load them all at once. A caller that has nothing to stagger - see
+   * `disableIncrementalLoading` on the HOC - passes the full count here so the
+   * reveal waits for exactly what gets rendered. Omitted, the count is derived
+   * from the components themselves.
+   */
+  constructor(
+    componentsToRender: ZappUIComponent[],
+    callback: Callback,
+    initialNumberToLoad?: number
+  ) {
     this.numberOfComponentsWaitToLoadBeforePresent =
-      getNumberOfComponentsWaitToLoadBeforePresent(componentsToRender);
+      initialNumberToLoad == null
+        ? getNumberOfComponentsWaitToLoadBeforePresent(componentsToRender)
+        : // Clamped like the computed path: waiting for components that do not
+          // exist would hold the screen behind its overlay until the timeout.
+          Math.min(initialNumberToLoad, componentsToRender.length);
 
     this.renderingState = makeListOf<ComponentLoadingState>(
       COMPONENT_LOADING_STATE.UNKNOWN,

package/Components/ScreenRevealManager/__tests__/ScreenRevealManager.test.ts

@@ -22,6 +22,42 @@ import { makeListOf } from "@applicaster/zapp-react-native-utils/arrayUtils";
 import { isFirstComponentGallery } from "@applicaster/zapp-react-native-utils/componentsUtils";
 import { withTimeout$ } from "@applicaster/zapp-react-native-utils/idleUtils";
 
+describe("ScreenRevealManager explicit component count", () => {
+  beforeEach(() => {
+    (isFirstComponentGallery as jest.Mock).mockReturnValue(false);
+
+    (makeListOf as jest.Mock).mockImplementation((value, length) =>
+      Array(length).fill(value)
+    );
+
+    (withTimeout$ as jest.Mock).mockReturnValue(new Subject());
+  });
+
+  it("waits for the number of components it is given, not the computed default", () => {
+    const components = Array(6).fill({}) as any;
+
+    const manager = new ScreenRevealManager(components, jest.fn(), 6);
+
+    expect(manager.numberOfComponentsWaitToLoadBeforePresent).toBe(6);
+  });
+
+  it("never waits for more components than it was handed", () => {
+    const components = Array(3).fill({}) as any;
+
+    const manager = new ScreenRevealManager(components, jest.fn(), 10);
+
+    expect(manager.numberOfComponentsWaitToLoadBeforePresent).toBe(3);
+  });
+
+  it("falls back to the computed default when given no explicit count", () => {
+    const components = Array(6).fill({}) as any;
+
+    const manager = new ScreenRevealManager(components, jest.fn());
+
+    expect(manager.numberOfComponentsWaitToLoadBeforePresent).toBe(3);
+  });
+});
+
 describe("ScreenRevealManager", () => {
   let mockCallback: jest.Mock;
   let timeout$: Subject<void>;

package/Components/ScreenRevealManager/__tests__/withScreenRevealManager.test.tsx

@@ -9,6 +9,12 @@ import {
   TIMEOUT,
 } from "../withScreenRevealManager";
 
+jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  useTheme: () => ({ app_background_color: "#000000" }),
+}));
+
+jest.mock("../Overlay", () => ({ Overlay: () => null }));
+
 // jest.mock("react-native/Libraries/Animated/NativeAnimatedHelper");
 
 const MockComponent = ({
@@ -37,6 +43,56 @@ const MockComponent = ({
 
 const WrappedComponent = withScreenRevealManager(MockComponent);
 
+describe("withScreenRevealManager disableIncrementalLoading", () => {
+  const components = (count: number) =>
+    Array(count).fill({ component_type: "grid-qb" });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("asks for every component at once when incremental loading is disabled", () => {
+    render(
+      <WrappedComponent
+        componentsToRender={components(6)}
+        disableIncrementalLoading
+      />
+    );
+
+    expect(screen.getByTestId("mock-component").props.initialNumberToLoad).toBe(
+      6
+    );
+  });
+
+  it("still tracks the component count after it changes", () => {
+    const { rerender } = render(
+      <WrappedComponent
+        componentsToRender={components(6)}
+        disableIncrementalLoading
+      />
+    );
+
+    rerender(
+      <WrappedComponent
+        componentsToRender={components(9)}
+        disableIncrementalLoading
+      />
+    );
+
+    expect(screen.getByTestId("mock-component").props.initialNumberToLoad).toBe(
+      9
+    );
+  });
+
+  it("loads incrementally when the flag is not set", () => {
+    render(<WrappedComponent componentsToRender={components(6)} />);
+
+    expect(screen.getByTestId("mock-component").props.initialNumberToLoad).toBe(
+      3
+    );
+  });
+});
+
 describe.skip("withScreenRevealManager", () => {
   beforeEach(() => {
     jest.clearAllMocks();

package/Components/ScreenRevealManager/withScreenRevealManager.tsx

@@ -21,11 +21,23 @@ export const SHOWN = 1; // opacity = 1
 type Props = {
   componentsToRender: ZappUIComponent[];
   backgroundColor?: string;
+  /**
+   * Renders every component at once instead of revealing them a few at a time.
+   *
+   * For a screen that builds its own components and holds all of them already -
+   * a form, say - staggering buys nothing and costs: each rebuild of the list
+   * tears it back down to the first few and lets the rest crawl in again.
+   *
+   * This is a flag rather than a count on purpose. A count would have to be
+   * re-read whenever the number of components changes, while "do not stagger"
+   * stays true whatever the screen ends up holding.
+   */
+  disableIncrementalLoading?: boolean;
 };
 
 export const withScreenRevealManager = (Component) => {
   return function WithScreenRevealManager(props: Props) {
-    const { componentsToRender } = props;
+    const { componentsToRender, disableIncrementalLoading } = props;
 
     const [isContentReadyToBeShown, setIsContentReadyToBeShown] =
       React.useState(false);
@@ -42,7 +54,8 @@ export const withScreenRevealManager = (Component) => {
       () =>
         new ScreenRevealManager(
           componentsToRender,
-          handleSetIsContentReadyToBeShown
+          handleSetIsContentReadyToBeShown,
+          disableIncrementalLoading ? componentsToRender.length : undefined
         )
     );
 
@@ -80,7 +93,11 @@ export const withScreenRevealManager = (Component) => {
         <Component
           {...props}
           initialNumberToLoad={
-            managerRef.current.numberOfComponentsWaitToLoadBeforePresent
+            // Recomputed on every render, so the count follows the components
+            // even though the manager settled its own expectation at mount.
+            disableIncrementalLoading
+              ? componentsToRender.length
+              : managerRef.current.numberOfComponentsWaitToLoadBeforePresent
           }
           onLoadFinishedFromScreenRevealManager={
             managerRef.current.onLoadFinished

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-rc.76",
+  "version": "16.0.0-rc.78",
   "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-rc.76",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.76",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.76",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.76",
+    "@applicaster/applicaster-types": "16.0.0-rc.78",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.78",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.78",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.78",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "react-native-sortables": "1.7.1",