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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Juan J LF
+
+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.

package/README.md

@@ -0,0 +1,15 @@
+# @react-native-oh-tpl/react-native-clippathview
+
+This project is based on [react-native-clippathview](https://github.com/Only-IceSoul/react-native-clippath)
+
+## Documentation
+
+[中文](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-clippath-capi.md)
+
+[English](https://gitee.com/react-native-oh-library/usage-docs/blob/master/en/react-native-clippath-capi.md)
+
+
+## License
+
+This library is licensed under [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-clippath/blob/capi/LICENSE).
+

package/harmony/clipPath/BuildProfile.ets

@@ -0,0 +1,6 @@
+export default class BuildProfile { 
+	static readonly HAR_VERSION = '1.1.8-0.2.2';
+	static readonly BUILD_MODE_NAME = 'debug';
+	static readonly DEBUG = true;
+	static readonly TARGET_NAME = 'default';
+}

package/harmony/clipPath/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Juan J LF
+
+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.

package/harmony/clipPath/OAT.xml

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<configuration>
+	<oatconfig>
+	<licensefile>LICENSE</licensefile>
+		<filefilterlist>
+			<filefilter name="copyrightPolicyFilter" desc="Filters for compatibility，license header policies">
+				<filteritem type="filename" name="hvigorfile.ts" desc="hvigor构建脚本，DevEco Studio自动生成，不需要添加版权头"/>
+				<filteritem type="filename" name="*.json5" desc="hvigor工程配置文件，DevEco Studio自动生成，不需要添加版权头"/>
+				<filteritem type="filename" name="*.proto" desc="资源文件，不需要添加版权头"/>
+				<filteritem type="filename" name="*.json" desc="资源文件，不需要添加版权头"/>
+				<filteritem type="filepath" name="hvigorw" desc="工程模板，不修改版权头，以防有修改版权风险"/>
+				<filteritem type="filepath" name="hvigorw.bat" desc="工程模板，不修改版权头，以防有修改版权风险"/>
+				<filteritem type="filepath" name="hvigor/hvigor-wrapper.js" desc="工程模板，不修改版权头，以防有修改版权风险"/>
+                <filteritem type="filename" name="LICENSE" desc="工程文件，不修改版权头"/>
+			</filefilter>
+			<filefilter name="defaultPolicyFilter" desc="Filters for compatibility，license header policies">
+				<filteritem type="filename" name="hvigorfile.ts" desc="hvigor构建脚本，DevEco Studio自动生成，不需要添加许可证头"/>
+				<filteritem type="filename" name="*.json5" desc="hvigor工程配置文件，DevEco Studio自动生成，不需要添加许可证头"/>
+				<filteritem type="filename" name="LICENSE" desc="原三方库证书文件无需更改，因此添加过滤"/>
+				<filteritem type="filename" name="*.proto" desc="资源文件，不需要添加许可证头"/>
+				<filteritem type="filename" name="*.json" desc="资源文件，不需要添加许可证头"/>
+				<filteritem type="filepath" name="hvigorw" desc="工程模板，不修改版权头，以防有修改版权风险"/>
+				<filteritem type="filepath" name="hvigorw.bat" desc="工程模板，不修改版权头，以防有修改版权风险"/>
+				<filteritem type="filepath" name="hvigor/hvigor-wrapper.js" desc="工程模板，不修改版权头，以防有修改版权风险"/>
+			</filefilter>
+			<filefilter name="binaryFileTypePolicyFilter" desc="Filters for resources files policies">
+				<filteritem type="filename" name="icon.png" desc="应用图标"/>
+				<filteritem type="filename" name="app_icon.png" desc="应用图标"/>
+				<filteritem type="filename" name="warn.png" desc="页面展示图标"/>
+				<filteritem type="filename" name="*.png" desc="展示图标"/>
+			</filefilter>
+		</filefilterlist>
+        <policylist>
+            <policy name="projectPolicy" desc="">
+                <policyitem type="license" name="Apache" path="src/.*" desc="license under the Apache"/>
+            </policy>
+        </policylist>
+	</oatconfig>
+</configuration>

package/harmony/clipPath/README.OpenSource

@@ -0,0 +1,11 @@
+[
+    {
+        "Name": "react-native-clippath",
+        "License": "MIT License",
+        "License File": "https://github.com/Only-IceSoul/react-native-clippath/blob/main/LICENSE",
+        "Version Number": "1.1.8",
+        "Owner" : "Only-IceSoul"
+        "Upstream URL": "https://github.com/Only-IceSoul/react-native-clippath",
+        "Description": "ClipPath - Hardware accelerated"
+    }
+]

package/harmony/clipPath/build-profile.json5

@@ -0,0 +1,11 @@
+{
+  "apiType": "stageMode",
+  "buildOption": {
+  },
+  "targets": [
+    {
+      "name": "default",
+      "runtimeOS": "HarmonyOS"
+    }
+  ]
+}

package/harmony/clipPath/hvigorfile.ts

@@ -0,0 +1,6 @@
+import { harTasks } from '@ohos/hvigor-ohos-plugin';
+
+export default {
+    system: harTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
+    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+}

package/harmony/clipPath/index.ets

@@ -0,0 +1,15 @@
+/*
+ * Copyright (C) 2023 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.
+ */
+export * from './ts'

package/harmony/clipPath/obfuscation-rules.txt

@@ -0,0 +1,18 @@
+# Define project specific obfuscation rules here.
+# You can include the obfuscation configuration files in the current module's build-profile.json5.
+#
+# For more details, see
+#   https://gitee.com/openharmony/arkcompiler_ets_frontend/blob/master/arkguard/README.md
+
+# Obfuscation options:
+# -disable-obfuscation: disable all obfuscations
+# -enable-property-obfuscation: obfuscate the property names
+# -enable-toplevel-obfuscation: obfuscate the names in the global scope
+# -compact: remove unnecessary blank spaces and all line feeds
+# -remove-log: remove all console.* statements
+# -print-namecache: print the name cache that contains the mapping from the old names to new names
+# -apply-namecache: reuse the given cache file
+
+# Keep options:
+# -keep-property-name: specifies property names that you want to keep
+# -keep-global-name: specifies names that you want to keep in the global scope

package/harmony/clipPath/oh-package.json5

@@ -0,0 +1,14 @@
+{
+  "license": "MIT License",
+  "devDependencies": {
+  },
+  "author": "",
+  "name": "@react-native-ohos/react-native-clippathview",
+  "description": "Please describe the basic information.",
+  "main": "index.ets",
+  "version": "1.1.9-rc.1",
+  "dependencies": {
+    "@rnoh/react-native-openharmony": "file:../react_native_openharmony"
+  },
+  "compileOnlyDependencies": {}
+}

package/harmony/clipPath/src/main/cpp/CMakeLists.txt

@@ -0,0 +1,7 @@
+cmake_minimum_required(VERSION 3.13)
+set(CMAKE_VERBOSE_MAKEFILE on)
+
+file(GLOB rnoh_clip_path_SRC CONFIGURE_DEPENDS *.cpp)
+add_library(rnoh_clip_path SHARED ${rnoh_clip_path_SRC})
+target_include_directories(rnoh_clip_path PUBLIC ${CMAKE_CURRENT_SOURCE_DIR})
+target_link_libraries(rnoh_clip_path PUBLIC rnoh)

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

@@ -0,0 +1,127 @@
+//
+// Created on 2024/6/27.
+//
+// Node APIs are not fully supported. To solve the compilation error of the interface cannot be found,
+// please include "napi/native_api.h".
+
+#pragma once
+#include "ModUtil.h"
+#include <native_drawing/drawing_path.h>
+#include <native_drawing/drawing_pen.h>
+#include <string>
+namespace rnoh {
+class ClipPathProps {
+public:
+    float mOpacity{1.0f};
+    bool mOpacityStatus{false};
+    std::string mMask{""};
+    std::string mOldMask{""};
+    bool mFillColorStatus{false};
+    float mFillOpacity{1.0f};
+    bool mFillOpacityStatus{false};
+    std::string mFillRule{"none"};
+    bool mFillRuleStatus{false};
+    bool mStrokeColorStatus{false};
+    float mStrokeOpacity{1.0f};
+    bool mStrokeOpacityStatus{false};
+    float mStrokeWidth{1.0f};
+    bool mStrokeWidthStatus{false};
+    std::string mStrokeCap{"none"};
+    std::string mStrokeJoin{"none"};
+    float mStrokeMiter{4.0f};
+    bool mStrokeMiterStatus{false};
+    float mStrokeStart{0.0f};
+    bool mStrokeStartStatus{false};
+    float mStrokeEnd{1.0f};
+    bool mStrokeEndStatus{false};
+    bool mShadowColorStatus{false};
+    float mShadowOpacity{0.0f};
+    bool mShadowOpacityStatus{false};
+    float mShadowRadius{2.0f};
+    bool mShadowRadiusStatus{false};
+    float mShadowOffsetX{2.0f};
+    float mShadowOffsetY{2.0f};
+    bool mShadowOffsetIsPercent{false};
+    bool mShadowOffsetStatus{false};
+
+public:
+    float getOpacity() { return ModUtil::clamp(mOpacity); }
+
+    std::string getMask() { return mMask; }
+
+    float getFillOpacity() { return ModUtil::clamp(mFillOpacity); }
+
+    OH_Drawing_PathFillType getFillRule() {
+        return mFillRule.compare("evenodd") == 0 ? OH_Drawing_PathFillType::PATH_FILL_TYPE_EVEN_ODD
+                                                 : OH_Drawing_PathFillType::PATH_FILL_TYPE_WINDING;
+    }
+
+
+    float getStrokeOpacity() { return ModUtil::clamp(mStrokeOpacity); }
+
+    float getStrokeWidth() { return ModUtil::uClamp(mStrokeWidth, 1.0f); }
+
+    OH_Drawing_PenLineCapStyle getStrokeCap() {
+        return mStrokeCap.compare("round") == 0
+                   ? OH_Drawing_PenLineCapStyle::LINE_ROUND_CAP
+                   : (mStrokeCap.compare("square") == 0 ? OH_Drawing_PenLineCapStyle::LINE_SQUARE_CAP
+                                                        : OH_Drawing_PenLineCapStyle::LINE_FLAT_CAP);
+    }
+    OH_Drawing_PenLineJoinStyle getStrokeJoin() {
+        return mStrokeJoin.compare("round") == 0
+                   ? OH_Drawing_PenLineJoinStyle::LINE_ROUND_JOIN
+                   : (mStrokeJoin.compare("bevel") == 0 ? OH_Drawing_PenLineJoinStyle::LINE_BEVEL_JOIN
+                                                        : OH_Drawing_PenLineJoinStyle::LINE_MITER_JOIN);
+    }
+
+    float getStrokeMiter() { return mStrokeMiter; }
+
+    float getStrokeStart() { return ModUtil::clamp(mStrokeStart); }
+
+    float getStrokeEnd() { return ModUtil::clamp(mStrokeEnd); }
+
+
+    float getShadowOpacity() { return ModUtil::clamp(mShadowOpacity); }
+
+    float getShadowRadius() { return ModUtil::uClamp(mShadowRadius); }
+
+    float getShadowOffsetX() { return mShadowOffsetX; }
+
+    float getShadowOffsetY() { return mShadowOffsetY; }
+
+    bool getShadowOffsetIsPercent() { return mShadowOffsetIsPercent; }
+
+    void set(ClipPathProps props) {
+
+        if (!mOpacityStatus)
+            mOpacity = props.mOpacity;
+        if (!mFillOpacityStatus)
+            mFillOpacity = props.mFillOpacity;
+        if (!mFillRuleStatus)
+            mFillRule = props.mFillRule;
+        if (!mStrokeOpacityStatus)
+            mStrokeOpacity = props.mStrokeOpacity;
+        if (!mStrokeWidthStatus)
+            mStrokeWidth = props.mStrokeWidth;
+        if (mStrokeCap == "none")
+            mStrokeCap = props.mStrokeCap;
+        if (mStrokeJoin == "none")
+            mStrokeJoin = props.mStrokeJoin;
+        if (!mStrokeMiterStatus)
+            mStrokeMiter = props.mStrokeMiter;
+        if (!mStrokeStartStatus)
+            mStrokeStart = props.mStrokeStart;
+        if (!mStrokeEndStatus)
+            mStrokeEnd = props.mStrokeEnd;
+        if (!mShadowOpacityStatus)
+            mShadowOpacity = props.mShadowOpacity;
+        if (!mShadowRadiusStatus)
+            mShadowRadius = props.mShadowRadius;
+        if (!mShadowOffsetStatus) {
+            mShadowOffsetX = props.mShadowOffsetX;
+            mShadowOffsetY = props.mShadowOffsetY;
+            mShadowOffsetIsPercent = props.mShadowOffsetIsPercent;
+        }
+    }
+};
+} // namespace rnoh

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

@@ -0,0 +1,102 @@
+/*
+ * 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 "ClipPathViewComponentInstance.h"
+#include "ModUtil.h"
+#include <glog/logging.h>
+
+namespace rnoh {
+ClipPathViewComponentInstance::ClipPathViewComponentInstance(Context context)
+    : CppComponentInstance(std::move(context)) {
+    auto rnInstancePtr = this->m_deps->rnInstance.lock();
+    if (rnInstancePtr != nullptr) {
+        auto turboModule = rnInstancePtr->getTurboModule("RNCClipPathContext");
+        auto arkTsTurboModule = std::dynamic_pointer_cast<rnoh::ArkTSTurboModule>(turboModule);
+        folly::dynamic result = arkTsTurboModule->callSync("getDensity", {});
+        ModUtil::setDensity(static_cast<float>(result.asDouble()));
+    }
+}
+void ClipPathViewComponentInstance::onChildInserted(ComponentInstance::Shared const &childComponentInstance,
+                                                    std::size_t index) {
+    CppComponentInstance::onChildInserted(childComponentInstance, index);
+    mClipPathNode.insertChild(childComponentInstance->getLocalRootArkUINode(), index);
+}
+
+void ClipPathViewComponentInstance::onChildRemoved(ComponentInstance::Shared const &childComponentInstance) {
+    CppComponentInstance::onChildRemoved(childComponentInstance);
+    mClipPathNode.removeChild(childComponentInstance->getLocalRootArkUINode());
+};
+
+ClipPathViewNoneNode &ClipPathViewComponentInstance::getLocalRootArkUINode() { return mClipPathNode; }
+
+void ClipPathViewComponentInstance::onPropsChanged(SharedConcreteProps const &props) {
+    CppComponentInstance::onPropsChanged(props);
+    if (auto p = std::dynamic_pointer_cast<const facebook::react::RNCClipPathViewProps>(props)) {
+        mClipPathNode.setD(p->d);
+        mClipPathNode.setViewBox(p->viewBox);
+        if (p->translateZ != 0) {
+            mClipPathNode.setTranslateZ(p->translateZ);
+        }
+        mClipPathNode.setAlign(p->align);
+        mClipPathNode.setAspect(p->aspect);
+
+        mClipPathNode.setStrokeCap(p->strokeCap);
+        mClipPathNode.setStrokeJoin(p->strokeJoin);
+        mClipPathNode.setStrokeWidth(p->strokeWidth);
+        mClipPathNode.setStrokeMiter(p->strokeMiter);
+        mClipPathNode.setStrokeStart(p->strokeStart);
+        mClipPathNode.setStrokeEnd(p->strokeEnd);
+        mClipPathNode.setFillRule(p->fillRule);
+        if (p->rot != 0.0f) {
+            mClipPathNode.setRot(p->rot);
+        }
+        if (p->rotO != 0.0f) {
+            mClipPathNode.setRotO(p->rotO);
+        }
+        if (p->rotOx != 0.0f) {
+            mClipPathNode.setRotOx(p->rotOx);
+        }
+        if (p->rotOy != 0.0f) {
+            mClipPathNode.setRotOy(p->rotOy);
+        }
+
+        mClipPathNode.setRotPercentageValue(p->rotPercentageValue);
+        if (p->sc != 1.0f) {
+            mClipPathNode.setSc(p->sc);
+        }
+        if (p->scX != 1.0f) {
+            mClipPathNode.setScX(p->scX);
+        }
+        if (p->scY != 1.0f) {
+            mClipPathNode.setScY(p->scY);
+        }
+
+        if (p->scO != 0.0f) {
+            mClipPathNode.setScO(p->scO);
+        }
+        if (p->scOx != 0.0f) {
+            mClipPathNode.setScOx(p->scOx);
+        }
+        if (p->scOy != 0.0f) {
+            mClipPathNode.setScOy(p->scOy);
+        }
+        mClipPathNode.setScPercentageValue(p->scPercentageValue);
+
+        mClipPathNode.setTransX(p->transX);
+        mClipPathNode.setTransY(p->transY);
+        mClipPathNode.setTransPercentageValue(p->transPercentageValue);
+    }
+}
+} // namespace rnoh

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

@@ -0,0 +1,33 @@
+/*
+ * 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 "ClipPathViewNoneNode.h"
+#include "RNOH/CppComponentInstance.h"
+#include "ShadowNodes.h"
+
+namespace rnoh {
+class ClipPathViewComponentInstance : public CppComponentInstance<facebook::react::RNCClipPathViewShadowNode> {
+private:
+    ClipPathViewNoneNode mClipPathNode;
+
+public:
+    ClipPathViewComponentInstance(Context context);
+    void onChildInserted(ComponentInstance::Shared const &childComponentInstance, std::size_t index) override;
+
+    void onChildRemoved(ComponentInstance::Shared const &childComponentInstance) override;
+    ClipPathViewNoneNode &getLocalRootArkUINode() override;
+    void onPropsChanged(SharedConcreteProps const &props) override;
+};
+} // namespace rnoh

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

@@ -0,0 +1,60 @@
+/*
+ * 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_CLIPPATHVIEWJSIBINDER_H
+#define HARMONY_CLIP_PATH_VIEW_SRC_MAIN_CPP_CLIPPATHVIEWJSIBINDER_H
+
+#include "RNOHCorePackage/ComponentBinders/ViewComponentJSIBinder.h"
+
+namespace rnoh {
+class ClipPathViewJSIBinder : public ViewComponentJSIBinder {
+    facebook::jsi::Object createNativeProps(facebook::jsi::Runtime &rt) override {
+        auto object = ViewComponentJSIBinder::createNativeProps(rt);
+        object.setProperty(rt, "d", "string");
+        object.setProperty(rt, "viewBox", "array");
+        object.setProperty(rt, "aspect", "string");
+        object.setProperty(rt, "align", "string");
+        object.setProperty(rt, "translateZ", "float");
+        object.setProperty(rt, "fillRule", "string");
+        object.setProperty(rt, "strokeWidth", "float");
+        object.setProperty(rt, "strokeCap", "string");
+        object.setProperty(rt, "strokeJoin", "string");
+        object.setProperty(rt, "strokeMiter", "float");
+        object.setProperty(rt, "strokeStart", "float");
+        object.setProperty(rt, "strokeEnd", "float");
+
+        object.setProperty(rt, "sc", "float");
+        object.setProperty(rt, "scX", "float");
+        object.setProperty(rt, "scY", "float");
+        object.setProperty(rt, "scO", "float");
+        object.setProperty(rt, "scOx", "float");
+        object.setProperty(rt, "scOy", "float");
+        object.setProperty(rt, "scPercentageValue", "float");
+
+        object.setProperty(rt, "rot", "float");
+        object.setProperty(rt, "rotO", "float");
+        object.setProperty(rt, "rotOx", "float");
+        object.setProperty(rt, "rotOy", "float");
+        object.setProperty(rt, "rotPercentageValue", "bool");
+
+        object.setProperty(rt, "transX", "float");
+        object.setProperty(rt, "transY", "float");
+        object.setProperty(rt, "transPercentageValue", "bool");
+        return object;
+    }
+};
+} // namespace  rnoh
+#endif

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

@@ -0,0 +1,79 @@
+/*
+ * 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_CLIPPATHVIEWNAPIBINDER_H
+#define HARMONY_CLIP_PATH_VIEW_SRC_MAIN_CPP_CLIPPATHVIEWNAPIBINDER_H
+#include "RNOHCorePackage/ComponentBinders/ViewComponentNapiBinder.h"
+#include "Props.h"
+
+namespace rnoh {
+
+class ClipPathViewNapiBinder : public ViewComponentNapiBinder {
+public:
+    napi_value createProps(napi_env env, facebook::react::ShadowView const shadowView) override {
+        napi_value napiViewProps = ViewComponentNapiBinder::createProps(env, shadowView);
+        auto propsObjBuilder = ArkJS(env).getObjectBuilder(napiViewProps);
+
+        if (auto props = std::dynamic_pointer_cast<const facebook::react::RNCClipPathViewProps>(shadowView.props)) {
+            propsObjBuilder.addProperty("d", props->d);
+            propsObjBuilder.addProperty("aspect", props->aspect);
+            propsObjBuilder.addProperty("align", props->align);
+            propsObjBuilder.addProperty("translateZ", props->translateZ);
+
+            propsObjBuilder.addProperty("fillRule", props->fillRule);
+            propsObjBuilder.addProperty("strokeWidth", props->strokeWidth);
+            propsObjBuilder.addProperty("strokeCap", props->strokeCap);
+            propsObjBuilder.addProperty("strokeJoin", props->strokeJoin);
+            propsObjBuilder.addProperty("strokeMiter", props->strokeMiter);
+            propsObjBuilder.addProperty("strokeStart", props->strokeStart);
+            propsObjBuilder.addProperty("strokeEnd", props->strokeEnd);
+
+            propsObjBuilder.addProperty("sc", props->sc);
+            propsObjBuilder.addProperty("scX", props->scX);
+            propsObjBuilder.addProperty("scY", props->scY);
+            propsObjBuilder.addProperty("scO", props->scO);
+            propsObjBuilder.addProperty("scOx", props->scOx);
+            propsObjBuilder.addProperty("scOy", props->scOy);
+            propsObjBuilder.addProperty("scPercentageValue", props->scPercentageValue);
+
+            propsObjBuilder.addProperty("rot", props->rot);
+            propsObjBuilder.addProperty("rotO", props->rotO);
+            propsObjBuilder.addProperty("rotOx", props->rotOx);
+            propsObjBuilder.addProperty("rotOy", props->rotOy);
+            propsObjBuilder.addProperty("rotPercentageValue", props->rotPercentageValue);
+
+            propsObjBuilder.addProperty("transX", props->transX);
+            propsObjBuilder.addProperty("transY", props->transY);
+            propsObjBuilder.addProperty("transPercentageValue", props->transPercentageValue);
+            auto boxArray = std::vector<napi_value>();
+            auto boxArrayRaw = props->viewBox;
+
+            for (auto item : boxArrayRaw) {
+                auto itemObjBuilder = ArkJS(env).createDouble(item);
+                boxArray.push_back(itemObjBuilder);
+            }
+
+            auto boxArrayArray = ArkJS(env).createArray(boxArray);
+
+            propsObjBuilder.addProperty("viewBox", boxArrayArray);
+
+            return propsObjBuilder.build();
+        }
+        return napiViewProps;
+    };
+};
+
+} // namespace rnoh
+#endif