@react-native-ohos/react-native-clippathview 1.1.9-rc.1

package/harmony/clipPath/src/main/cpp/SVGViewBox.cpp

@@ -0,0 +1,94 @@
+/*
+ * Copyright (C) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#include "SVGViewBox.h"
+#include <math.h>
+#include <native_drawing/drawing_matrix.h>
+#include <native_drawing/drawing_rect.h>
+#include <native_drawing/drawing_types.h>
+#include "string"
+#include "vector"
+#include <glog/logging.h>
+
+void rnoh::SVGViewBox::transform(OH_Drawing_Rect *vbRect, OH_Drawing_Rect *eRect, std::string align, int meetOrSlice,
+                                 float density, OH_Drawing_Matrix *result) {
+
+    double vbX = OH_Drawing_RectGetLeft(vbRect) * density;
+    double vbY = OH_Drawing_RectGetTop(vbRect) * density;
+    double vbX2 = OH_Drawing_RectGetRight(vbRect) * density;
+    double vbY2 = OH_Drawing_RectGetBottom(vbRect) * density;
+    double vbWidth = vbX2 - vbX;
+    double vbHeight = vbY2 - vbY;
+
+    // Let e-x, e-y, e-width, e-height be the position and size of the element respectively.
+    double eX = OH_Drawing_RectGetLeft(eRect);
+    double eY = OH_Drawing_RectGetTop(eRect);
+    double eWidth = OH_Drawing_RectGetWidth(eRect);
+    double eHeight = OH_Drawing_RectGetHeight(eRect);
+
+
+    // Initialize scale-x to e-width/vb-width.
+    double scaleX = eWidth / vbWidth;
+
+    // Initialize scale-y to e-height/vb-height.
+    double scaleY = eHeight / vbHeight;
+
+    // Initialize translate-x to e-x - (vb-x * scale-x).
+    // Initialize translate-y to e-y - (vb-y * scale-y).
+    double translateX = eX - (vbX * scaleX);
+    double translateY = eY - (vbY * scaleY);
+
+    // If align is 'none'
+    if (meetOrSlice == MOS_NONE) {
+        // Let scale be set the smaller value of scale-x and scale-y.
+        // Assign scale-x and scale-y to scale.
+        double scale = scaleX = scaleY = fmin(scaleX, scaleY);
+
+        translateX += (eWidth - vbWidth * scaleX) / 2.0;
+        translateY += (eHeight - vbHeight * scaleY) / 2.0;
+
+    } else {
+        // If align is not 'none' and meetOrSlice is 'meet', set the larger of scale-x and scale-y to the smaller.
+        // Otherwise, if align is not 'none' and meetOrSlice is 'slice', set the smaller of scale-x and scale-y to the
+        // larger.
+        if (align.compare("none") != 0 && meetOrSlice == MOS_MEET) {
+            scaleX = scaleY = fmin(scaleX, scaleY);
+        } else if (align.compare("none") != 0 && meetOrSlice == MOS_SLICE) {
+            scaleX = scaleY = fmax(scaleX, scaleY);
+        }
+
+        // If align contains 'xMid', add (e-width - vb-width * scale-x) / 2 to translate-x.
+        if (align.find("xMid") != std::string::npos) {
+            translateX += (eWidth - vbWidth * scaleX) / 2.0;
+        }
+        // If align contains 'xMax', add (e-width - vb-width * scale-x) to translate-x.
+        if (align.find("xMax") != std::string::npos) {
+            translateX += (eWidth - vbWidth * scaleX);
+        }
+
+        // If align contains 'yMid', add (e-height - vb-height * scale-y) / 2 to translate-y.
+        if (align.find("YMid") != std::string::npos) {
+            translateY += (eHeight - vbHeight * scaleY) / 2.0;
+        }
+
+        // If align contains 'yMax', add (e-height - vb-height * scale-y) to translate-y.
+        if (align.find("YMax") != std::string::npos) {
+            translateY += (eHeight - vbHeight * scaleY);
+        }
+    }
+    OH_Drawing_MatrixReset(result);
+    OH_Drawing_MatrixPostScale(result, (float)scaleX, (float)scaleY, 0.0f, 0.0f);
+    OH_Drawing_MatrixPostTranslate(result, (float)translateX, (float)translateY);
+}

package/harmony/clipPath/src/main/cpp/SVGViewBox.h

@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#ifndef HARMONY_SVGVIEWBOX_H
+#define HARMONY_SVGVIEWBOX_H
+
+#include <native_drawing/drawing_types.h>
+#include <string>
+
+namespace rnoh {
+class SVGViewBox {
+public:
+    static const int MOS_MEET = 0;
+    static const int MOS_SLICE = 1;
+    static const int MOS_NONE = 2;
+    static void transform(OH_Drawing_Rect *vbRect, OH_Drawing_Rect *eRect, std::string align, int meetOrSlice,
+                          float density, OH_Drawing_Matrix *result);
+};
+};     // namespace rnoh
+#endif // HARMONY_SVGVIEWBOX_H

package/harmony/clipPath/src/main/cpp/ShadowNodes.cpp

@@ -0,0 +1,22 @@
+/*
+ * Copyright (C) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+namespace facebook {
+namespace react {
+
+extern const char RNCClipPathViewComponentName[] = "RNCClipPathView";
+extern const char RNCClipPathViewNoneComponentName[] = "RNCClipPathViewNone";
+} // namespace react
+} // namespace facebook

package/harmony/clipPath/src/main/cpp/ShadowNodes.h

@@ -0,0 +1,41 @@
+/*
+ * Copyright (C) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#ifndef HARMONY_CLIP_PATH_VIEW_SRC_MAIN_CPP_SHADOWNODES_H
+#define HARMONY_CLIP_PATH_VIEW_SRC_MAIN_CPP_SHADOWNODES_H
+
+#pragma once
+
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <react/renderer/components/view/ViewShadowNode.h>
+#include <jsi/jsi.h>
+#include "Props.h"
+
+namespace facebook {
+namespace react {
+
+JSI_EXPORT extern const char RNCClipPathViewComponentName[];
+JSI_EXPORT extern const char RNCClipPathViewNoneComponentName[];
+
+/*
+ * `ShadowNode` for <RTNCenteredText> component.
+ */
+using RNCClipPathViewShadowNode =
+    ConcreteViewShadowNode<RNCClipPathViewComponentName, RNCClipPathViewProps, ViewEventEmitter>;
+using RNCClipPathViewNoneShadowNode =
+    ConcreteViewShadowNode<RNCClipPathViewNoneComponentName, RNCClipPathViewNoneProps, ViewEventEmitter>;
+} // namespace react
+} // namespace facebook
+#endif

package/harmony/clipPath/src/main/cpp/pen_style_node.h

@@ -0,0 +1,10 @@
+//
+// Created on 2024/7/4.
+//
+// Node APIs are not fully supported. To solve the compilation error of the interface cannot be found,
+// please include "napi/native_api.h".
+
+typedef enum {
+    CLIP_PEN_STYLE_FILL = 1 << 0,
+    CLIP_PEN_STYLE_STROKE = 1 << 1,
+} Clip_PenStyleType;

package/harmony/clipPath/src/main/ets/ClipPathPackage.ts

@@ -0,0 +1,46 @@
+/**
+ * MIT License
+ *
+ * Copyright (C) 2023 Huawei Device Co., Ltd.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { RNPackage, TurboModulesFactory } from '@rnoh/react-native-openharmony/ts';
+import type { TurboModule, TurboModuleContext } from '@rnoh/react-native-openharmony/ts';
+import { ClipPathTurboModule } from './ClipPathTurboModule';
+
+class ClipPathTurboModulesFactory extends TurboModulesFactory {
+  createTurboModule(name: string): TurboModule | null {
+    if (name === 'RNCClipPathContext') {
+      return new ClipPathTurboModule(this.ctx);
+    }
+    return null;
+  }
+
+  hasTurboModule(name: string): boolean {
+    return name === 'RNCClipPathContext';
+  }
+}
+
+export class ClipPathPackage extends RNPackage {
+  createTurboModulesFactory(ctx: TurboModuleContext): TurboModulesFactory {
+    return new ClipPathTurboModulesFactory(ctx);
+  }
+}

package/harmony/clipPath/src/main/ets/ClipPathTurboModule.ts

@@ -0,0 +1,32 @@
+/**
+ * MIT License
+ *
+ * Copyright (C) 2024 Huawei Device Co., Ltd.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { TurboModule } from "@rnoh/react-native-openharmony/ts";
+import display from '@ohos.display';
+
+export class ClipPathTurboModule extends TurboModule {
+  getDensity(): number {
+    return display.getDefaultDisplaySync().densityPixels;
+  }
+}

package/harmony/clipPath/src/main/module.json5

@@ -0,0 +1,7 @@
+{
+  module: {
+    name: 'clipPath',
+    type: 'har',
+    deviceTypes: ['default'],
+  },
+}

package/harmony/clipPath/src/main/resources/base/element/string.json

@@ -0,0 +1,8 @@
+{
+  "string": [
+    {
+      "name": "page_show",
+      "value": "page from npm package"
+    }
+  ]
+}

package/harmony/clipPath/src/main/resources/en_US/element/string.json

@@ -0,0 +1,8 @@
+{
+  "string": [
+    {
+      "name": "page_show",
+      "value": "page from npm package"
+    }
+  ]
+}

package/harmony/clipPath/src/main/resources/zh_CN/element/string.json

@@ -0,0 +1,8 @@
+{
+  "string": [
+    {
+      "name": "page_show",
+      "value": "page from npm package"
+    }
+  ]
+}

package/harmony/clipPath/ts.ts

@@ -0,0 +1,26 @@
+/**
+ * MIT License
+ *
+ * Copyright (C) 2023 Huawei Device Co., Ltd.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+export * from "./src/main/ets/ClipPathTurboModule"
+export * from "./src/main/ets/ClipPathPackage"

package/index.d.ts

@@ -0,0 +1,58 @@
+import React from "react";
+import { Constructor, NativeMethods, ViewProps } from "react-native";
+
+
+interface ClipPathViewProps extends ViewProps {
+    svgKey?:string // web
+    d?:string
+    viewBox?:number[] 
+    aspect?: 'meet' | 'slice' | 'none'
+    align?:'xMinYMin'|
+    'xMidYMin' |
+    'xMaxYMin' |
+    'xMinYMid' |
+    'xMidYMid' |
+    'xMaxYMid' |
+    'xMinYMax' |
+    'xMidYMax' |
+    'xMaxYMax' |
+    'none'
+
+    translateZ?:number
+
+    fillRule?: 'evenodd' | 'nonzero'
+    strokeWidth?:number
+    strokeStart?:number
+    strokeEnd?:number
+    strokeCap?:'butt' | 'round' | 'square'
+    strokeJoin?: 'bevel' | 'miter' | 'round'
+    strokeMiter?:number
+
+    // transformOrder?: "r-s-t" | "r-t-s" | "s-r-t" | "s-t-r" | "t-r-s" | "t-s-r" 
+
+    transX?:number
+    transY?:number
+    transPercentageValue?:boolean
+    
+    rot?:number
+    rotO?:number
+    rotOx?:number
+    rotOy?:number
+    rotPercentageValue?:boolean
+
+    sc?:number
+    scX?:number
+    scY?:number
+    scO?:number
+    scOx?:number
+    scOy?:number
+    scPercentageValue?:boolean
+  
+}
+
+declare class ClipPathComponent extends React.Component<ClipPathViewProps> {}
+declare const ClipPathViewBase: Constructor<NativeMethods> & typeof ClipPathComponent;
+
+export  class ClipPathViewH extends ClipPathViewBase {}
+export  class ClipPathView extends ClipPathViewBase {}
+

package/index.js

@@ -0,0 +1,5 @@
+import {Platfotm} from 'react-native'
+import ClipPathViewNoneAndroid from './src/ClipPathH.android.js'
+import ClipPathViewAndroid from './src/ClipPath.android.js'
+export const ClipPathView = ClipPathViewAndroid;
+export const ClipPathViewH = ClipPathViewNoneAndroid;

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@react-native-ohos/react-native-clippathview",
+  "title": "React Native ClipPath",
+  "version": "1.1.9-rc.1",
+  "description": "ClipPath Android Web IOS Harmony",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "files": [
+    "harmony",
+    "README.md",
+    "index.js",
+    "src",
+    "index.d.ts",
+    "react-native-clippath.podspec"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/react-native-oh-library/react-native-clippath.git",
+    "baseUrl": "https://github.com/react-native-oh-library/react-native-clippath"
+  },
+  "keywords": [
+    "harmony",
+    "react-native",
+    "clippath",
+    "clip",
+    "react",
+    "android",
+    "ios",
+    "web",
+    "path",
+    "shape",
+    "GPU",
+    "Hardware accelerated"
+  ],
+  "author": {
+    "name": "Juan J LF",
+    "email": "justinjlf21@gmail.com"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "license": "MIT",
+  "licenseFilename": "LICENSE",
+  "readmeFilename": "README.md",
+  "peerDependencies": {
+    "react": ">=16.8.1",
+    "react-native": ">=0.60.0-rc.0 <1.0.x"
+  },
+  "devDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "dependencies": {
+    "react-native-clippathview": "1.1.8",
+    "svgpath": "^2.3.1"
+  },
+  "harmony": {
+    "alias": "react-native-clippathview"
+  }
+}

package/react-native-clippath.podspec

@@ -0,0 +1,30 @@
+# react-native-clippath.podspec
+
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-clippath"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.description  = <<-DESC
+                   ClipPath IOS
+                   DESC
+  s.homepage     = "https://github.com/Only-IceSoul/react-native-clippath"
+  # brief license entry:
+  s.license      = "MIT"
+  # optional - use expanded license entry instead:
+  # s.license    = { :type => "MIT", :file => "LICENSE" }
+  s.authors      = { "Your Name" => "yourname@email.com" }
+  s.platforms    = { :ios => "10.0" }
+  s.source       = { :git => "https://github.com/Only-IceSoul/react-native-clippath.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,c,cc,cpp,m,mm,swift}"
+  s.requires_arc = true
+
+  s.dependency "React"
+  # ...
+  # s.dependency "..."
+end
+

package/src/ClipPath.android.js

@@ -0,0 +1,7 @@
+
+
+import ClipPathMobileN from './ClipPathMobileN'
+
+const ClipPath = ClipPathMobileN
+
+export default ClipPath

package/src/ClipPath.ios.js

@@ -0,0 +1,5 @@
+import ClipPathMobile from './ClipPathMobile'
+
+const ClipPath = ClipPathMobile
+
+export default ClipPath

package/src/ClipPath.web.js

@@ -0,0 +1,5 @@
+import ClipPathWeb from './ClipPathWeb'
+
+const ClipPath = ClipPathWeb
+
+export default ClipPath

package/src/ClipPathH.android.js

@@ -0,0 +1,6 @@
+
+import ClipPathMobile from './ClipPathMobile'
+
+const ClipPathH = ClipPathMobile
+
+export default ClipPathH

package/src/ClipPathH.ios.js

@@ -0,0 +1,5 @@
+import ClipPathMobile from './ClipPathMobile'
+
+const ClipPathH = ClipPathMobile
+
+export default ClipPathH

package/src/ClipPathH.web.js

@@ -0,0 +1,5 @@
+import ClipPathWeb from './ClipPathWeb'
+
+const ClipPathH = ClipPathWeb
+
+export default ClipPathH

package/src/ClipPathMobile.js

@@ -0,0 +1,6 @@
+import { requireNativeComponent } from 'react-native';
+
+
+const ClipPathMobile = requireNativeComponent('RNCClipPathView',null) 
+
+export default ClipPathMobile

package/src/ClipPathMobileN.js

@@ -0,0 +1,6 @@
+import { requireNativeComponent } from 'react-native';
+
+
+const ClipPathMobileNone =  requireNativeComponent('RNCClipPathViewNone',null) 
+
+export default ClipPathMobileNone

package/src/ClipPathNativeComponent.ts

@@ -0,0 +1,48 @@
+// @flow strict-local
+
+import type { ViewProps } from "react-native/Libraries/Components/View/ViewPropTypes";
+import type { HostComponent } from "react-native";
+import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
+import { Int32, WithDefault, Float } from "react-native/Libraries/Types/CodegenTypes"
+
+export interface NativeProps extends ViewProps {
+    color?: string;
+    openClip?: WithDefault<boolean, true>;
+    fill?: WithDefault<string, ''>;
+    stroke?: WithDefault<string, ''>;
+    showProperty?: WithDefault<boolean, false>;
+  
+    svgKey?: string;
+    d?: string;
+    viewBox?: Array<Int32>;
+    align?: WithDefault<string, 'xMidYMid'>;
+    aspect?: WithDefault<string, 'meet'>;
+    fillRule?: WithDefault<string, 'nonzero'>;
+    strokeWidth?: WithDefault<Int32, 1>;
+    strokeCap?: WithDefault<string, 'butt'>;
+    strokeJoin?: WithDefault<string, 'miter'>;
+    strokeMiter?: WithDefault<Int32, 4>;
+    strokeStart?: WithDefault<Int32, 0>;
+    strokeEnd?: WithDefault<Int32, 1>;
+    // children?: React.ReactElement;
+    translateZ?: WithDefault<Int32, 0>;
+    transX?: WithDefault<Int32, 0>;
+    transY?: WithDefault<Int32, 0>;
+    transPercentageValue?: WithDefault<boolean, false>;
+    rot?: WithDefault<Int32, 0>;
+    rotO?: WithDefault<Int32, 0>;
+    rotOx?: WithDefault<Int32, 0>;
+    rotOy?: WithDefault<Int32, 0>;
+    rotPercentageValue?: WithDefault<boolean, false>;
+    sc?: WithDefault<Float, 1>;
+    scX?: WithDefault<Float, 1>;
+    scY?: WithDefault<Float, 1>;
+    scO?: WithDefault<Int32, 0>;
+    scOx?: WithDefault<Int32, 0>;
+    scOy?: WithDefault<Int32, 0>;
+    scPercentageValue?: WithDefault<boolean, false>;
+  }
+
+export default codegenNativeComponent<NativeProps>(
+  "ClipPath"
+) as HostComponent<NativeProps>;