@react-native-ohos/react-native-svg 15.0.2-rc.5 → 15.12.1-rc.10

package/harmony/svg/src/main/cpp/componentInstances/RNSVGLinearGradientComponentInstance.cpp

@@ -0,0 +1,30 @@
+/*
+ * 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 "RNSVGLinearGradientComponentInstance.h"
+#include "utils/DynamicUtils.h"
+
+namespace rnoh {
+namespace svg {
+
+RNSVGLinearGradientComponentInstance::RNSVGLinearGradientComponentInstance(Context context)
+    : RNSVGBaseComponentInstance(std::move(context)) {
+    SetSvgNode(m_svgLinearGradient);
+}
+
+void RNSVGLinearGradientComponentInstance::UpdateElementProps() {
+    m_svgLinearGradient->UpdateHrefRenderProps(m_props);
+    m_svgLinearGradient->SetAttrGradientUnits(m_props->gradientUnits); // first set attr gradientUnits
+    m_svgLinearGradient->SetAttrX1(DynamicUtils::DynamicToString(m_props->x1));
+    m_svgLinearGradient->SetAttrY1(DynamicUtils::DynamicToString(m_props->y1));
+    m_svgLinearGradient->SetAttrX2(DynamicUtils::DynamicToString(m_props->x2));
+    m_svgLinearGradient->SetAttrY2(DynamicUtils::DynamicToString(m_props->y2));
+    m_svgLinearGradient->SetAttrGradient(m_props->gradient);
+    m_svgLinearGradient->SetAttrGradientTransforms(m_props->gradientTransform);
+}
+
+} // namespace svg
+} // namespace rnoh

package/harmony/svg/src/main/cpp/componentInstances/RNSVGLinearGradientComponentInstance.h

@@ -0,0 +1,28 @@
+/*
+ * 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 "RNSVGBaseComponentInstance.h"
+#include "SvgGradient.h"
+
+namespace rnoh {
+namespace svg {
+
+class RNSVGLinearGradientComponentInstance
+    : public RNSVGBaseComponentInstance<facebook::react::RNSVGLinearGradientShadowNode> {
+public:
+    explicit RNSVGLinearGradientComponentInstance(Context context);
+
+protected:
+    void UpdateElementProps() override;
+
+private:
+    std::shared_ptr<SvgGradient> m_svgLinearGradient = std::make_shared<SvgGradient>(GradientType::LINEAR);
+};
+
+} // namespace svg
+} // namespace rnoh

package/harmony/svg/src/main/cpp/componentInstances/RNSVGMarkerComponentInstance.cpp

@@ -0,0 +1,35 @@
+/*
+ * 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 "RNSVGMarkerComponentInstance.h"
+#include "utils/DynamicUtils.h"
+
+namespace rnoh {
+namespace svg {
+
+RNSVGMarkerComponentInstance::RNSVGMarkerComponentInstance(Context context)
+    : RNSVGBaseComponentInstance(std::move(context)) {
+    SetSvgNode(m_svgMarker);
+}
+
+void RNSVGMarkerComponentInstance::UpdateElementProps() {
+    m_svgMarker->UpdateCommonProps(m_props);
+    m_svgMarker->setRefX(DynamicUtils::DynamicToString(m_props->refX));
+    m_svgMarker->setRefY(DynamicUtils::DynamicToString(m_props->refY));
+    m_svgMarker->setMarkerWidth(DynamicUtils::DynamicToString(m_props->markerWidth));
+    m_svgMarker->setMarkerHeight(DynamicUtils::DynamicToString(m_props->markerHeight));
+    m_svgMarker->setMarkerUnits(m_props->markerUnits);
+    m_svgMarker->setOrient(m_props->orient);
+    m_svgMarker->setMinX(m_props->minX);
+    m_svgMarker->setMinY(m_props->minY);
+    m_svgMarker->setVbWidth(m_props->vbWidth);
+    m_svgMarker->setVbHeight(m_props->vbHeight);
+    m_svgMarker->setAlign(m_props->align);
+    m_svgMarker->setMeetOrSlice(m_props->meetOrSlice);
+}
+
+} // namespace svg
+} // namespace rnoh

package/harmony/svg/src/main/cpp/componentInstances/RNSVGMarkerComponentInstance.h

@@ -0,0 +1,27 @@
+/*
+ * 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 "RNSVGBaseComponentInstance.h"
+#include "SvgMarker.h"
+
+namespace rnoh {
+namespace svg {
+
+class RNSVGMarkerComponentInstance : public RNSVGBaseComponentInstance<facebook::react::RNSVGMarkerShadowNode> {
+public:
+    explicit RNSVGMarkerComponentInstance(Context context);
+
+protected:
+    void UpdateElementProps() override;
+
+private:
+    std::shared_ptr<SvgMarker> m_svgMarker = std::make_shared<SvgMarker>();
+};
+
+} // namespace svg
+} // namespace rnoh

package/harmony/svg/src/main/cpp/componentInstances/RNSVGMaskComponentInstance.cpp

@@ -0,0 +1,30 @@
+/*
+ * 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 "RNSVGMaskComponentInstance.h"
+#include "utils/DynamicUtils.h"
+
+namespace rnoh {
+namespace svg {
+
+RNSVGMaskComponentInstance::RNSVGMaskComponentInstance(Context context)
+    : RNSVGBaseComponentInstance(std::move(context)) {
+    SetSvgNode(m_svgMask);
+}
+
+void RNSVGMaskComponentInstance::UpdateElementProps() {
+    m_svgMask->UpdateCommonProps(m_props);
+    // set attribute to svgMask.
+    m_svgMask->setMaskUnits(m_props->maskUnits);
+    m_svgMask->setMaskContentUnits(m_props->maskContentUnits);
+    m_svgMask->setMaskX(DynamicUtils::DynamicToString(m_props->x));
+    m_svgMask->setMaskY(DynamicUtils::DynamicToString(m_props->y));
+    m_svgMask->setMaskHeight(DynamicUtils::DynamicToString(m_props->height));
+    m_svgMask->setMaskWidth(DynamicUtils::DynamicToString(m_props->width));
+}
+
+} // namespace svg
+} // namespace rnoh

package/harmony/svg/src/main/cpp/componentInstances/RNSVGMaskComponentInstance.h

@@ -0,0 +1,27 @@
+/*
+ * 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 "RNSVGBaseComponentInstance.h"
+#include "SvgMask.h"
+
+namespace rnoh {
+namespace svg {
+
+class RNSVGMaskComponentInstance : public RNSVGBaseComponentInstance<facebook::react::RNSVGMaskShadowNode> {
+public:
+    explicit RNSVGMaskComponentInstance(Context context);
+
+protected:
+    void UpdateElementProps() override;
+
+private:
+    std::shared_ptr<SvgMask> m_svgMask = std::make_shared<SvgMask>();
+};
+
+} // namespace svg
+} // namespace rnoh

package/harmony/svg/src/main/cpp/componentInstances/RNSVGPathComponentInstance.cpp

@@ -0,0 +1,33 @@
+/*
+ * 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 "RNSVGPathComponentInstance.h"
+#include <react/renderer/components/react_native_svg/Props.h>
+
+namespace rnoh {
+namespace svg {
+
+RNSVGPathComponentInstance::RNSVGPathComponentInstance(Context context)
+    : RNSVGBaseComponentInstance(std::move(context)) {
+    SetSvgNode(m_svgPath);
+}
+
+void RNSVGPathComponentInstance::UpdateElementProps() {
+    DLOG(INFO) << "[RNSVGPathCI] d: " << m_props->d;
+    DLOG(INFO) << "[RNSVGPathCI] pointScaleFactor: " << m_layoutMetrics.pointScaleFactor;
+    m_svgPath->UpdateCommonProps(m_props);
+    // Check if path data or scale factor has changed
+    if (m_cacheD != m_props->d || m_cacheScale != m_layoutMetrics.pointScaleFactor) {
+        m_svgPath->setD(m_props->d); // Update path data
+        m_cacheD = m_props->d;       // Cache the new path data
+        m_cacheScale = m_layoutMetrics.pointScaleFactor; // Cache the new scale factor
+    } else {
+        LOG(INFO) << "[RNSVGPathCI] No changes detected. Skipping update.";
+    }
+}
+
+} // namespace svg
+} // namespace rnoh

package/harmony/svg/src/main/cpp/componentInstances/RNSVGPathComponentInstance.h

@@ -0,0 +1,29 @@
+/*
+ * 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 "RNSVGBaseComponentInstance.h"
+#include "SvgPath.h"
+
+namespace rnoh {
+namespace svg {
+
+class RNSVGPathComponentInstance : public RNSVGBaseComponentInstance<facebook::react::RNSVGPathShadowNode> {
+public:
+    explicit RNSVGPathComponentInstance(Context context);
+
+protected:
+    void UpdateElementProps() override;
+
+private:
+    std::shared_ptr<SvgPath> m_svgPath = std::make_shared<SvgPath>();
+    std::string m_cacheD;
+    float m_cacheScale;
+};
+
+} // namespace svg
+} // namespace rnoh

package/harmony/svg/src/main/cpp/componentInstances/RNSVGPatternComponentInstance.cpp

@@ -0,0 +1,40 @@
+/*
+ * 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 "RNSVGPatternComponentInstance.h"
+#include "utils/DynamicUtils.h"
+#include "utils/SvgAttributesParser.h"
+#include <react/renderer/components/react_native_svg/Props.h>
+
+namespace rnoh {
+namespace svg {
+
+RNSVGPatternComponentInstance::RNSVGPatternComponentInstance(Context context)
+    : RNSVGBaseComponentInstance(std::move(context)) {
+    SetSvgNode(m_svgPattern);
+}
+
+void RNSVGPatternComponentInstance::UpdateElementProps() {
+    // set attribute to svgPattern
+    m_svgPattern->UpdateCommonProps(m_props);
+    m_svgPattern->setPatternX(SvgAttributesParser::ParseDimension(DynamicUtils::DynamicToString(m_props->x), true));
+    m_svgPattern->setPatternY(SvgAttributesParser::ParseDimension(DynamicUtils::DynamicToString(m_props->y), true));
+    m_svgPattern->setWidth(SvgAttributesParser::ParseDimension(DynamicUtils::DynamicToString(m_props->width), true));
+    m_svgPattern->setHeight(SvgAttributesParser::ParseDimension(DynamicUtils::DynamicToString(m_props->height), true));
+    m_svgPattern->setPatternUnits(m_props->patternUnits);
+    m_svgPattern->setPatternContentUnits(m_props->patternContentUnits);
+    m_svgPattern->setViewBox(Rect(m_props->minX, m_props->minY, m_props->vbWidth, m_props->vbHeight));
+    m_svgPattern->setmMinX(m_props->minX);
+    m_svgPattern->setmMinY(m_props->minY);
+    m_svgPattern->setmVbWidth(m_props->vbWidth);
+    m_svgPattern->setmVbHeight(m_props->vbHeight);
+    m_svgPattern->setmAlign(m_props->align);
+    m_svgPattern->setmMeetOrSlice(m_props->meetOrSlice);
+    m_svgPattern->setPatternTransforms(m_props->patternTransform);
+}
+
+} // namespace svg
+} // namespace rnoh

package/harmony/svg/src/main/cpp/componentInstances/RNSVGPatternComponentInstance.h

@@ -0,0 +1,27 @@
+/*
+ * 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 "RNSVGBaseComponentInstance.h"
+#include "SvgPattern.h"
+
+namespace rnoh {
+namespace svg {
+
+class RNSVGPatternComponentInstance : public RNSVGBaseComponentInstance<facebook::react::RNSVGPatternShadowNode> {
+public:
+    explicit RNSVGPatternComponentInstance(Context context);
+
+protected:
+    void UpdateElementProps() override;
+
+private:
+    std::shared_ptr<SvgPattern> m_svgPattern = std::make_shared<SvgPattern>();
+};
+
+} // namespace svg
+} // namespace rnoh

package/harmony/svg/src/main/cpp/componentInstances/RNSVGRadialGradientComponentInstance.cpp

@@ -0,0 +1,32 @@
+/*
+ * 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 "RNSVGRadialGradientComponentInstance.h"
+#include "utils/DynamicUtils.h"
+
+namespace rnoh {
+namespace svg {
+
+RNSVGRadialGradientComponentInstance::RNSVGRadialGradientComponentInstance(Context context)
+    : RNSVGBaseComponentInstance(std::move(context)) {
+    SetSvgNode(m_svgRadialGradient);
+}
+
+void RNSVGRadialGradientComponentInstance::UpdateElementProps() {
+    m_svgRadialGradient->UpdateHrefRenderProps(m_props);
+    m_svgRadialGradient->SetAttrGradientUnits(m_props->gradientUnits); // first set attr gradientUnits
+    m_svgRadialGradient->SetAttrFx(DynamicUtils::DynamicToString(m_props->fx));
+    m_svgRadialGradient->SetAttrFy(DynamicUtils::DynamicToString(m_props->fy));
+    m_svgRadialGradient->SetAttrCx(DynamicUtils::DynamicToString(m_props->cx));
+    m_svgRadialGradient->SetAttrCy(DynamicUtils::DynamicToString(m_props->cy));
+    m_svgRadialGradient->SetAttrRx(DynamicUtils::DynamicToString(m_props->rx));
+    m_svgRadialGradient->SetAttrRy(DynamicUtils::DynamicToString(m_props->ry));
+    m_svgRadialGradient->SetAttrGradient(m_props->gradient);
+    m_svgRadialGradient->SetAttrGradientTransforms(m_props->gradientTransform);
+}
+
+} // namespace svg
+} // namespace rnoh

package/harmony/svg/src/main/cpp/componentInstances/RNSVGRadialGradientComponentInstance.h

@@ -0,0 +1,28 @@
+/*
+ * 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 "RNSVGBaseComponentInstance.h"
+#include "SvgGradient.h"
+
+namespace rnoh {
+namespace svg {
+
+class RNSVGRadialGradientComponentInstance
+    : public RNSVGBaseComponentInstance<facebook::react::RNSVGRadialGradientShadowNode> {
+public:
+    explicit RNSVGRadialGradientComponentInstance(Context context);
+
+protected:
+    void UpdateElementProps() override;
+
+private:
+    std::shared_ptr<SvgGradient> m_svgRadialGradient = std::make_shared<SvgGradient>(GradientType::RADIAL);
+};
+
+} // namespace svg
+} // namespace rnoh

package/harmony/svg/src/main/cpp/componentInstances/RNSVGRectComponentInstance.cpp

@@ -0,0 +1,36 @@
+/*
+ * 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 "RNSVGRectComponentInstance.h"
+#include "utils/DynamicUtils.h"
+#include <react/renderer/components/react_native_svg/Props.h>
+
+namespace rnoh {
+namespace svg {
+
+RNSVGRectComponentInstance::RNSVGRectComponentInstance(Context context)
+    : RNSVGBaseComponentInstance(std::move(context)) {
+    SetSvgNode(m_svgRect);
+}
+
+void RNSVGRectComponentInstance::UpdateElementProps() {
+    m_svgRect->UpdateCommonProps(m_props);
+    m_svgRect->SetX(DynamicUtils::DynamicToString(m_props->x));
+    m_svgRect->SetY(DynamicUtils::DynamicToString(m_props->y));
+    m_svgRect->SetWidth(DynamicUtils::DynamicToString(m_props->width));
+    m_svgRect->SetHeight(DynamicUtils::DynamicToString(m_props->height));
+    std::string rx = DynamicUtils::DynamicToString(m_props->rx);
+    if (rx.size() != 0) {
+        m_svgRect->SetRX(rx);
+    }
+    std::string ry = DynamicUtils::DynamicToString(m_props->ry);
+    if (ry.size() != 0) {
+        m_svgRect->SetRY(ry);
+    }
+}
+
+} // namespace svg
+} // namespace rnoh

package/harmony/svg/src/main/cpp/componentInstances/RNSVGRectComponentInstance.h

@@ -0,0 +1,27 @@
+/*
+ * 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 "RNSVGBaseComponentInstance.h"
+#include "SvgRect.h"
+
+namespace rnoh {
+namespace svg {
+
+class RNSVGRectComponentInstance : public RNSVGBaseComponentInstance<facebook::react::RNSVGRectShadowNode> {
+public:
+    explicit RNSVGRectComponentInstance(Context context);
+
+protected:
+    void UpdateElementProps() override;
+
+private:
+    std::shared_ptr<SvgRect> m_svgRect = std::make_shared<SvgRect>();
+};
+
+} // namespace svg
+} // namespace rnoh

package/harmony/svg/src/main/cpp/componentInstances/RNSVGSvgViewComponentInstance.cpp

@@ -0,0 +1,124 @@
+/*
+ * 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 "RNSVGSvgViewComponentInstance.h"
+#include "utils/DynamicUtils.h"
+#include <glog/logging.h>
+#include "RNSVGGroupComponentInstance.h"
+
+namespace rnoh {
+namespace svg {
+
+RNSVGSvgViewComponentInstance::RNSVGSvgViewComponentInstance(Context context)
+    : CppComponentInstance(std::move(context)) {
+    SetSvgNode(m_svgSvg);
+    getLocalRootArkUINode().SetSvgNode(GetSvgNode());
+    GetSvgNode()->SetContext(std::make_shared<SvgContext>());
+    SvgViewManager::getInstance().setSvgView(CppComponentInstance::getTag(), m_svgSvg);
+}
+
+RNSVGSvgViewComponentInstance::~RNSVGSvgViewComponentInstance() {
+    SvgViewManager::getInstance().onDropView(CppComponentInstance::getTag());
+    noSvgComponentIndex = 0;
+}
+
+void RNSVGSvgViewComponentInstance::onFinalizeUpdates() {
+    ComponentInstance::onFinalizeUpdates();
+    std::string bbWidthStr = DynamicUtils::DynamicToString(m_props->bbWidth);
+    std::string bbHeightStr = DynamicUtils::DynamicToString(m_props->bbHeight);
+    m_svgSvg->SetScale(m_layoutMetrics.pointScaleFactor);
+    auto tintColor = getColorFromDynamic(m_props->rawProps);
+    if (tintColor.has_value()) {
+        m_svgSvg->GetContext()->SetSvgColor(Color::FromString(tintColor.value()));
+    }
+    m_svgSvg->SetVbX(m_props->minX);
+    m_svgSvg->SetVbY(m_props->minY);
+    m_svgSvg->SetVbWidth(m_props->vbWidth);
+    m_svgSvg->SetVbHeight(m_props->vbHeight);
+    m_svgSvg->SetX(0);
+    m_svgSvg->SetY(0);
+    m_svgSvg->SetWidth(bbWidthStr);
+    m_svgSvg->SetHeight(bbHeightStr);
+    m_svgSvg->SetAlign(m_props->align);
+    m_svgSvg->SetMeetOrSlice(m_props->meetOrSlice);
+    getLocalRootArkUINode().markDirty();
+}
+
+void RNSVGSvgViewComponentInstance::onDrawForeignImage(ForeignProps foreignProps) {
+    if (foreignProps.foreignPixelMap) {
+        DLOG(INFO) << "[svgForeignNode] RNSVGSvgViewComponentInstance OH_PixelmapNative is not null, position:{ x:" << foreignProps.x.Value()
+                   << ",y:" << foreignProps.y.Value() << "},width:" << foreignProps.width.Value() << ";height:" << foreignProps.height.Value();
+        m_svgArkUINode.SetForeignObject(foreignProps);
+        m_svgArkUINode.markDirty();
+    } else {
+        DLOG(INFO) << "RNSVGSvgViewComponentInstance OH_PixelmapNative is null";
+    }
+}
+void RNSVGSvgViewComponentInstance::onChildInserted(ComponentInstance::Shared const &childComponentInstance,
+                                                    std::size_t index) {
+    CppComponentInstance::onChildInserted(childComponentInstance, index);
+    if (childComponentInstance->getComponentName() == "RNSVGGroup") {
+        auto childInstance = childComponentInstance->getChildren();
+        for (ComponentInstance::Shared c : childInstance) {
+            if (c->getComponentName().find("SVG") == std::string::npos) {
+                NativeNodeApi::getInstance()->insertChildAt(m_svgArkUINode.getArkUINodeHandle(),
+                                                            c->getLocalRootArkUINode().getArkUINodeHandle(), noSvgComponentIndex);
+                noSvgComponentIndex++;
+            }
+            auto groupChildInstance = c->getChildren();
+            for (ComponentInstance::Shared c1 : groupChildInstance) {
+                if (c1->getComponentName() == "RNSVGForeignObject") {
+                    auto m_foreignComponentInstance =
+                        std::dynamic_pointer_cast<RNSVGForeignObjectComponentInstance>(c1);
+                    if (m_foreignComponentInstance) {
+                        auto groupInstance =
+                            std::dynamic_pointer_cast<RNSVGGroupComponentInstance>(c1->getParent().lock());
+                        m_svgArkUINode.SetGroupNode(groupInstance->getNode());
+                        m_svgArkUINode.AddChild(m_foreignComponentInstance->getLocalRootArkUINode());
+                        m_foreignComponentInstance->getLocalRootArkUINode().SetForeignNodeDelegate(this);
+                    }
+                }
+            }
+        }
+    }
+
+
+    OnChildInsertCommon(std::dynamic_pointer_cast<SvgHost>(childComponentInstance));
+}
+
+void RNSVGSvgViewComponentInstance::onChildRemoved(ComponentInstance::Shared const &childComponentInstance) {
+    CppComponentInstance::onChildRemoved(childComponentInstance);
+    OnChildRemoveCommon(std::dynamic_pointer_cast<SvgHost>(childComponentInstance));
+}
+
+SvgArkUINode &RNSVGSvgViewComponentInstance::getLocalRootArkUINode() { return m_svgArkUINode; }
+
+std::optional<std::string> RNSVGSvgViewComponentInstance::getColorFromDynamic(folly::dynamic value) {
+    if (value.isNull() || !value.isObject()) {
+        return std::nullopt;
+    }
+    auto rawPropsColor = (value.count("color") > 0) ? std::optional(value["color"].asString()) : std::nullopt;
+    return rawPropsColor;
+}
+
+bool RNSVGSvgViewComponentInstance::canHandleTouch() const {
+    if (m_props != nullptr) {
+        auto props = std::dynamic_pointer_cast<const facebook::react::RNSVGSvgViewProps>(m_props);
+        return props->pointerEvents == "auto" || props->pointerEvents == "box-only" || props->pointerEvents.size() == 0;
+    }
+    return true;
+};
+
+bool RNSVGSvgViewComponentInstance::canChildrenHandleTouch() const {
+    if (m_props != nullptr) {
+        auto props = std::dynamic_pointer_cast<const facebook::react::RNSVGSvgViewProps>(m_props);
+        return props->pointerEvents == "auto" || props->pointerEvents == "box-none" || props->pointerEvents.size() == 0;
+    }
+    return true;
+};
+
+} // namespace svg
+} // namespace rnoh

package/harmony/svg/src/main/cpp/componentInstances/RNSVGSvgViewComponentInstance.h

@@ -0,0 +1,56 @@
+/*
+ * 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/CppComponentInstance.h"
+#include <folly/dynamic.h>
+#include "SvgArkUINode.h"
+#include <react/renderer/components/react_native_svg/ShadowNodes.h>
+#include "SvgViewManager.h"
+#include "SvgSvg.h"
+#include "RNSVGForeignObjectComponentInstance.h"
+
+namespace rnoh {
+namespace svg {
+class RNSVGGroupComponentInstance;
+} // namespace svg
+} // namespace rnoh
+
+
+namespace rnoh {
+namespace svg {
+
+class RNSVGSvgViewComponentInstance : public CppComponentInstance<facebook::react::RNSVGSvgViewShadowNode>,
+                                      public SvgHost , public SvgForeignObjectNodeDelegate {
+public:
+    explicit RNSVGSvgViewComponentInstance(Context context);
+    ~RNSVGSvgViewComponentInstance();
+
+    void onFinalizeUpdates() override;
+    void onDrawForeignImage(ForeignProps foreignProps) override;
+    // get SvgNode from childComponentInstance and set it to root_
+    void onChildInserted(ComponentInstance::Shared const &childComponentInstance, std::size_t index) override;
+
+    void onChildRemoved(ComponentInstance::Shared const &childComponentInstance) override;
+
+    SvgArkUINode &getLocalRootArkUINode() override;
+
+    // since we can't get color correctly from props
+    std::optional<std::string> getColorFromDynamic(folly::dynamic value);
+
+    bool canHandleTouch() const override;
+
+    bool canChildrenHandleTouch() const override;
+
+private:
+    SvgArkUINode m_svgArkUINode;
+    std::shared_ptr<SvgSvg> m_svgSvg = std::make_shared<SvgSvg>();
+    int noSvgComponentIndex {0}; // 非svg添加的index(适配js侧view包裹会拆解子元素成平级)
+};
+
+} // namespace svg
+} // namespace rnoh

package/harmony/svg/src/main/cpp/componentInstances/RNSVGSymbolComponentInstance.cpp

@@ -0,0 +1,30 @@
+/*
+ * 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 "RNSVGSymbolComponentInstance.h"
+#include <react/renderer/components/react_native_svg/Props.h>
+
+namespace rnoh {
+namespace svg {
+
+RNSVGSymbolComponentInstance::RNSVGSymbolComponentInstance(Context context)
+    : RNSVGBaseComponentInstance(std::move(context)) {
+    SetSvgNode(m_svgSymbol);
+}
+
+void RNSVGSymbolComponentInstance::UpdateElementProps() {
+    // set attribute to svgSymbol.
+    m_svgSymbol->UpdateCommonProps(m_props);
+    m_svgSymbol->mMinX = m_props->minX;
+    m_svgSymbol->mMinY = m_props->minY;
+    m_svgSymbol->mVbWidth = m_props->vbWidth;
+    m_svgSymbol->mVbHeight = m_props->vbHeight;
+    m_svgSymbol->mMeetOrSlice = m_props->meetOrSlice;
+    m_svgSymbol->mAlign = m_props->align;
+}
+
+} // namespace svg
+} // namespace rnoh