@applicaster/zapp-react-native-ui-components 16.0.0-rc.22 → 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/__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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-rc.22",
+  "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.22",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.22",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.22",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.22",
+    "@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",