@react-native-ohos/react-native-svg 15.12.1-rc.1

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) [2015-2016] [Horcrux]
+
+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.OpenSource

@@ -0,0 +1,11 @@
+[
+    {
+        "Name": "@react-native-ohos/react-native-svg",
+        "License": "MIT License",
+        "License File": " LICENSE ",
+        "Version Number": "15.12.1",
+        "Owner" : "xiafeng@huawei.com",
+        "Upstream URL": "https://github.com/react-native-oh-library/react-native-harmony-svg",
+        "Description": "SVG library for React Native OpenHarmony."
+    }
+]

package/README.md

@@ -0,0 +1,13 @@
+# @react-native-ohos/react-native-svg
+
+This project is based on [react-native-svg v15.12.1](https://github.com/software-mansion/react-native-svg/releases/tag/v15.12.1)
+
+## Documentation
+
+- [中文](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-svg-capi.md)
+
+- [English](https://gitee.com/react-native-oh-library/usage-docs/blob/master/en/react-native-svg-capi.md)
+
+## License
+
+This library is licensed under [The MIT License (MIT)](https://github.com/software-mansion/react-native-svg/blob/main/LICENSE)

package/css/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "../lib/commonjs/css/index",
+    "module": "../lib/module/css/index",
+    "react-native": "../src/css/index",
+    "types": "../lib/typescript/css/index"
+  }

package/harmony/svg/BuildProfile.ets

@@ -0,0 +1,17 @@
+/**
+ * Use these variables when you tailor your ArkTS code. They must be of the const type.
+ */
+export const HAR_VERSION = '15.12.1-rc.1';
+export const BUILD_MODE_NAME = 'debug';
+export const DEBUG = true;
+export const TARGET_NAME = 'default';
+
+/**
+ * BuildProfile Class is used only for compatibility purposes.
+ */
+export default class BuildProfile { 
+	static readonly HAR_VERSION = HAR_VERSION;
+	static readonly BUILD_MODE_NAME = BUILD_MODE_NAME;
+	static readonly DEBUG = DEBUG;
+	static readonly TARGET_NAME = TARGET_NAME;
+}

package/harmony/svg/build-profile.json5

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

package/harmony/svg/hvigorfile.ts

@@ -0,0 +1,2 @@
+// Script for compiling build behavior. It is built in the build plug-in and cannot be modified currently.
+export { harTasks } from '@ohos/hvigor-ohos-plugin';

package/harmony/svg/index.ets

@@ -0,0 +1,7 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+export * from './ts'

package/harmony/svg/oh-package.json5

@@ -0,0 +1,13 @@
+{
+  license: 'MIT',
+  devDependencies: {},
+  author: '',
+  description: "",
+  name: '@react-native-ohos/react-native-svg',
+  type: 'module',
+  main: 'index.ets',
+  version: '15.12.1-rc.1',
+  dependencies: {
+    "@rnoh/react-native-openharmony": "file:../../node_modules/@react-native-oh/react-native-harmony/harmony/react_native_openharmony.har"
+  },
+}

package/harmony/svg/src/main/cpp/Attribute.h

@@ -0,0 +1,52 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ *
+ * This file incorporates from the OpenHarmony project, licensed under
+ * the Apache License, Version 2.0. Specifically:
+ * - [OpenHarmony/arkui_ace_engine] (https://gitee.com/openharmony/arkui_ace_engine)
+ *
+ * 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.
+ */
+
+// from ArkUI "frameworks/core/components/declaration/common/attribute.h"
+#pragma once
+
+namespace rnoh {
+namespace svg {
+
+enum class AttributeTag {
+    COMMON_ATTR = 0,
+    COMMON_DISABLED_ATTR,
+    COMMON_FOCUSABLE_ATTR,
+    COMMON_TOUCHABLE_ATTR,
+    COMMON_DATA_ATTR,
+    COMMON_CLICK_EFFECT_ATTR,
+    COMMON_RENDER_ATTR,
+    COMMON_MULTIMODAL_ATTR,
+    SPECIALIZED_ATTR,
+    UNKNOWN,
+    DEFAULT,
+};
+
+struct Attribute {
+    bool IsValid() const { return tag != AttributeTag::UNKNOWN; }
+
+    bool IsShared() const { return isShared; }
+
+    bool isShared = true;
+    AttributeTag tag = AttributeTag::DEFAULT;
+};
+
+} // namespace svg
+} // namespace rnoh

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

@@ -0,0 +1,32 @@
+cmake_minimum_required(VERSION 3.13)
+set(CMAKE_VERBOSE_MAKEFILE on)
+
+set(rnoh_svg_generated_dir "${CMAKE_CURRENT_SOURCE_DIR}/generated")
+file(GLOB_RECURSE rnoh_svg_generated_SRC "${rnoh_svg_generated_dir}/**/*.cpp")
+file(GLOB rnoh_svg_SRC CONFIGURE_DEPENDS
+    *.cpp
+    componentInstances/*.cpp
+    drawing/*.cpp
+    properties/*.cpp
+    turboModules/*.cpp
+    utils/*.cpp
+    svgImage/*.cpp
+    downloadUtils/*.cpp
+    )
+add_library(rnoh_svg SHARED ${rnoh_svg_SRC} ${rnoh_svg_generated_SRC})
+target_include_directories(rnoh_svg PUBLIC ${CMAKE_CURRENT_SOURCE_DIR} ${rnoh_svg_generated_dir})
+
+target_link_libraries(rnoh_svg PUBLIC rnoh)
+target_link_libraries(rnoh_svg PUBLIC libimage_source.so)
+target_link_libraries(rnoh_svg PUBLIC libpixelmap.so)
+target_link_libraries(rnoh_svg PUBLIC libimage_packer.so)
+target_link_libraries(rnoh_svg PUBLIC librawfile.z.so)
+target_link_libraries(rnoh_svg PUBLIC librcp_c.so)
+target_link_libraries(rnoh_svg PUBLIC libohfileuri.so)
+
+
+if("${OHOS_ARCH}" STREQUAL "arm64-v8a")
+    target_link_directories(rnoh_svg PUBLIC ${HMOS_SDK_NATIVE}/sysroot/usr/lib/aarch64-linux-ohos)
+elseif("${OHOS_ARCH}" STREQUAL "x86_64")
+    target_link_directories(rnoh_svg PUBLIC ${HMOS_SDK_NATIVE}/sysroot/usr/lib/x86_64-linux-ohos)
+endif()

package/harmony/svg/src/main/cpp/FontHolderBase.cpp

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+#include "FontHolderBase.h"
+
+namespace rnoh {
+namespace svg {
+
+void FontHolderBase::InheritFont(const std::shared_ptr<FontData> &parent, double scale) {
+    if (fp_.Empty()) {
+        // share parent font to save memory
+        font_ = parent;
+    } else {
+        font_ = std::make_shared<FontData>(fp_, *parent, scale);
+    }
+}
+
+} // namespace svg
+} // namespace rnoh

package/harmony/svg/src/main/cpp/FontHolderBase.h

@@ -0,0 +1,54 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+#pragma once
+
+#include <memory>
+#include "properties/Font.h"
+
+namespace rnoh {
+namespace svg {
+
+class FontHolderBase {
+public:
+    template <typename T> void UpdateFontProps(const std::shared_ptr<T> &props) {
+        if constexpr (requires { props->font; }) {
+            auto& font = props->font;
+            if (!font.isNull()) {
+                fp_.fontStyle = font.count("fontStyle") > 0 ? font["fontStyle"].asString() : "";
+                fp_.fontVariant = font.count("fontVariant") > 0 ? font["fontVariant"].asString() : "";
+                fp_.fontWeight = font.count("fontWeight") > 0 ? font["fontWeight"].asString() : "";
+                fp_.fontStretch = font.count("fontStretch") > 0 ? font["fontStretch"].asString() : "";
+                fp_.fontSize = font.count("fontSize") > 0 ? font["fontSize"].asString() : "";
+                fp_.fontFamily = font.count("fontFamily") > 0 ? font["fontFamily"].asString() : "";
+                fp_.textAnchor = font.count("textAnchor") > 0 ? font["textAnchor"].asString() : "";
+                fp_.textDecoration = font.count("textDecoration") > 0 ? font["textDecoration"].asString() : "";
+                fp_.letterSpacing = font.count("letterSpacing") > 0 ? font["letterSpacing"].asString() : "";
+                fp_.wordSpacing = font.count("wordSpacing") > 0 ? font["wordSpacing"].asString() : "";
+                fp_.kerning = font.count("kerning") > 0 ? font["kerning"].asString() : "";
+                fp_.fontFeatureSettings = font.count("fontFeatureSettings") > 0 ? font["fontFeatureSettings"].asString() : "";
+                fp_.fontVariantLigatures = font.count("fontVariantLigatures") > 0 ? font["fontVariantLigatures"].asString() : "";
+                fp_.fontVariationSettings = font.count("fontVariationSettings") > 0 ? font["fontVariationSettings"].asString() : "";
+            } else {
+                fp_ = FontProps{};
+            }
+        }
+    }
+
+    void InheritFont(const std::shared_ptr<FontData> &parent, double scale);
+
+    // init when font parent is not present
+    void InitFont(double scale) { font_ = std::make_shared<FontData>(fp_, FontData{}, scale); }
+
+protected:
+    std::shared_ptr<FontData> font_;
+
+private:
+    FontProps fp_; // save intermediate font properties here because tree is not ready during onPropsChanged
+};
+
+} // namespace svg
+} // namespace rnoh

package/harmony/svg/src/main/cpp/SVGPackage.cpp

@@ -0,0 +1,135 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+#pragma once
+
+#include "SVGPackage.h"
+
+#include "RNOH/generated/components/RNSVGGroupJSIBinder.h"
+#include "RNOH/generated/components/RNSVGSvgViewJSIBinder.h"
+#include "RNOH/generated/components/RNSVGPathJSIBinder.h"
+#include "RNOH/generated/components/RNSVGRectJSIBinder.h"
+#include "RNOH/generated/components/RNSVGImageJSIBinder.h"
+#include "RNOH/generated/components/RNSVGCircleJSIBinder.h"
+#include "RNOH/generated/components/RNSVGEllipseJSIBinder.h"
+#include "RNOH/generated/components/RNSVGLinearGradientJSIBinder.h"
+#include "RNOH/generated/components/RNSVGDefsJSIBinder.h"
+#include "RNOH/generated/components/RNSVGTextJSIBinder.h"
+#include "RNOH/generated/components/RNSVGTSpanJSIBinder.h"
+#include "RNOH/generated/components/RNSVGClipPathJSIBinder.h"
+#include "RNOH/generated/components/RNSVGMaskJSIBinder.h"
+#include "RNOH/generated/components/RNSVGMarkerJSIBinder.h"
+#include "RNOH/generated/components/RNSVGUseJSIBinder.h"
+#include "RNOH/generated/components/RNSVGForeignObjectJSIBinder.h"
+#include "RNOH/generated/components/RNSVGLineJSIBinder.h"
+#include "RNOH/generated/components/RNSVGPatternJSIBinder.h"
+#include "RNOH/generated/components/RNSVGRadialGradientJSIBinder.h"
+#include "RNOH/generated/components/RNSVGSymbolJSIBinder.h"
+#include "RNOH/generated/components/RNSVGTextPathJSIBinder.h"
+#include "RNOH/generated/components/RNSVGFilterJSIBinder.h"
+#include "RNOH/generated/components/RNSVGFeBlendJSIBinder.h"
+#include "RNOH/generated/components/RNSVGFeColorMatrixJSIBinder.h"
+#include "RNOH/generated/components/RNSVGFeCompositeJSIBinder.h"
+#include "RNOH/generated/components/RNSVGFeGaussianBlurJSIBinder.h"
+#include "RNOH/generated/components/RNSVGFeFloodJSIBinder.h"
+#include "RNOH/generated/components/RNSVGFeOffsetJSIBinder.h"
+#include "turboModules/RNSVGSvgViewModule.h"
+#include "turboModules/RNSVGRenderableModule.h"
+#include "turboModules/RNSVGImageModule.h"
+#include <react/renderer/components/react_native_svg/ComponentDescriptors.h>
+#include "svgImage/RNSVGImageComponentDescriptor.h"
+
+using namespace rnoh;
+using namespace facebook;
+using namespace svg;
+
+std::vector<react::ComponentDescriptorProvider> SVGPackage::createComponentDescriptorProviders() {
+    return {
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::RNSVGCircleComponentDescriptor>(),
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::RNSVGClipPathComponentDescriptor>(),
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::RNSVGDefsComponentDescriptor>(),
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::RNSVGEllipseComponentDescriptor>(),
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::RNSVGFeBlendComponentDescriptor>(),
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::RNSVGFeColorMatrixComponentDescriptor>(),
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::RNSVGFeCompositeComponentDescriptor>(),
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::RNSVGFeGaussianBlurComponentDescriptor>(),
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::RNSVGFeFloodComponentDescriptor>(),
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::RNSVGFeOffsetComponentDescriptor>(),
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::RNSVGFilterComponentDescriptor>(),
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::RNSVGForeignObjectComponentDescriptor>(),
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::RNSVGGroupComponentDescriptor>(),
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::RNSVGSvgViewComponentDescriptor>(),
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::RNSVGImageComponentDescriptor>(),
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::RNSVGLineComponentDescriptor>(),
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::RNSVGLinearGradientComponentDescriptor>(),
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::RNSVGMarkerComponentDescriptor>(),
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::RNSVGMaskComponentDescriptor>(),
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::RNSVGPathComponentDescriptor>(),
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::RNSVGPatternComponentDescriptor>(),
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::RNSVGRadialGradientComponentDescriptor>(),
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::RNSVGRectComponentDescriptor>(),
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::RNSVGSymbolComponentDescriptor>(),
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::RNSVGTSpanComponentDescriptor>(),
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::RNSVGTextComponentDescriptor>(),
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::RNSVGTextPathComponentDescriptor>(),
+        facebook::react::concreteComponentDescriptorProvider<facebook::react::RNSVGUseComponentDescriptor>(),
+    };
+}
+
+ComponentNapiBinderByString SVGPackage::createComponentNapiBinderByName() { return {}; }
+
+ComponentJSIBinderByString SVGPackage::createComponentJSIBinderByName() {
+    return {
+        {"RNSVGCircle", std::make_shared<RNSVGCircleJSIBinder>()},
+        {"RNSVGClipPath", std::make_shared<RNSVGClipPathJSIBinder>()},
+        {"RNSVGDefs", std::make_shared<RNSVGDefsJSIBinder>()},
+        {"RNSVGEllipse", std::make_shared<RNSVGEllipseJSIBinder>()},
+        {"RNSVGForeignObject", std::make_shared<RNSVGForeignObjectJSIBinder>()},
+        {"RNSVGGroup", std::make_shared<RNSVGGroupJSIBinder>()},
+        {"RNSVGSvgView", std::make_shared<RNSVGSvgViewJSIBinder>()},
+        {"RNSVGImage", std::make_shared<RNSVGImageJSIBinder>()},
+        {"RNSVGLine", std::make_shared<RNSVGLineJSIBinder>()},
+        {"RNSVGLinearGradient", std::make_shared<RNSVGLinearGradientJSIBinder>()},
+        {"RNSVGRadialGradient", std::make_shared<RNSVGRadialGradientJSIBinder>()},
+        {"RNSVGMarker", std::make_shared<RNSVGMarkerJSIBinder>()},
+        {"RNSVGMask", std::make_shared<RNSVGMaskJSIBinder>()},
+        {"RNSVGPath", std::make_shared<RNSVGPathJSIBinder>()},
+        {"RNSVGPattern", std::make_shared<RNSVGPatternJSIBinder>()},
+        {"RNSVGRect", std::make_shared<RNSVGRectJSIBinder>()},
+        {"RNSVGSymbol", std::make_shared<RNSVGSymbolJSIBinder>()},
+        {"RNSVGTSpan", std::make_shared<RNSVGTSpanJSIBinder>()},
+        {"RNSVGText", std::make_shared<RNSVGTextJSIBinder>()},
+        {"RNSVGTextPath", std::make_shared<RNSVGTextPathJSIBinder>()},
+        {"RNSVGUse", std::make_shared<RNSVGUseJSIBinder>()},
+        {"RNSVGFilter", std::make_shared<RNSVGFilterJSIBinder>()},
+        {"RNSVGFeBlend", std::make_shared<RNSVGFeBlendJSIBinder>()},
+        {"RNSVGFeColorMatrix", std::make_shared<RNSVGFeColorMatrixJSIBinder>()},
+        {"RNSVGFeComposite", std::make_shared<RNSVGFeCompositeJSIBinder>()},
+        {"RNSVGFeGaussianBlur", std::make_shared<RNSVGFeGaussianBlurJSIBinder>()},
+        {"RNSVGFeFlood", std::make_shared<RNSVGFeFloodJSIBinder>()},
+        {"RNSVGFeOffset", std::make_shared<RNSVGFeOffsetJSIBinder>()},
+    };
+};
+
+class SvgTurboModuleFactoryDelegate : public TurboModuleFactoryDelegate {
+public:
+    SharedTurboModule createTurboModule(Context ctx, const std::string &name) const override {
+        if (name == "RNSVGSvgViewModule") {
+            return std::make_shared<RNSVGSvgViewModule>(ctx, name);
+        }
+        if (name == "RNSVGRenderableModule") {
+            return std::make_shared<RNSVGRenderableModule>(ctx, name);
+        }
+        if (name == "RNSVGImageModule") {
+            return std::make_shared<RNSVGImageModule>(ctx, name);
+        }
+        return nullptr;
+    };
+};
+
+std::unique_ptr<TurboModuleFactoryDelegate> SVGPackage::createTurboModuleFactoryDelegate() {
+    return std::make_unique<SvgTurboModuleFactoryDelegate>();
+}

package/harmony/svg/src/main/cpp/SVGPackage.h

@@ -0,0 +1,153 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+#pragma once
+
+#include "RNOH/Package.h"
+#include <glog/logging.h>
+#include "componentInstances/RNSVGSvgViewComponentInstance.h"
+#include "componentInstances/RNSVGCircleComponentInstance.h"
+#include "componentInstances/RNSVGGroupComponentInstance.h"
+#include "componentInstances/RNSVGPathComponentInstance.h"
+#include "componentInstances/RNSVGRectComponentInstance.h"
+#include "componentInstances/RNSVGImageComponentInstance.h"
+#include "componentInstances/RNSVGEllipseComponentInstance.h"
+#include "componentInstances/RNSVGLinearGradientComponentInstance.h"
+#include "componentInstances/RNSVGRadialGradientComponentInstance.h"
+#include "componentInstances/RNSVGLineComponentInstance.h"
+#include "componentInstances/RNSVGDefsComponentInstance.h"
+#include "componentInstances/RNSVGTextComponentInstance.h"
+#include "componentInstances/RNSVGTextPathComponentInstance.h"
+#include "componentInstances/RNSVGTSpanComponentInstance.h"
+#include "componentInstances/RNSVGClipPathComponentInstance.h"
+#include "componentInstances/RNSVGMaskComponentInstance.h"
+#include "componentInstances/RNSVGUseComponentInstance.h"
+#include "componentInstances/RNSVGMarkerComponentInstance.h"
+#include "componentInstances/RNSVGPatternComponentInstance.h"
+#include "componentInstances/RNSVGSymbolComponentInstance.h"
+#include "componentInstances/RNSVGFilterComponentInstance.h"
+#include "componentInstances/RNSVGFeBlendComponentInstance.h"
+#include "componentInstances/RNSVGFeColorMatrixComponentInstance.h"
+#include "componentInstances/RNSVGFeFloodComponentInstance.h"
+#include "componentInstances/RNSVGFeCompositeComponentInstance.h"
+#include "componentInstances/RNSVGFeGaussianBlurComponentInstance.h"
+#include "componentInstances/RNSVGFeOffsetComponentInstance.h"
+
+using namespace rnoh;
+using namespace facebook;
+using namespace svg;
+
+namespace rnoh {
+
+class SVGPackageComponentInstanceFactoryDelegate : public ComponentInstanceFactoryDelegate {
+public:
+    using ComponentInstanceFactoryDelegate::ComponentInstanceFactoryDelegate;
+
+    ComponentInstance::Shared create(ComponentInstance::Context ctx) override {
+        DLOG(INFO) << "[SVGPackageComponentInstanceFactoryDelegate] create componentName= " << ctx.componentName;
+        if (ctx.componentName == "RNSVGSvgView") {
+            return std::make_shared<RNSVGSvgViewComponentInstance>(std::move(ctx));
+        }
+        if (ctx.componentName == "RNSVGCircle") {
+            return std::make_shared<RNSVGCircleComponentInstance>(std::move(ctx));
+        }
+        if (ctx.componentName == "RNSVGGroup") {
+            return std::make_shared<RNSVGGroupComponentInstance>(std::move(ctx));
+        }
+        if (ctx.componentName == "RNSVGPath") {
+            return std::make_shared<RNSVGPathComponentInstance>(std::move(ctx));
+        }
+        if (ctx.componentName == "RNSVGRect") {
+            return std::make_shared<RNSVGRectComponentInstance>(std::move(ctx));
+        }
+        if (ctx.componentName == "RNSVGImage") {
+            return std::make_shared<RNSVGImageComponentInstance>(std::move(ctx));
+        }
+        if (ctx.componentName == "RNSVGEllipse") {
+            return std::make_shared<RNSVGEllipseComponentInstance>(std::move(ctx));
+        }
+        if (ctx.componentName == "RNSVGLinearGradient") {
+            return std::make_shared<RNSVGLinearGradientComponentInstance>(std::move(ctx));
+        }
+        if (ctx.componentName == "RNSVGRadialGradient") {
+            return std::make_shared<RNSVGRadialGradientComponentInstance>(std::move(ctx));
+        }
+        if (ctx.componentName == "RNSVGLine") {
+            return std::make_shared<RNSVGLineComponentInstance>(std::move(ctx));
+        }
+        if (ctx.componentName == "RNSVGDefs") {
+            return std::make_shared<RNSVGDefsComponentInstance>(std::move(ctx));
+        }
+        if (ctx.componentName == "RNSVGText") {
+            return std::make_shared<RNSVGTextComponentInstance>(std::move(ctx));
+        }
+        if (ctx.componentName == "RNSVGTSpan") {
+            return std::make_shared<RNSVGTSpanComponentInstance>(std::move(ctx));
+        }
+        if (ctx.componentName == "RNSVGTextPath") {
+            return std::make_shared<RNSVGTextPathComponentInstance>(std::move(ctx));
+        }
+        if (ctx.componentName == "RNSVGClipPath") {
+            return std::make_shared<RNSVGClipPathComponentInstance>(std::move(ctx));
+        }
+        if (ctx.componentName == "RNSVGMask") {
+            return std::make_shared<RNSVGMaskComponentInstance>(std::move(ctx));
+        }
+        if (ctx.componentName == "RNSVGUse") {
+            return std::make_shared<RNSVGUseComponentInstance>(std::move(ctx));
+        }
+        if (ctx.componentName == "RNSVGMarker") {
+            return std::make_shared<RNSVGMarkerComponentInstance>(std::move(ctx));
+        }
+        if (ctx.componentName == "RNSVGPattern") {
+            return std::make_shared<RNSVGPatternComponentInstance>(std::move(ctx));
+        }
+        if (ctx.componentName == "RNSVGSymbol") {
+            return std::make_shared<RNSVGSymbolComponentInstance>(std::move(ctx));
+        }
+        if (ctx.componentName == "RNSVGFilter") {
+            return std::make_shared<RNSVGFilterComponentInstance>(std::move(ctx));
+        }
+        if (ctx.componentName == "RNSVGFeBlend") {
+            return std::make_shared<RNSVGFeBlendComponentInstance>(std::move(ctx));
+        }
+        if (ctx.componentName == "RNSVGFeColorMatrix") {
+            return std::make_shared<RNSVGFeColorMatrixComponentInstance>(std::move(ctx));
+        }
+        if (ctx.componentName == "RNSVGFeFlood") {
+            return std::make_shared<RNSVGFeFloodComponentInstance>(std::move(ctx));
+        }
+        if (ctx.componentName == "RNSVGFeComposite") {
+            return std::make_shared<RNSVGFeCompositeComponentInstance>(std::move(ctx));
+        }
+        if (ctx.componentName == "RNSVGFeGaussianBlur") {
+            return std::make_shared<RNSVGFeGaussianBlurComponentInstance>(std::move(ctx));
+        }
+        if (ctx.componentName == "RNSVGFeOffset") {
+            return std::make_shared<RNSVGFeOffsetComponentInstance>(std::move(ctx));
+        }
+        return nullptr;
+    }
+};
+
+class SVGPackage : public Package {
+public:
+    explicit SVGPackage(Package::Context ctx) : Package(ctx) {}
+
+    std::unique_ptr<TurboModuleFactoryDelegate> createTurboModuleFactoryDelegate() override;
+
+    ComponentInstanceFactoryDelegate::Shared createComponentInstanceFactoryDelegate() override {
+        return std::make_shared<SVGPackageComponentInstanceFactoryDelegate>();
+    }
+
+    std::vector<facebook::react::ComponentDescriptorProvider> createComponentDescriptorProviders() override;
+
+    ComponentNapiBinderByString createComponentNapiBinderByName() override;
+
+    ComponentJSIBinderByString createComponentJSIBinderByName() override;
+};
+
+} // namespace rnoh

package/harmony/svg/src/main/cpp/SvgArkUINode.cpp

@@ -0,0 +1,75 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+#include "arkui/native_node.h"
+#include "arkui/native_type.h"
+#include "RNOH/arkui/NativeNodeApi.h"
+#include "SvgArkUINode.h"
+#include <native_drawing/drawing_canvas.h>
+#include <native_drawing/drawing_path.h>
+#include <native_drawing/drawing_pen.h>
+#include <native_drawing/drawing_types.h>
+#include <sstream>
+#include <functional>
+#include "SvgViewManager.h"
+
+namespace rnoh {
+namespace svg {
+
+constexpr int NODE_EVENT_ID = 77;
+
+// 对应SVGArkUINode
+SvgArkUINode::SvgArkUINode() : ArkUINode(NativeNodeApi::getInstance()->createNode(ArkUI_NodeType::ARKUI_NODE_CUSTOM)) {
+    userCallback_ = new UserCallback();
+    // 设置自定义回调。注册onDraw
+    userCallback_->callback = [this](ArkUI_NodeCustomEvent *event) {
+        auto type = OH_ArkUI_NodeCustomEvent_GetEventType(event);
+        switch (type) {
+        case ARKUI_NODE_CUSTOM_EVENT_ON_DRAW:
+            OnDraw(event);
+            break;
+        default:
+            break;
+        }
+    };
+    eventReceiver = [](ArkUI_NodeCustomEvent *event) {
+        if (OH_ArkUI_NodeCustomEvent_GetEventTargetId(event) == NODE_EVENT_ID) {
+            auto *userData = reinterpret_cast<UserCallback *>(OH_ArkUI_NodeCustomEvent_GetUserData(event));
+            if (userData != nullptr && userData->callback != nullptr) {
+                userData->callback(event);
+            }
+        }
+    };
+    maybeThrow(NativeNodeApi::getInstance()->addNodeCustomEventReceiver(m_nodeHandle, eventReceiver));
+    maybeThrow(NativeNodeApi::getInstance()->registerNodeCustomEvent(m_nodeHandle, ARKUI_NODE_CUSTOM_EVENT_ON_DRAW, NODE_EVENT_ID,
+                                                                     userCallback_));
+}
+
+SvgArkUINode::~SvgArkUINode() {
+    NativeNodeApi::getInstance()->removeNodeCustomEventReceiver(m_nodeHandle, eventReceiver);
+    NativeNodeApi::getInstance()->unregisterNodeCustomEvent(m_nodeHandle, ARKUI_NODE_CUSTOM_EVENT_ON_DRAW);
+    delete userCallback_;
+    userCallback_ = nullptr;
+}
+
+void SvgArkUINode::OnDraw(ArkUI_NodeCustomEvent *event) {
+    auto *drawContext = OH_ArkUI_NodeCustomEvent_GetDrawContextInDraw(event);
+    auto *drawingHandle = reinterpret_cast<OH_Drawing_Canvas *>(OH_ArkUI_DrawContext_GetCanvas(drawContext));
+    DLOG(INFO) << "[svg] <SVGArkUINode> CanvasGetHeight: " << OH_Drawing_CanvasGetHeight(drawingHandle);
+    DLOG(INFO) << "[svg] <SVGArkUINode> CanvasGetWidth: " << OH_Drawing_CanvasGetWidth(drawingHandle);
+    auto root = root_.lock();
+    CHECK_NULL_VOID(root);
+    if (root->GetContext()) {
+        // reset the idMap
+        root->GetContext()->ClearIdMap();
+    }
+    root->ContextTraversal();
+    root->InitStyle({});
+    root->Draw(drawingHandle);
+}
+
+} // namespace svg
+} // namespace rnoh