update rm rn unsupported properties

Author: softmarshmallow

externals/coli

@@ -82,7 +82,7 @@ export abstract class WidgetWithStyle<OUTSTYLE = CSSProperties>
   abstract jsxConfig(): JSXElementConfig;
 
   private extendedStyle: CSSProperties = {};
-  extendStyle(style: CSSProperties) {
+  extendStyle<T = CSSProperties>(style: T) {
     this.extendedStyle = {
       ...this.extendedStyle,
       ...style,

packages/builder-web-core/widget-core/widget-with-style.ts

@@ -1,17 +1,39 @@
 import * as core from "@reflect-ui/core";
 import { Composer } from ".";
 import * as css from "@web-builder/styles";
+import type { ViewStyle } from "react-native";
 
 export function compose_wrapped_with_clip_rrect(
   widget: core.ClipRRect,
   child_composer: Composer
 ) {
   const child = child_composer(widget.child);
-  child.extendStyle({
-    ...css.borderRadius(widget.borderRadius),
-    overflow: "hidden",
+  const br = css.borderRadius(widget.borderRadius);
+
+  const style: ViewStyle = {
+    overflow: "hidden", // do we need this on rn?
     width: "100%", // ----- need better approach
     height: "100%", // ----- need better approach
-  });
+  };
+
+  // convert css property to rn property
+  if (br["border-radius"]) {
+    style["borderRadius"] = br["border-radius"] as any as number;
+  } else {
+    style["borderTopLeftRadius"] = br[
+      "border-top-left-radius"
+    ] as any as number;
+    style["borderTopRightRadius"] = br[
+      "border-top-right-radius"
+    ] as any as number;
+    style["borderBottomRightRadius"] = br[
+      "border-bottom-right-radius"
+    ] as any as number;
+    style["borderBottomLeftRadius"] = br[
+      "border-bottom-left-radius"
+    ] as any as number;
+  }
+
+  child.extendStyle<ViewStyle>(style);
   return child;
 }

packages/designto-react-native/tokens-to-rn-widget/compose-wrapped-with-clip-rrect.ts

@@ -139,15 +139,16 @@ function compose<T extends JsxWidget>(
   else if (widget instanceof core.ClipRRect) {
     thisRnWidget = compose_wrapped_with_clip_rrect(widget, handleChild);
   } else if (widget instanceof core.ClipPath) {
-    const child = handleChild<StylableJsxWidget>(widget.child);
-    child.extendStyle({
-      ...css.clipPath(widget),
-      top: undefined,
-      left: undefined,
-      right: undefined,
-      bottom: undefined,
-    });
-    thisRnWidget = child;
+    // FIXME: add clip-path support for react-native
+    // const child = handleChild<StylableJsxWidget>(widget.child);
+    // child.extendStyle({
+    //   ...css.clipPath(widget),
+    //   top: undefined,
+    //   left: undefined,
+    //   right: undefined,
+    //   bottom: undefined,
+    // });
+    // thisRnWidget = child;
   }
   // ----- endregion clip path ------
   else if (widget instanceof core.RenderedText) {