@applicaster/zapp-react-native-ui-components 16.0.0-rc.21 → 16.0.0-rc.23

package/Components/Layout/FullWidthRow.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+
+const styles = StyleSheet.create({
+  row: { flexDirection: "row" },
+  basis: {
+    maxWidth: "100%",
+    flexBasis: "100%",
+  },
+});
+
+type Props = {
+  children: React.ReactNode;
+};
+
+/**
+ * Constrains its child to exactly the available parent width.
+ *
+ * UI components such as Hero and List render their items inside a parent
+ * `ScrollView` (e.g. when wrapped by tabs). A child placed directly in a
+ * scroll container can size itself to its own content rather than to the
+ * viewport, which causes items to be measured at a stale width and resize
+ * unexpectedly after layout changes such as device rotation.
+ *
+ * Wrapping the content in a `flexDirection: "row"` parent with a
+ * `flexBasis: "100%"` / `maxWidth: "100%"` child forces the child to
+ * re-derive its width from the parent on every layout pass instead of
+ * caching a measured pixel width, keeping it full-width and stable.
+ *
+ * @param children - The content to render at full parent width.
+ */
+export function FullWidthRow({ children }: Props) {
+  return (
+    <View style={styles.row}>
+      <View style={styles.basis}>{children}</View>
+    </View>
+  );
+}

package/Components/MasterCell/dataAdapter.ts

@@ -1,5 +1,6 @@
 import * as R from "ramda";
 import { isFunction } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
 import { functionForName } from "./MappingFunctions";
 import { resolveColor } from "./utils";
@@ -52,7 +53,8 @@ export function configInflater(
     additionalProps?: Record<string, any>;
     data?: Array<{ propName: string; func: Function; args: any[] }>;
     elements?: any[];
-  }
+  },
+  allowDynamicColorsOutsideExtensions: boolean
 ) {
   const props = data.reduce(
     (acc, curr) => {
@@ -68,13 +70,13 @@ export function configInflater(
 
   if (Array.isArray(elements)) {
     adjustedElements = elements.map((element) =>
-      configInflater(entry, element as any)
+      configInflater(entry, element as any, allowDynamicColorsOutsideExtensions)
     );
   }
 
   return {
     type,
-    style: resolveColor(entry, style),
+    style: resolveColor(entry, style, allowDynamicColorsOutsideExtensions),
     props,
     elements: adjustedElements,
   };
@@ -98,9 +100,17 @@ function resolveElementsNode(entry, state, elements) {
 }
 
 export function defaultDataAdapter(elements) {
-  return function elementsBuilder({ entry, state = "default" }) {
+  return function elementsBuilder({
+    entry,
+    state = "default",
+    allowDynamicColorsOutsideExtensions,
+  }) {
     return resolveElementsNode(entry, state, elements).map((element) =>
-      configInflater(entry, element)
+      configInflater(
+        entry,
+        element,
+        toBooleanWithDefaultFalse(allowDynamicColorsOutsideExtensions)
+      )
     );
   };
 }

package/Components/MasterCell/index.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import { v4 as uuid } from "uuid";
 
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { useScreenState } from "@applicaster/zapp-react-native-utils/screenState";
 import { defaultComponents } from "./DefaultComponents";
 import { defaultDataAdapter } from "./dataAdapter";
@@ -65,6 +66,7 @@ export function masterCellBuilder({
    */
   function MasterCell({ item, state, ...otherProps }: Props) {
     const { screenData } = useRoute();
+    const theme = useTheme();
 
     const screenId =
       screenData && "targetScreen" in screenData
@@ -85,8 +87,15 @@ export function masterCellBuilder({
         elementsBuilder({
           entry: item,
           state: getEntryState(state, entryIsSelected),
+          allowDynamicColorsOutsideExtensions:
+            theme?.allow_dynamic_colors_outside_extensions,
         }),
-      [state, item, entryIsSelected] // Assuming that item won't mutate
+      [
+        state,
+        item,
+        entryIsSelected,
+        theme?.allow_dynamic_colors_outside_extensions,
+      ] // Assuming that item won't mutate
     );
 
     const wrapperRef = React.useRef(null);

package/Components/MasterCell/utils/__tests__/resolveColor.test.js

@@ -1,194 +1,231 @@
 import { resolveColor } from "..";
-import { masterCellLogger } from "../../logger";
-
-const loggerSpy = jest
-  .spyOn(masterCellLogger, "warn")
-  .mockImplementation(() => {});
 
 describe("resolveColor", () => {
   const entry = {
     extensions: {
       color: "red",
       green_color: "green",
+      float_alpha_color: "rgba(239,239,239,1.0)",
+      invalid_color: "not_a_color",
     },
+    background_color: "#123456",
   };
 
-  beforeEach(() => {
-    loggerSpy.mockClear();
-  });
-
-  it("resolve color with path", () => {
-    const style = {
-      color: "extensions.color",
-    };
+  describe("default behavior (resolves extensions paths via pathOr, passes through literals)", () => {
+    it("resolves color from extensions data mapping path", () => {
+      const style = {
+        color: "extensions.color",
+      };
 
-    expect(resolveColor(entry, style)).toEqual({
-      color: entry.extensions.color,
+      expect(resolveColor(entry, style)).toEqual({
+        color: entry.extensions.color,
+      });
     });
-  });
 
-  it("logs a warning when path is undefined", () => {
-    const style = {
-      color: "invalid_path",
-    };
+    it("passes through non-extensions values as raw color strings", () => {
+      const style = {
+        color: "invalid_path",
+      };
 
-    expect(resolveColor(entry, style)).toEqual({
-      color: undefined,
+      expect(resolveColor(entry, style)).toEqual({
+        color: "invalid_path",
+      });
     });
 
-    expect(loggerSpy).toHaveBeenCalledWith(
-      expect.objectContaining({
-        message: "Cannot resolve property invalid_path from the entry.",
-        data: {
-          colorFromProp: "invalid_path",
-          configurationValue: "invalid_path",
-        },
-      })
-    );
-  });
-
-  it("resolves any style prop with containing color", () => {
-    const style = {
-      backgroundColor: "extensions.color",
-      width: "100%",
-      borderColor: "extensions.green_color",
-    };
+    it("passes through entry path keys outside extensions prefix as raw color strings", () => {
+      const style = {
+        color: "background_color",
+      };
 
-    expect(resolveColor(entry, style)).toEqual({
-      backgroundColor: "red",
-      borderColor: "green",
-      width: "100%",
+      expect(resolveColor(entry, style)).toEqual({
+        color: "background_color",
+      });
     });
-  });
 
-  it("not replace color with in hex format", () => {
-    const style = {
-      color: "#000000",
-    };
+    it("resolves all color-related style props from extensions paths", () => {
+      const style = {
+        backgroundColor: "extensions.color",
+        width: "100%",
+        borderColor: "extensions.green_color",
+      };
 
-    expect(resolveColor(entry, style)).toEqual(style);
-  });
+      expect(resolveColor(entry, style)).toEqual({
+        backgroundColor: "red",
+        borderColor: "green",
+        width: "100%",
+      });
+    });
 
-  it("not replace color with in rgda format", () => {
-    const style = {
-      color: "rgba(0,0,0,0)",
-    };
+    it("passes through literal hex color values unchanged", () => {
+      const style = {
+        color: "#000000",
+      };
 
-    expect(resolveColor(entry, style)).toEqual(style);
-  });
+      expect(resolveColor(entry, style)).toEqual(style);
+    });
 
-  it("doesn't replace transparent as a color", () => {
-    const style = {
-      color: "transparent",
-    };
+    it("passes through literal rgba color values unchanged", () => {
+      const style = {
+        color: "rgba(0,0,0,0)",
+      };
 
-    expect(resolveColor(entry, style)).toEqual(style);
-  });
+      expect(resolveColor(entry, style)).toEqual(style);
+    });
 
-  it("return nil if style is nil", () => {
-    const style = undefined;
+    it("passes through literal rgba values with float alpha unchanged", () => {
+      const style = {
+        color: "rgba(239,239,239,1.0)",
+      };
 
-    expect(resolveColor(entry, style)).toBeUndefined();
-  });
+      expect(resolveColor(entry, style)).toEqual(style);
+    });
+
+    it("passes through transparent as a literal color value", () => {
+      const style = {
+        color: "transparent",
+      };
 
-  it("not modify style without color prop", () => {
-    const style = {
-      test: 1,
-    };
+      expect(resolveColor(entry, style)).toEqual(style);
+    });
 
-    expect(resolveColor(entry, style)).toEqual(style);
-  });
+    it("passes through named color values as literal colors", () => {
+      const style = {
+        color: "black",
+      };
 
-  it("not modify style with not existing path", () => {
-    const style = {
-      color: "not.exist.path",
-    };
+      expect(resolveColor(entry, style)).toEqual(style);
+    });
 
-    expect(resolveColor(entry, style)).toEqual({
-      color: undefined,
+    it("returns style unchanged when style is undefined", () => {
+      expect(resolveColor(entry, undefined)).toBeUndefined();
     });
-  });
 
-  it("not modify style with empty path", () => {
-    const style = {
-      color: "",
-    };
+    it("returns style unchanged when style is null", () => {
+      expect(resolveColor(entry, null)).toBeNull();
+    });
 
-    expect(resolveColor(entry, style)).toEqual(style);
-  });
+    it("returns style unchanged when it has no color-related props", () => {
+      const style = {
+        test: 1,
+      };
 
-  describe("memoization", () => {
-    beforeEach(() => {
-      // Clear memoization cache before each test
-      resolveColor.clear && resolveColor.clear();
+      expect(resolveColor(entry, style)).toEqual(style);
     });
 
-    it("hits cache with same entry and style references", () => {
-      const style = { color: "extensions.color" };
+    it("returns null when extensions path is missing from entry", () => {
+      const style = {
+        color: "extensions.missing.path",
+      };
 
-      const result1 = resolveColor(entry, style);
-      const result2 = resolveColor(entry, style);
+      expect(resolveColor(entry, style)).toEqual({
+        color: null,
+      });
+    });
+
+    it("returns resolved extensions path value without validating color", () => {
+      const style = {
+        color: "extensions.invalid_color",
+      };
 
-      expect(result1).toBe(result2); // Same object reference
+      expect(resolveColor(entry, style)).toEqual({
+        color: "not_a_color",
+      });
     });
 
-    it("hits cache with new references but equal entry/style values", () => {
-      const entryClone = {
-        extensions: {
-          color: "red",
-          green_color: "green",
-        },
+    it("passes through empty string color values unchanged", () => {
+      const style = {
+        color: "",
       };
 
-      const style = { color: "extensions.color" };
-      const styleClone = { color: "extensions.color" };
+      expect(resolveColor(entry, style)).toEqual({
+        color: "",
+      });
+    });
 
-      const result1 = resolveColor(entry, style);
-      const result2 = resolveColor(entryClone, styleClone);
+    it("resolves rgba color values with float alpha from extensions path", () => {
+      const style = {
+        color: "extensions.float_alpha_color",
+      };
 
-      expect(result1).toBe(result2);
+      expect(resolveColor(entry, style)).toEqual({
+        color: "rgba(239,239,239,1.0)",
+      });
     });
+  });
 
-    it("misses cache when entry is new object", () => {
-      const entry2 = { extensions: { color: "blue" } }; // Same values, different object
-      const style = { color: "extensions.color" };
+  describe("when allowDynamicColorsOutsideExtensions is enabled (resolves via resolveColorForProp with validation)", () => {
+    it("resolves entry paths outside the extensions prefix", () => {
+      const style = {
+        color: "background_color",
+      };
+
+      expect(resolveColor(entry, style, true)).toEqual({
+        color: "#123456",
+      });
+    });
 
-      const result1 = resolveColor(entry, style);
-      const result2 = resolveColor(entry2, style);
+    it("resolves extensions paths through resolveColorForProp", () => {
+      const style = {
+        color: "extensions.color",
+      };
 
-      expect(result1).not.toBe(result2); // Different object references
+      expect(resolveColor(entry, style, true)).toEqual({
+        color: "red",
+      });
     });
 
-    it("misses cache when entry property changes", () => {
-      const myEntry = {
-        extensions: {
-          color: "red",
-          green_color: "green",
-        },
+    it("returns null for invalid entry paths that cannot be resolved", () => {
+      const style = {
+        color: "invalid_path",
       };
 
-      const style = { color: "extensions.color" };
+      expect(resolveColor(entry, style, true)).toEqual({
+        color: null,
+      });
+    });
 
-      const result1 = resolveColor(myEntry, style);
+    it("returns null when extensions path cannot be resolved to a valid color", () => {
+      const style = {
+        color: "extensions.missing.path",
+      };
 
-      myEntry.extensions.color = "blue"; // Change property
-      const result2 = resolveColor(myEntry, style);
+      expect(resolveColor(entry, style, true)).toEqual({
+        color: null,
+      });
+    });
 
-      expect(result1).toEqual({ color: "red" });
-      expect(result2).toEqual({ color: "blue" });
-      expect(result1).not.toBe(result2);
+    it("passes through literal color values unchanged", () => {
+      const style = {
+        color: "#000000",
+        backgroundColor: "rgba(239,239,239,1.0)",
+        borderColor: "transparent",
+      };
+
+      expect(resolveColor(entry, style, true)).toEqual(style);
     });
 
-    it("misses cache when style changes", () => {
-      const style1 = { color: "extensions.color" };
-      const style2 = { backgroundColor: "extensions.color" };
+    it("passes through empty string color values unchanged", () => {
+      const style = {
+        color: "",
+      };
+
+      expect(resolveColor(entry, style, true)).toEqual({
+        color: "",
+      });
+    });
 
-      const result1 = resolveColor(entry, style1);
-      const result2 = resolveColor(entry, style2);
+    it("resolves multiple color-related style props from entry paths", () => {
+      const style = {
+        backgroundColor: "background_color",
+        borderColor: "extensions.green_color",
+        width: "100%",
+      };
 
-      expect(result1).toEqual({ color: "red" });
-      expect(result2).toEqual({ backgroundColor: "red" });
-      expect(result1).not.toBe(result2);
+      expect(resolveColor(entry, style, true)).toEqual({
+        backgroundColor: "#123456",
+        borderColor: "green",
+        width: "100%",
+      });
     });
   });
 });

package/Components/MasterCell/utils/__tests__/resolveColorForProp.test.js

@@ -0,0 +1,92 @@
+import { resolveColorForProp } from "..";
+
+jest.mock("../../logger", () => ({
+  masterCellLogger: {
+    warn: jest.fn(),
+  },
+}));
+
+import { masterCellLogger } from "../../logger";
+
+describe("resolveColorForProp", () => {
+  const entry = {
+    extensions: {
+      color: "red",
+      green_color: "green",
+      float_alpha_color: "rgba(239,239,239,1.0)",
+    },
+    background_color: "#123456",
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("returns undefined when colorFromProp is undefined", () => {
+    expect(resolveColorForProp(entry, undefined)).toBeUndefined();
+  });
+
+  it("returns undefined when colorFromProp is empty string", () => {
+    expect(resolveColorForProp(entry, "")).toBeUndefined();
+  });
+
+  it("resolves color from extensions data mapping path", () => {
+    expect(resolveColorForProp(entry, "extensions.color")).toBe("red");
+  });
+
+  it("resolves color from nested entry path", () => {
+    expect(resolveColorForProp(entry, "background_color")).toBe("#123456");
+  });
+
+  it("returns valid hex color values", () => {
+    expect(resolveColorForProp(entry, "#000000")).toBe("#000000");
+  });
+
+  it("returns valid rgba color values", () => {
+    expect(resolveColorForProp(entry, "rgba(0,0,0,0)")).toBe("rgba(0,0,0,0)");
+  });
+
+  it("returns valid named color values", () => {
+    expect(resolveColorForProp(entry, "transparent")).toBe("transparent");
+    expect(resolveColorForProp(entry, "black")).toBe("black");
+  });
+
+  it("returns undefined for invalid non-entry color values", () => {
+    expect(resolveColorForProp(entry, "invalid_path")).toBeUndefined();
+
+    expect(masterCellLogger.warn).toHaveBeenCalledWith({
+      message: "Cannot resolve property invalid_path from the entry.",
+      data: {
+        configurationValue: "invalid_path",
+        colorFromProp: "invalid_path",
+      },
+    });
+  });
+
+  it("returns undefined when extensions path is missing", () => {
+    expect(
+      resolveColorForProp(entry, "extensions.missing.path")
+    ).toBeUndefined();
+
+    expect(masterCellLogger.warn).toHaveBeenCalledWith({
+      message:
+        "Cannot resolve property extensions.missing.path from the entry.",
+      data: {
+        configurationValue: "extensions.missing.path",
+        colorFromProp: "extensions.missing.path",
+      },
+    });
+  });
+
+  it("resolves rgba color values with float alpha from entry path", () => {
+    expect(resolveColorForProp(entry, "extensions.float_alpha_color")).toBe(
+      "rgba(239,239,239,1.0)"
+    );
+  });
+
+  it("returns valid rgba color values with float alpha", () => {
+    expect(resolveColorForProp(entry, "rgba(239,239,239,1.0)")).toBe(
+      "rgba(239,239,239,1.0)"
+    );
+  });
+});

package/Components/MasterCell/utils/index.ts

@@ -1,22 +1,23 @@
 import React, { useMemo } from "react";
 import * as R from "ramda";
-import validateColor from "validate-color";
+import memoizee from "memoizee";
+
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
-
-import { masterCellLogger } from "../logger";
-import { getCellState } from "../../Cell/utils";
+import { isValidColor } from "@applicaster/zapp-react-native-utils/colorUtils";
 import { getColorFromData } from "@applicaster/zapp-react-native-utils/cellUtils";
-import { get } from "@applicaster/zapp-react-native-utils/utils";
-import { isCellSelected, useBehaviorUpdate } from "./behaviorProvider";
+import { pathOr, get, isNil } from "@applicaster/zapp-react-native-utils/utils";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
-import memoizee from "memoizee";
-import stringify from "fast-json-stable-stringify";
+import { isNotEmptyString } from "@applicaster/zapp-react-native-utils/stringUtils";
+import { masterCellLogger } from "../logger";
+import { getCellState } from "../../Cell/utils";
+import { isCellSelected, useBehaviorUpdate } from "./behaviorProvider";
 import { DataProvider } from "../DefaultComponents/DataProvider";
 
 const hasElementSpecificViewType = (viewType) => (element) => {
-  if (R.isNil(element)) {
+  if (isNil(element)) {
     return false;
   }
 
@@ -28,12 +29,20 @@ const hasElementSpecificViewType = (viewType) => (element) => {
   return hasElementsSpecificViewType(viewType)(element.elements);
 };
 
+export const hasElementsSpecificViewType = (viewType) => (elements) => {
+  if (isNilOrEmpty(elements)) {
+    return false;
+  }
+
+  return R.any(hasElementSpecificViewType(viewType))(elements);
+};
+
 const logWarning = (
   colorValueFromCellStyle,
   colorFromProp,
   colorValueFromEntry
 ) => {
-  if (R.isNil(colorValueFromEntry)) {
+  if (isNil(colorValueFromEntry)) {
     masterCellLogger.warn({
       message: `Cannot resolve property ${colorValueFromCellStyle} from the entry.`,
       data: {
@@ -44,15 +53,10 @@ const logWarning = (
   }
 };
 
-export const hasElementsSpecificViewType = (viewType) => (elements) => {
-  if (R.isNil(elements) || R.isEmpty(elements)) {
-    return false;
-  }
-
-  return R.any(hasElementSpecificViewType(viewType))(elements);
-};
-
-function resolveColorForProp(entry: any, colorFromProp: string | undefined) {
+export function resolveColorForProp(
+  entry: any,
+  colorFromProp: string | undefined
+) {
   if (!colorFromProp) {
     return undefined;
   }
@@ -62,9 +66,7 @@ function resolveColorForProp(entry: any, colorFromProp: string | undefined) {
     colorFromProp.split(".")
   );
 
-  const color = colorFromProp.replace(".00", "").replace(".0", ""); // https://github.com/dreamyguy/validate-color/issues/44
-
-  if (nestedEntryValue === undefined && !validateColor(color)) {
+  if (nestedEntryValue === undefined && !isValidColor(colorFromProp)) {
     logWarning(colorFromProp, colorFromProp, nestedEntryValue);
 
     return undefined;
@@ -86,36 +88,73 @@ function resolveColorForProp(entry: any, colorFromProp: string | undefined) {
 
 const getColorKeys = memoizee((style) => {
   const styleKeys = Object.keys(style);
-  const colorKeys = styleKeys.filter((key) => /color/i.test(key));
 
-  return colorKeys;
+  return styleKeys.filter((key) => /color/i.test(key));
 });
 
-export const resolveColor = memoizee(
-  (entry, style) => {
-    if (style === null || style === undefined) {
-      return style;
-    }
+/**
+ * A color style value is either a literal color (e.g. "#FFFFFF") or a
+ * data-mapping path into the entry. Data mappings always point at the entry
+ * `extensions` object (e.g. "extensions.brandColor"), so we only need to do a
+ * path lookup when the value starts with "extensions" — everything else is a
+ * literal color and can be returned as-is.
+ *
+ * This avoids the previous, very expensive approach that ran `validateColor`
+ * on every value and memoized on a full `fast-json-stable-stringify` of the
+ * entire entry.
+ */
+const EXTENSIONS_PREFIX = "extensions";
+
+const isDataMappingPath = (value: string): boolean =>
+  typeof value === "string" && value.startsWith(EXTENSIONS_PREFIX);
+
+export const resolveColor = (
+  entry,
+  style,
+  allowDynamicColorsOutsideExtensions
+) => {
+  if (style === null || style === undefined) {
+    return style;
+  }
+
+  const colorKeys = getColorKeys(style);
+
+  if (colorKeys.length === 0) {
+    return style;
+  }
+
+  return colorKeys.reduce(
+    (acc, key) => {
+      const value = acc[key];
 
-    return getColorKeys(style).reduce(
-      (acc, value) => {
-        if (acc[value] && typeof acc[value] === "string") {
-          const colorStyle = resolveColorForProp(entry, acc[value]);
+      // 1. The Expensive Edge-Case (Only for the app with root mappings)
+      if (allowDynamicColorsOutsideExtensions && isNotEmptyString(value)) {
+        const possibleColor = resolveColorForProp(entry, value);
 
-          acc[value] = colorStyle;
-        }
+        acc[key] = isValidColor(possibleColor) ? possibleColor : null;
 
         return acc;
-      },
-      { ...style }
-    );
-  },
-  {
-    normalizer: (args) => {
-      return [stringify(args[0]), stringify(args[1])].join("|");
+      }
+
+      // 2. The Fast Path (For 99% of apps)
+      if (isDataMappingPath(value)) {
+        // resolve the mapped color from the entry; fall back to null
+        // (RN ignores null style values) when the path is missing
+        const possibleColor = pathOr(null, value.split("."), entry);
+
+        acc[key] = possibleColor;
+
+        return acc;
+      }
+
+      // 3. Default Case: Treat as a raw color string
+      acc[key] = value;
+
+      return acc;
     },
-  }
-);
+    { ...style }
+  );
+};
 
 export function isVideoPreviewEnabled({
   enable_video_preview = false,
@@ -238,7 +277,7 @@ const recursiveCloneElement = (focused: boolean) => (element) => {
 };
 
 export const recursiveCloneElementsWithState = (focused: boolean, children) => {
-  if (R.isNil(children) || R.isEmpty(children)) {
+  if (isNilOrEmpty(children)) {
     return undefined;
   }
 
@@ -252,7 +291,7 @@ export const cloneChildrenWithIds = (
   ids: string[],
   children: React.ReactElement[]
 ) => {
-  if (R.isNil(children) || R.isEmpty(children)) {
+  if (isNilOrEmpty(children)) {
     return undefined;
   }
 

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -9,7 +9,7 @@ import { useScreenConfiguration } from "../useScreenConfiguration";
 import { RefreshControl } from "../RefreshControl";
 import { ifEmptyUseFallback } from "@applicaster/zapp-react-native-utils/cellUtils";
 import {
-  usePipesCacheReset,
+  useMarkPipesDataStale,
   useProfilerLogging,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useLoadingState } from "./hooks/useLoadingState";
@@ -154,7 +154,7 @@ function ComponentsMapComponent(props: Props) {
     [flatListHeight]
   );
 
-  usePipesCacheReset(riverId, riverComponents);
+  useMarkPipesDataStale(riverId, riverComponents);
 
   const refreshControl = React.useMemo(
     () => (pullToRefreshEnabled ? <RefreshControl /> : null),

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

@@ -10,11 +10,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
 >
   <View
     onLayout={[Function]}
-    style={
-      {
-        "flex": 1,
-      }
-    }
+    style={{}}
   >
     <RCTScrollView
       ListFooterComponent={
@@ -167,11 +163,6 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         >
           <View
             onLayout={[Function]}
-            style={
-              {
-                "flex": 1,
-              }
-            }
           >
             <View />
           </View>
@@ -183,11 +174,6 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         >
           <View
             onLayout={[Function]}
-            style={
-              {
-                "flex": 1,
-              }
-            }
           />
         </View>
         <View

package/Components/Screen/index.tsx

@@ -82,6 +82,8 @@ export function Screen(_props: Props) {
   const style = React.useMemo(
     () => ({
       ...screenStyles,
+      // FIXME: add logic to use backgroundColor if it valid_color and non-transparent, otherwise use theme.app_background_color.
+      // Current implementation treats "red" color as invalid color.
       backgroundColor: isValidColor(backgroundColor)
         ? backgroundColor
         : theme.app_background_color,

package/Components/ZappFrameworkComponents/BarView/BarView.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import { StyleSheet } from "react-native";
-import { SafeAreaView } from "@applicaster/zapp-react-native-ui-components/Components/SafeAreaView";
-
+import { StyleSheet, SafeAreaView as RNSafeAreaView } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import CloseButton from "./Buttons/CloseButton";
 import BackButton from "./Buttons/BackButton";
 import BarTitle from "./BarTitle";
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 type Props = {
   screenStyles: {
@@ -24,6 +24,11 @@ const defaultState: NavBarState = {
   title: "",
 };
 
+const SafeAreaViewPlatform = platformSelect({
+  ios: RNSafeAreaView,
+  android: SafeAreaView,
+});
+
 const BarView = ({ screenStyles, barState = defaultState }: Props) => {
   const isRTL = useIsRTL();
 
@@ -45,7 +50,7 @@ const BarView = ({ screenStyles, barState = defaultState }: Props) => {
   );
 
   return (
-    <SafeAreaView
+    <SafeAreaViewPlatform
       edges={["top", "left", "right"]}
       style={[style.view, isRTL ? style.rtlStyle : {}]}
       testID="BarView-safeAreaView"
@@ -53,7 +58,7 @@ const BarView = ({ screenStyles, barState = defaultState }: Props) => {
       {backButton}
       <BarTitle title={barState.title} screenStyles={screenStyles} />
       {closeButton}
-    </SafeAreaView>
+    </SafeAreaViewPlatform>
   );
 };
 

package/Contexts/CachedDimensionsContext/__tests__/index.test.ts

@@ -0,0 +1,154 @@
+import { renderHook, act } from "@testing-library/react-native";
+
+type DimensionsStore = {
+  setState: (
+    partial: { dimensions: Record<string, unknown>; ids: string[] },
+    replace?: boolean
+  ) => void;
+};
+
+const createdStores: DimensionsStore[] = [];
+
+jest.mock("zustand", () => {
+  const actual = jest.requireActual<typeof import("zustand")>("zustand");
+
+  return {
+    ...actual,
+    create: ((initializer: Parameters<typeof actual.create>[0]) => {
+      const store = actual.create(initializer);
+      createdStores.push(store);
+
+      return store;
+    }) as typeof actual.create,
+  };
+});
+
+import { useCachedDimensions } from "../index";
+
+const resetStore = () => {
+  const store = createdStores[createdStores.length - 1];
+
+  act(() => {
+    store?.setState({ dimensions: {}, ids: [] });
+  });
+};
+
+describe("useCachedDimensions", () => {
+  beforeEach(() => {
+    resetStore();
+  });
+
+  describe("getCachedDimensions", () => {
+    it("returns default dimensions when id has no cached value", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+
+      expect(result.current.getCachedDimensions()).toEqual({
+        width: undefined,
+        height: undefined,
+      });
+    });
+
+    it("returns cached dimensions after setCachedDimensions", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+      const dimensions = { width: 100, height: 200 };
+
+      act(() => {
+        result.current.setCachedDimensions(dimensions);
+      });
+
+      expect(result.current.getCachedDimensions()).toEqual(dimensions);
+    });
+  });
+
+  describe("setCachedDimensions", () => {
+    it("updates dimensions for the hook id", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+
+      act(() => {
+        result.current.setCachedDimensions({ width: 50, height: 75 });
+      });
+
+      expect(result.current.getCachedDimensions()).toEqual({
+        width: 50,
+        height: 75,
+      });
+    });
+
+    it("shares cached dimensions between hook instances with the same id", () => {
+      const { result: first } = renderHook(() =>
+        useCachedDimensions("shared-id")
+      );
+
+      const { result: second } = renderHook(() =>
+        useCachedDimensions("shared-id")
+      );
+
+      act(() => {
+        first.current.setCachedDimensions({ width: 10, height: 20 });
+      });
+
+      expect(second.current.getCachedDimensions()).toEqual({
+        width: 10,
+        height: 20,
+      });
+    });
+  });
+
+  describe("getLastCachedDimensions", () => {
+    it("returns undefined when no dimensions have been cached", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+
+      expect(result.current.getLastCachedDimensions()).toBeUndefined();
+    });
+
+    it("returns the most recently cached dimensions across ids", () => {
+      const { result: first } = renderHook(() => useCachedDimensions("first"));
+
+      const { result: second } = renderHook(() =>
+        useCachedDimensions("second")
+      );
+
+      act(() => {
+        first.current.setCachedDimensions({ width: 100, height: 100 });
+      });
+
+      act(() => {
+        second.current.setCachedDimensions({ width: 200, height: 200 });
+      });
+
+      expect(first.current.getLastCachedDimensions()).toEqual({
+        width: 200,
+        height: 200,
+      });
+    });
+
+    it("returns the latest dimensions when the same id is updated multiple times", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+
+      act(() => {
+        result.current.setCachedDimensions({ width: 100, height: 100 });
+      });
+
+      act(() => {
+        result.current.setCachedDimensions({ width: 300, height: 400 });
+      });
+
+      expect(result.current.getLastCachedDimensions()).toEqual({
+        width: 300,
+        height: 400,
+      });
+    });
+  });
+
+  describe("return value", () => {
+    it("exposes getCachedDimensions, setCachedDimensions, and getLastCachedDimensions", () => {
+      const { result } = renderHook(() => useCachedDimensions("component-1"));
+
+      expect(result.current).toEqual({
+        getCachedDimensions: expect.any(Function),
+        setCachedDimensions: expect.any(Function),
+        getLastCachedDimensions: expect.any(Function),
+      });
+    });
+  });
+});

package/Contexts/CachedDimensionsContext/index.ts

@@ -1,6 +1,7 @@
 import { create, useStore } from "zustand";
 import { produce } from "immer";
 import { useCallback, useMemo } from "react";
+import { last } from "@applicaster/zapp-react-native-utils/utils";
 
 type Dimensions = {
   width: Option<number>;
@@ -10,14 +11,17 @@ type Dimensions = {
 type DimensionsState = {
   dimensions: Record<string, Dimensions>;
   setCachedDimensions: (id: string, dimensions: Dimensions) => void;
+  ids: string[];
 };
 
 const dimensionsStore = create<DimensionsState>((set) => ({
   dimensions: {},
+  ids: [],
   setCachedDimensions: (id, dimensions) =>
     set(
       produce((draft) => {
         draft.dimensions[id] = dimensions;
+        draft.ids.push(id);
       })
     ),
 }));
@@ -28,7 +32,7 @@ const initialDimensions = () => ({
 });
 
 export const useCachedDimensions = (id: string) => {
-  const { dimensions, setCachedDimensions } = useStore(
+  const { dimensions, setCachedDimensions, ids } = useStore(
     dimensionsStore
   ) as DimensionsState;
 
@@ -40,11 +44,22 @@ export const useCachedDimensions = (id: string) => {
     setCachedDimensions(id, newDimensions);
   }, []);
 
+  const getLastCachedDimensions = useCallback(() => {
+    const previousId = last(ids);
+
+    if (!previousId) {
+      return undefined;
+    }
+
+    return dimensions[previousId];
+  }, [dimensions, ids]);
+
   return useMemo(
     () => ({
       getCachedDimensions,
       setCachedDimensions: handleSetCachedDimensions,
+      getLastCachedDimensions,
     }),
-    [getCachedDimensions, handleSetCachedDimensions]
+    [getCachedDimensions, handleSetCachedDimensions, getLastCachedDimensions]
   );
 };

package/package.json

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