fix rn style extensoin to allow only valid rn properties

Author: softmarshmallow

packages/builder-config/framework-reactnative/reactnative-config-blur.ts

@@ -0,0 +1,18 @@
+export type ReactNativeBlurConfig = {
+  layer: "none" | ReactNativeExpoBlurConfig | ReactNativeCommunityBlurConfig;
+  background: "none" | null;
+  image: ReactNativeImageBlurConfig;
+};
+
+/**
+ * RN has a built-in blur effect for image based elements - Image, BackgroundImage
+ */
+interface ReactNativeImageBlurConfig {}
+
+interface ReactNativeExpoBlurConfig {
+  module: "expo-blur";
+}
+
+interface ReactNativeCommunityBlurConfig {
+  module: "@react-native-community/blur";
+}

packages/builder-config/framework-reactnative/reactnative-config.ts

@@ -8,6 +8,7 @@ import type { ReactNativeSvgConfig } from "./reactnative-config-svg";
 import type { ReactNativeGradientConfig } from "./reactnative-config-gradient";
 import type { ReactNativeTextGradientConfig } from "./reactnative-config-gradient-text";
 import type { ReactNativeShadowConfig } from "./reactnative-config-shadow";
+import type { ReactNativeBlurConfig } from "./reactnative-config-blur";
 
 export interface ReactNativeFrameworkConfig {
   framework: "react-native";
@@ -17,6 +18,10 @@ export interface ReactNativeFrameworkConfig {
   gradient_text: ReactNativeTextGradientConfig;
   shadow: ReactNativeShadowConfig;
   svg: ReactNativeSvgConfig;
+  /**
+   * @deprecated not supported at this moment - wip
+   */
+  blur?: ReactNativeBlurConfig;
   component_declaration_style: {
     exporting_style: ReactComponentExportingCofnig;
     // not supported yet

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

@@ -1,7 +1,17 @@
 import * as core from "@reflect-ui/core";
 import { Composer } from ".";
-import * as css from "@web-builder/styles";
+import type { ViewStyle } from "react-native";
 
+/**
+ * @deprecated Blur for RN not supported yet.
+ *
+ * Learn more
+ * - https://stackoverflow.com/questions/37131278/how-to-make-the-blur-effect-with-react-native
+ *
+ * @param widget
+ * @param child_composer
+ * @returns
+ */
 export function compose_wrapped_with_blurred(
   widget: core.Blurred,
   child_composer: Composer
@@ -10,12 +20,14 @@ export function compose_wrapped_with_blurred(
   const isBlurVisibile = widget.blur.visible;
   if (isBlurVisibile) {
     if (widget.blur.type === "LAYER_BLUR") {
-      child.extendStyle({
-        filter: css.blur(widget.blur.radius),
+      child.extendStyle<ViewStyle>({
+        // FIXME: blur not supported in RN
+        // filter: css.blur(widget.blur.radius),
       });
     } else if (widget.blur.type === "BACKGROUND_BLUR") {
-      child.extendStyle({
-        "backdrop-filter": css.blur(widget.blur.radius),
+      child.extendStyle<ViewStyle>({
+        // FIXME: backdrop-filter not supported in RN
+        // "backdrop-filter": css.blur(widget.blur.radius),
       });
     }
   }

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

@@ -1,13 +1,14 @@
 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_opacity(
   widget: core.Opacity,
   child_composer: Composer
 ) {
   const child = child_composer(widget.child);
-  child.extendStyle({
+  child.extendStyle<ViewStyle>({
     opacity: css.opacity(widget.opacity),
   });
   return child;

packages/designto-react-native/tokens-to-rn-widget/compose-wrapped-with-overflow-box.ts

@@ -1,12 +1,13 @@
 import * as core from "@reflect-ui/core";
 import { Composer } from ".";
+import type { ViewStyle } from "react-native";
 
 export function compose_wrapped_with_overflow_box(
   widget: core.OverflowBox,
   child_composer: Composer
 ) {
   const child = child_composer(widget.child);
-  child.extendStyle({
+  child.extendStyle<ViewStyle>({
     overflow: "hidden",
   });
   return child;

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

@@ -1,6 +1,7 @@
 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_positioned(
   widget: core.Positioned,
@@ -9,7 +10,7 @@ export function compose_wrapped_with_positioned(
   const child = child_composer(widget.child);
   // -------------------------------------
   // override w & h with position provided w/h
-  child.extendStyle({
+  child.extendStyle<ViewStyle>({
     width: css.length(widget.width),
     height: css.length(widget.height),
   });

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

@@ -1,14 +1,18 @@
 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_rotation(
   widget: core.Rotation,
   child_composer: Composer
 ) {
   const child = child_composer(widget.child);
-  child.extendStyle({
-    transform: css.rotation(widget.rotation),
+  child.extendStyle<ViewStyle>({
+    transform: [
+      {
+        rotate: `${widget.rotation}deg`,
+      },
+    ],
   });
   return child;
 }

packages/designto-react-native/tokens-to-rn-widget/compose-wrapped-with-sized-box.ts

@@ -1,13 +1,14 @@
 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_sized_box(
   widget: core.SizedBox,
   child_composer: Composer
 ) {
   const child = child_composer(widget.child);
-  child.extendStyle({
+  child.extendStyle<ViewStyle>({
     width: css.px(widget.width),
     height: css.px(widget.height),
   });

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

@@ -1,6 +1,7 @@
 import * as core from "@reflect-ui/core";
 import { Composer } from ".";
 import { Stretched } from "@designto/token/tokens";
+import type { ViewStyle } from "react-native";
 
 export function compose_wrapped_with_clip_stretched(
   widget: Stretched,
@@ -17,8 +18,8 @@ export function compose_wrapped_with_clip_stretched(
   }
 
   const child = child_composer(widget.child);
-  child.extendStyle({
-    "align-self": "stretch",
+  child.extendStyle<ViewStyle>({
+    alignSelf: "stretch",
     [remove_size]: undefined,
   });
   return child;