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

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,86 @@
+/*
+ * 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>
+
+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());
+}
+
+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::onChildInserted(ComponentInstance::Shared const &childComponentInstance,
+                                                    std::size_t index) {
+    CppComponentInstance::onChildInserted(childComponentInstance, index);
+    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,47 @@
+/*
+ * 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"
+
+namespace rnoh {
+namespace svg {
+
+class RNSVGSvgViewComponentInstance : public CppComponentInstance<facebook::react::RNSVGSvgViewShadowNode>,
+                                      public SvgHost {
+public:
+    explicit RNSVGSvgViewComponentInstance(Context context);
+    ~RNSVGSvgViewComponentInstance();
+
+    void onFinalizeUpdates() 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>();
+};
+
+} // 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

package/harmony/svg/src/main/cpp/componentInstances/RNSVGSymbolComponentInstance.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 "SvgSymbol.h"
+
+namespace rnoh {
+namespace svg {
+
+class RNSVGSymbolComponentInstance : public RNSVGBaseComponentInstance<facebook::react::RNSVGSymbolShadowNode> {
+public:
+    explicit RNSVGSymbolComponentInstance(Context context);
+
+protected:
+    void UpdateElementProps() override;
+
+private:
+    std::shared_ptr<SvgSymbol> m_svgSymbol = std::make_shared<SvgSymbol>();
+};
+
+} // namespace svg
+} // namespace rnoh

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

@@ -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.
+ */
+
+#include "RNSVGTSpanComponentInstance.h"
+#include "SvgTSpan.h"
+#include <react/renderer/components/react_native_svg/Props.h>
+
+namespace rnoh {
+namespace svg {
+
+RNSVGTSpanComponentInstance::RNSVGTSpanComponentInstance(Context context)
+    : RNSVGBaseComponentInstance(std::move(context)) {
+    SetSvgNode(m_svgTSpan);
+}
+
+void RNSVGTSpanComponentInstance::UpdateElementProps() {
+    m_svgTSpan->UpdateCommonProps(m_props);
+    m_svgTSpan->content_ = m_props->content;
+    m_svgTSpan->UpdateFontProps(m_props);
+    m_svgTSpan->UpdateTextProps(m_props);
+}
+
+} // namespace svg
+} // namespace rnoh

package/harmony/svg/src/main/cpp/componentInstances/RNSVGTSpanComponentInstance.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 "SvgTSpan.h"
+
+namespace rnoh {
+namespace svg {
+
+class RNSVGTSpanComponentInstance : public RNSVGBaseComponentInstance<facebook::react::RNSVGTSpanShadowNode> {
+public:
+    explicit RNSVGTSpanComponentInstance(Context context);
+
+protected:
+    void UpdateElementProps() override;
+
+private:
+    std::shared_ptr<SvgTSpan> m_svgTSpan = std::make_shared<SvgTSpan>();
+};
+
+} // namespace svg
+} // namespace rnoh

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

@@ -0,0 +1,25 @@
+/*
+ * 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 "RNSVGTextComponentInstance.h"
+#include <react/renderer/components/react_native_svg/Props.h>
+
+namespace rnoh {
+namespace svg {
+
+RNSVGTextComponentInstance::RNSVGTextComponentInstance(Context context)
+    : RNSVGBaseComponentInstance(std::move(context)) {
+    SetSvgNode(m_svgText);
+}
+
+void RNSVGTextComponentInstance::UpdateElementProps() {
+    m_svgText->UpdateCommonProps(m_props);
+    m_svgText->UpdateFontProps(m_props);
+    m_svgText->UpdateTextProps(m_props);
+}
+
+} // namespace svg
+} // namespace rnoh

package/harmony/svg/src/main/cpp/componentInstances/RNSVGTextComponentInstance.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 "SvgText.h"
+
+namespace rnoh {
+namespace svg {
+
+class RNSVGTextComponentInstance : public RNSVGBaseComponentInstance<facebook::react::RNSVGTextShadowNode> {
+public:
+    explicit RNSVGTextComponentInstance(Context context);
+
+protected:
+    void UpdateElementProps() override;
+
+private:
+    std::shared_ptr<SvgText> m_svgText = std::make_shared<SvgText>();
+};
+
+} // namespace svg
+} // namespace rnoh

package/harmony/svg/src/main/cpp/componentInstances/RNSVGTextPathComponentInstance.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 "RNSVGTextPathComponentInstance.h"
+#include "utils/DynamicUtils.h"
+#include "SvgTSpan.h"
+#include <react/renderer/components/react_native_svg/Props.h>
+
+namespace rnoh {
+namespace svg {
+
+RNSVGTextPathComponentInstance::RNSVGTextPathComponentInstance(Context context)
+    : RNSVGBaseComponentInstance(std::move(context)) {
+    SetSvgNode(m_svgTP);
+}
+
+void RNSVGTextPathComponentInstance::UpdateElementProps() {
+    m_svgTP->UpdateCommonProps(m_props);
+    m_svgTP->UpdateFontProps(m_props);
+    m_svgTP->UpdateTextProps(m_props);
+    m_svgTP->href_ = m_props->href;
+    m_svgTP->startOffset_ = StringUtils::FromString(DynamicUtils::DynamicToString(m_props->startOffset)).ConvertToPx(m_layoutMetrics.pointScaleFactor);
+    m_svgTP->spacing_ = textPathSpacingFromStr(m_props->spacing);
+    m_svgTP->midLine_ = textPathMidLineFromStr(m_props->midLine);
+    m_svgTP->side_ = textPathSideFromStr(m_props->side);
+    m_svgTP->method_ = textPathMethodFromStr(m_props->method);
+}
+} // namespace svg
+} // namespace rnoh

package/harmony/svg/src/main/cpp/componentInstances/RNSVGTextPathComponentInstance.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 "SvgTextPath.h"
+
+namespace rnoh {
+namespace svg {
+
+class RNSVGTextPathComponentInstance : public RNSVGBaseComponentInstance<facebook::react::RNSVGTextPathShadowNode> {
+public:
+    explicit RNSVGTextPathComponentInstance(Context context);
+
+protected:
+    void UpdateElementProps() override;
+
+private:
+    std::shared_ptr<SvgTextPath> m_svgTP = std::make_shared<SvgTextPath>();
+};
+
+} // namespace svg
+} // namespace rnoh