zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2025-12-06 07:06:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: custom shadow nodes (#2568)

Browse Source 
# Summary

Implement custom shadow nodes for nearly all `Svg` components. While
it's a foundation for numerous upcoming changes, it currently addresses
and resolves #2544.

## Test Plan

There shouldn't be any noticeable changes, and everything should
function as before, except that `onLayout` will now be triggered only
once and with the correct dimensions.

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |    ✅      |
| MacOS   |    ✅      |
| Android |    ✅      |

---------

Co-authored-by: Jakub Piasecki <jakubpiasecki67@gmail.com>
This commit is contained in:
Jakub Grzywacz
2024-12-12 11:48:46 +01:00
committed by GitHub
parent bf1c32d9a5
commit d3d61a5fc1
62 changed files with 560 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
android/src/main/jni/rnsvg.h
View File

@@ -3,6 +3,7 @@
#include <ReactCommon/JavaTurboModule.h>
#include <ReactCommon/TurboModule.h>
#include <jsi/jsi.h>
#include <react/renderer/components/rnsvg/RNSVGComponentDescriptors.h>
#include <react/renderer/components/rnsvg/RNSVGImageComponentDescriptor.h>
namespace facebook {

2
apple/Elements/RNSVGClipPath.mm
View File

@@ -11,8 +11,8 @@
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
#import <react/renderer/components/view/conversions.h>
#import <rnsvg/RNSVGComponentDescriptors.h>
#import "RNSVGFabricConversions.h"
#endif // RCT_NEW_ARCH_ENABLED

2
apple/Elements/RNSVGDefs.mm
View File

@@ -10,8 +10,8 @@
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
#import <react/renderer/components/view/conversions.h>
#import <rnsvg/RNSVGComponentDescriptors.h>
#import "RNSVGFabricConversions.h"
#endif // RCT_NEW_ARCH_ENABLED

2
apple/Elements/RNSVGForeignObject.mm
View File

@@ -13,8 +13,8 @@
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
#import <react/renderer/components/view/conversions.h>
#import <rnsvg/RNSVGComponentDescriptors.h>
#import "RNSVGFabricConversions.h"
#endif // RCT_NEW_ARCH_ENABLED

2
apple/Elements/RNSVGGroup.mm
View File

@@ -13,8 +13,8 @@
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
#import <react/renderer/components/view/conversions.h>
#import <rnsvg/RNSVGComponentDescriptors.h>
#import "RNSVGFabricConversions.h"
#endif // RCT_NEW_ARCH_ENABLED

2
apple/Elements/RNSVGLinearGradient.mm
View File

@@ -12,8 +12,8 @@
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
#import <react/renderer/components/view/conversions.h>
#import <rnsvg/RNSVGComponentDescriptors.h>
#import "RNSVGFabricConversions.h"
#endif // RCT_NEW_ARCH_ENABLED

2
apple/Elements/RNSVGMarker.mm
View File

@@ -14,8 +14,8 @@
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
#import <react/renderer/components/view/conversions.h>
#import <rnsvg/RNSVGComponentDescriptors.h>
#import "RNSVGFabricConversions.h"
#endif // RCT_NEW_ARCH_ENABLED

2
apple/Elements/RNSVGMask.mm
View File

@@ -13,8 +13,8 @@
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
#import <react/renderer/components/view/conversions.h>
#import <rnsvg/RNSVGComponentDescriptors.h>
#import "RNSVGFabricConversions.h"
#endif // RCT_NEW_ARCH_ENABLED

2
apple/Elements/RNSVGPath.mm
View File

@@ -11,8 +11,8 @@
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
#import <react/renderer/components/view/conversions.h>
#import <rnsvg/RNSVGComponentDescriptors.h>
#import "RNSVGFabricConversions.h"
#endif // RCT_NEW_ARCH_ENABLED

2
apple/Elements/RNSVGPattern.mm
View File

@@ -13,8 +13,8 @@
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
#import <react/renderer/components/view/conversions.h>
#import <rnsvg/RNSVGComponentDescriptors.h>
#import "RNSVGFabricConversions.h"
#endif // RCT_NEW_ARCH_ENABLED

2
apple/Elements/RNSVGRadialGradient.mm
View File

@@ -10,8 +10,8 @@
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
#import <react/renderer/components/view/conversions.h>
#import <rnsvg/RNSVGComponentDescriptors.h>
#import "RNSVGFabricConversions.h"
#endif // RCT_NEW_ARCH_ENABLED

2
apple/Elements/RNSVGSymbol.mm
View File

@@ -11,8 +11,8 @@
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
#import <react/renderer/components/view/conversions.h>
#import <rnsvg/RNSVGComponentDescriptors.h>
#import "RNSVGFabricConversions.h"
#endif // RCT_NEW_ARCH_ENABLED

2
apple/Elements/RNSVGUse.mm
View File

@@ -12,8 +12,8 @@
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
#import <react/renderer/components/view/conversions.h>
#import <rnsvg/RNSVGComponentDescriptors.h>
#import "RNSVGFabricConversions.h"
#endif // RCT_NEW_ARCH_ENABLED

2
apple/Filters/RNSVGFeBlend.mm
View File

@@ -3,8 +3,8 @@
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
#import <react/renderer/components/view/conversions.h>
#import <rnsvg/RNSVGComponentDescriptors.h>
#import "RNSVGConvert.h"
#import "RNSVGFabricConversions.h"
#endif // RCT_NEW_ARCH_ENABLED

2
apple/Filters/RNSVGFeColorMatrix.mm
View File

@@ -3,8 +3,8 @@
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
#import <react/renderer/components/view/conversions.h>
#import <rnsvg/RNSVGComponentDescriptors.h>
#import "RNSVGConvert.h"
#import "RNSVGFabricConversions.h"
#endif // RCT_NEW_ARCH_ENABLED

2
apple/Filters/RNSVGFeComposite.mm
View File

@@ -5,8 +5,8 @@
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
#import <react/renderer/components/view/conversions.h>
#import <rnsvg/RNSVGComponentDescriptors.h>
#import "RNSVGConvert.h"
#import "RNSVGFabricConversions.h"
#endif // RCT_NEW_ARCH_ENABLED

2
apple/Filters/RNSVGFeFlood.mm
View File

@@ -3,8 +3,8 @@
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
#import <react/renderer/components/view/conversions.h>
#import <rnsvg/RNSVGComponentDescriptors.h>
#import "RNSVGConvert.h"
#import "RNSVGFabricConversions.h"
#endif // RCT_NEW_ARCH_ENABLED

2
apple/Filters/RNSVGFeGaussianBlur.mm
View File

@@ -4,8 +4,8 @@
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
#import <react/renderer/components/view/conversions.h>
#import <rnsvg/RNSVGComponentDescriptors.h>
#import "RNSVGConvert.h"
#import "RNSVGFabricConversions.h"
#endif // RCT_NEW_ARCH_ENABLED

2
apple/Filters/RNSVGFeMerge.mm
View File

@@ -3,8 +3,8 @@
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
#import <react/renderer/components/view/conversions.h>
#import <rnsvg/RNSVGComponentDescriptors.h>
#import "RNSVGFabricConversions.h"
#endif // RCT_NEW_ARCH_ENABLED

2
apple/Filters/RNSVGFeOffset.mm
View File

@@ -6,8 +6,8 @@
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
#import <react/renderer/components/view/conversions.h>
#import <rnsvg/RNSVGComponentDescriptors.h>
#import "RNSVGFabricConversions.h"
#endif // RCT_NEW_ARCH_ENABLED

2
apple/Filters/RNSVGFilter.mm
View File

@@ -5,10 +5,10 @@
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
#import <react/renderer/components/view/conversions.h>
#import "RNSVGConvert.h"
#import "RNSVGFabricConversions.h"
#import "rnsvg/RNSVGComponentDescriptors.h"
#endif // RCT_NEW_ARCH_ENABLED
#if TARGET_OS_OSX // [macOS

2
apple/Filters/RNSVGFilterPrimitive.mm
View File

@@ -5,8 +5,8 @@
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
#import <react/renderer/components/view/conversions.h>
#import <rnsvg/RNSVGComponentDescriptors.h>
#import "RNSVGFabricConversions.h"
#endif // RCT_NEW_ARCH_ENABLED

2
apple/Shapes/RNSVGCircle.mm
View File

@@ -12,8 +12,8 @@
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
#import <react/renderer/components/view/conversions.h>
#import <rnsvg/RNSVGComponentDescriptors.h>
#import "RNSVGFabricConversions.h"
#endif // RCT_NEW_ARCH_ENABLED

2
apple/Shapes/RNSVGEllipse.mm
View File

@@ -12,8 +12,8 @@
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
#import <react/renderer/components/view/conversions.h>
#import <rnsvg/RNSVGComponentDescriptors.h>
#import "RNSVGFabricConversions.h"
#endif // RCT_NEW_ARCH_ENABLED

2
apple/Shapes/RNSVGLine.mm
View File

@@ -12,8 +12,8 @@
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
#import <react/renderer/components/view/conversions.h>
#import <rnsvg/RNSVGComponentDescriptors.h>
#import "RNSVGFabricConversions.h"
#endif // RCT_NEW_ARCH_ENABLED

2
apple/Shapes/RNSVGRect.mm
View File

@@ -12,8 +12,8 @@
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
#import <react/renderer/components/view/conversions.h>
#import <rnsvg/RNSVGComponentDescriptors.h>
#import "RNSVGFabricConversions.h"
#endif // RCT_NEW_ARCH_ENABLED

2
apple/Text/RNSVGTSpan.mm
View File

@@ -20,8 +20,8 @@ static CGFloat RNSVGTSpan_radToDeg = 180 / (CGFloat)M_PI;
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
#import <react/renderer/components/view/conversions.h>
#import <rnsvg/RNSVGComponentDescriptors.h>
#import "RNSVGFabricConversions.h"
#endif // RCT_NEW_ARCH_ENABLED

2
apple/Text/RNSVGText.mm
View File

@@ -16,8 +16,8 @@
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
#import <react/renderer/components/view/conversions.h>
#import <rnsvg/RNSVGComponentDescriptors.h>
#import "RNSVGFabricConversions.h"
#endif // RCT_NEW_ARCH_ENABLED

2
apple/Text/RNSVGTextPath.mm
View File

@@ -11,8 +11,8 @@
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
#import <react/renderer/components/view/conversions.h>
#import <rnsvg/RNSVGComponentDescriptors.h>
#import "RNSVGFabricConversions.h"
#endif // RCT_NEW_ARCH_ENABLED

64
common/cpp/react/renderer/components/rnsvg/RNSVGComponentDescriptors.h Normal file
View File

@@ -0,0 +1,64 @@
#pragma once
#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
#include <react/renderer/core/ConcreteComponentDescriptor.h>
#include "RNSVGShadowNodes.h"
namespace facebook::react {
using RNSVGCircleComponentDescriptor =
ConcreteComponentDescriptor<RNSVGCircleShadowNode>;
using RNSVGClipPathComponentDescriptor =
ConcreteComponentDescriptor<RNSVGClipPathShadowNode>;
using RNSVGDefsComponentDescriptor =
ConcreteComponentDescriptor<RNSVGDefsShadowNode>;
using RNSVGEllipseComponentDescriptor =
ConcreteComponentDescriptor<RNSVGEllipseShadowNode>;
using RNSVGFeBlendComponentDescriptor =
ConcreteComponentDescriptor<RNSVGFeBlendShadowNode>;
using RNSVGFeColorMatrixComponentDescriptor =
ConcreteComponentDescriptor<RNSVGFeColorMatrixShadowNode>;
using RNSVGFeCompositeComponentDescriptor =
ConcreteComponentDescriptor<RNSVGFeCompositeShadowNode>;
using RNSVGFeFloodComponentDescriptor =
ConcreteComponentDescriptor<RNSVGFeFloodShadowNode>;
using RNSVGFeGaussianBlurComponentDescriptor =
ConcreteComponentDescriptor<RNSVGFeGaussianBlurShadowNode>;
using RNSVGFeMergeComponentDescriptor =
ConcreteComponentDescriptor<RNSVGFeMergeShadowNode>;
using RNSVGFeOffsetComponentDescriptor =
ConcreteComponentDescriptor<RNSVGFeOffsetShadowNode>;
using RNSVGFilterComponentDescriptor =
ConcreteComponentDescriptor<RNSVGFilterShadowNode>;
using RNSVGForeignObjectComponentDescriptor =
ConcreteComponentDescriptor<RNSVGForeignObjectShadowNode>;
using RNSVGGroupComponentDescriptor =
ConcreteComponentDescriptor<RNSVGGroupShadowNode>;
using RNSVGLinearGradientComponentDescriptor =
ConcreteComponentDescriptor<RNSVGLinearGradientShadowNode>;
using RNSVGLineComponentDescriptor =
ConcreteComponentDescriptor<RNSVGLineShadowNode>;
using RNSVGMarkerComponentDescriptor =
ConcreteComponentDescriptor<RNSVGMarkerShadowNode>;
using RNSVGMaskComponentDescriptor =
ConcreteComponentDescriptor<RNSVGMaskShadowNode>;
using RNSVGPathComponentDescriptor =
ConcreteComponentDescriptor<RNSVGPathShadowNode>;
using RNSVGPatternComponentDescriptor =
ConcreteComponentDescriptor<RNSVGPatternShadowNode>;
using RNSVGRadialGradientComponentDescriptor =
ConcreteComponentDescriptor<RNSVGRadialGradientShadowNode>;
using RNSVGRectComponentDescriptor =
ConcreteComponentDescriptor<RNSVGRectShadowNode>;
using RNSVGSymbolComponentDescriptor =
ConcreteComponentDescriptor<RNSVGSymbolShadowNode>;
using RNSVGTextComponentDescriptor =
ConcreteComponentDescriptor<RNSVGTextShadowNode>;
using RNSVGTextPathComponentDescriptor =
ConcreteComponentDescriptor<RNSVGTextPathShadowNode>;
using RNSVGTSpanComponentDescriptor =
ConcreteComponentDescriptor<RNSVGTSpanShadowNode>;
using RNSVGUseComponentDescriptor =
ConcreteComponentDescriptor<RNSVGUseShadowNode>;
} // namespace facebook::react

59
common/cpp/react/renderer/components/rnsvg/RNSVGConcreteShadowNode.h Normal file
View File

@@ -0,0 +1,59 @@
#pragma once
#include <react/renderer/components/view/ViewEventEmitter.h>
#include <react/renderer/components/view/ViewProps.h>
#include <react/renderer/core/ConcreteShadowNode.h>
#include "RNSVGLayoutableShadowNode.h"
namespace facebook::react {
template <const char *concreteComponentName, typename PropsT = ViewProps>
class RNSVGConcreteShadowNode : public ConcreteShadowNode<
concreteComponentName,
RNSVGLayoutableShadowNode,
PropsT,
ViewEventEmitter,
StateData,
false> {
public:
using BaseShadowNode = ConcreteShadowNode<
concreteComponentName,
RNSVGLayoutableShadowNode,
PropsT,
ViewEventEmitter,
StateData,
false>;
using ConcreteViewProps = PropsT;
using BaseShadowNode::BaseShadowNode;
static ShadowNodeTraits BaseTraits() {
auto traits = BaseShadowNode::BaseTraits();
traits.set(ShadowNodeTraits::Trait::ViewKind);
traits.set(ShadowNodeTraits::Trait::FormsStackingContext);
traits.set(ShadowNodeTraits::Trait::FormsView);
return traits;
}
Transform getTransform() const override {
auto layoutMetrics = BaseShadowNode::getLayoutMetrics();
return BaseShadowNode::getConcreteProps().resolveTransform(layoutMetrics);
}
bool canBeTouchTarget() const override {
auto pointerEvents =
BaseShadowNode::getConcreteProps().ViewProps::pointerEvents;
return pointerEvents == PointerEventsMode::Auto ||
pointerEvents == PointerEventsMode::BoxOnly;
}
bool canChildrenBeTouchTarget() const override {
auto pointerEvents =
BaseShadowNode::getConcreteProps().ViewProps::pointerEvents;
return pointerEvents == PointerEventsMode::Auto ||
pointerEvents == PointerEventsMode::BoxNone;
}
};
} // namespace facebook::react

42
common/cpp/react/renderer/components/rnsvg/RNSVGLayoutableShadowNode.cpp Normal file
View File

@@ -0,0 +1,42 @@
#include "RNSVGLayoutableShadowNode.h"
#include <react/renderer/core/LayoutContext.h>
namespace facebook::react {
RNSVGLayoutableShadowNode::RNSVGLayoutableShadowNode(
const ShadowNodeFragment &fragment,
const ShadowNodeFamily::Shared &family,
ShadowNodeTraits traits)
: YogaLayoutableShadowNode(fragment, family, traits) {
// SVG handles its layout manually on the native side and does not depend on
// the Yoga layout. Setting the dimensions to 0 eliminates randomly positioned
// views in the layout inspector when Yoga attempts to interpret SVG
// properties like width when viewBox scale is set.
auto style = yogaNode_.style();
style.setDimension(yoga::Dimension::Width, yoga::value::points(0));
style.setDimension(yoga::Dimension::Height, yoga::value::points(0));
yogaNode_.setStyle(style);
}
RNSVGLayoutableShadowNode::RNSVGLayoutableShadowNode(
const ShadowNode &sourceShadowNode,
const ShadowNodeFragment &fragment)
: YogaLayoutableShadowNode(sourceShadowNode, fragment) {
// SVG handles its layout manually on the native side and does not depend on
// the Yoga layout. Setting the dimensions to 0 eliminates randomly positioned
// views in the layout inspector when Yoga attempts to interpret SVG
// properties like width when viewBox scale is set.
auto style = yogaNode_.style();
style.setDimension(yoga::Dimension::Width, yoga::value::points(0));
style.setDimension(yoga::Dimension::Height, yoga::value::points(0));
yogaNode_.setStyle(style);
}
void RNSVGLayoutableShadowNode::layout(LayoutContext layoutContext) {
auto affectedNodes = layoutContext.affectedNodes;
layoutContext.affectedNodes = nullptr;
YogaLayoutableShadowNode::layout(layoutContext);
layoutContext.affectedNodes = affectedNodes;
}
} // namespace facebook::react

19
common/cpp/react/renderer/components/rnsvg/RNSVGLayoutableShadowNode.h Normal file
View File

@@ -0,0 +1,19 @@
#include <react/renderer/components/view/YogaLayoutableShadowNode.h>
namespace facebook::react {
class RNSVGLayoutableShadowNode : public YogaLayoutableShadowNode {
public:
RNSVGLayoutableShadowNode(
const ShadowNodeFragment &fragment,
const ShadowNodeFamily::Shared &family,
ShadowNodeTraits traits);
RNSVGLayoutableShadowNode(
const ShadowNode &sourceShadowNode,
const ShadowNodeFragment &fragment);
void layout(LayoutContext layoutContext) override;
};
} // namespace facebook::react

33
common/cpp/react/renderer/components/rnsvg/RNSVGShadowNodes.cpp Normal file
View File

@@ -0,0 +1,33 @@
#include <react/renderer/components/rnsvg/ShadowNodes.h>
namespace facebook::react {
extern const char RNSVGCircleComponentName[] = "RNSVGCircle";
extern const char RNSVGClipPathComponentName[] = "RNSVGClipPath";
extern const char RNSVGDefsComponentName[] = "RNSVGDefs";
extern const char RNSVGEllipseComponentName[] = "RNSVGEllipse";
extern const char RNSVGFeBlendComponentName[] = "RNSVGFeBlend";
extern const char RNSVGFeColorMatrixComponentName[] = "RNSVGFeColorMatrix";
extern const char RNSVGFeCompositeComponentName[] = "RNSVGFeComposite";
extern const char RNSVGFeFloodComponentName[] = "RNSVGFeFlood";
extern const char RNSVGFeGaussianBlurComponentName[] = "RNSVGFeGaussianBlur";
extern const char RNSVGFeMergeComponentName[] = "RNSVGFeMerge";
extern const char RNSVGFeOffsetComponentName[] = "RNSVGFeOffset";
extern const char RNSVGFilterComponentName[] = "RNSVGFilter";
extern const char RNSVGForeignObjectComponentName[] = "RNSVGForeignObject";
extern const char RNSVGGroupComponentName[] = "RNSVGGroup";
extern const char RNSVGLinearGradientComponentName[] = "RNSVGLinearGradient";
extern const char RNSVGLineComponentName[] = "RNSVGLine";
extern const char RNSVGMarkerComponentName[] = "RNSVGMarker";
extern const char RNSVGMaskComponentName[] = "RNSVGMask";
extern const char RNSVGPathComponentName[] = "RNSVGPath";
extern const char RNSVGPatternComponentName[] = "RNSVGPattern";
extern const char RNSVGRadialGradientComponentName[] = "RNSVGRadialGradient";
extern const char RNSVGRectComponentName[] = "RNSVGRect";
extern const char RNSVGSymbolComponentName[] = "RNSVGSymbol";
extern const char RNSVGTextComponentName[] = "RNSVGText";
extern const char RNSVGTextPathComponentName[] = "RNSVGTextPath";
extern const char RNSVGTSpanComponentName[] = "RNSVGTSpan";
extern const char RNSVGUseComponentName[] = "RNSVGUse";
} // namespace facebook::react

233
common/cpp/react/renderer/components/rnsvg/RNSVGShadowNodes.h Normal file
View File

@@ -0,0 +1,233 @@
#pragma once
#include <jsi/jsi.h>
#include <react/renderer/components/rnsvg/EventEmitters.h>
#include <react/renderer/components/rnsvg/Props.h>
#include "RNSVGConcreteShadowNode.h"
#include "RNSVGImageState.h"
namespace facebook::react {
JSI_EXPORT extern const char RNSVGCircleComponentName[];
/*
* `ShadowNode` for <RNSVGCircle> component.
*/
using RNSVGCircleShadowNode =
RNSVGConcreteShadowNode<RNSVGCircleComponentName, RNSVGCircleProps>;
JSI_EXPORT extern const char RNSVGClipPathComponentName[];
/*
* `ShadowNode` for <RNSVGClipPath> component.
*/
using RNSVGClipPathShadowNode =
RNSVGConcreteShadowNode<RNSVGClipPathComponentName, RNSVGClipPathProps>;
JSI_EXPORT extern const char RNSVGDefsComponentName[];
/*
* `ShadowNode` for <RNSVGDefs> component.
*/
using RNSVGDefsShadowNode =
RNSVGConcreteShadowNode<RNSVGDefsComponentName, RNSVGDefsProps>;
JSI_EXPORT extern const char RNSVGEllipseComponentName[];
/*
* `ShadowNode` for <RNSVGEllipse> component.
*/
using RNSVGEllipseShadowNode =
RNSVGConcreteShadowNode<RNSVGEllipseComponentName, RNSVGEllipseProps>;
JSI_EXPORT extern const char RNSVGFeBlendComponentName[];
/*
* `ShadowNode` for <RNSVGFeBlend> component.
*/
using RNSVGFeBlendShadowNode =
RNSVGConcreteShadowNode<RNSVGFeBlendComponentName, RNSVGFeBlendProps>;
JSI_EXPORT extern const char RNSVGFeColorMatrixComponentName[];
/*
* `ShadowNode` for <RNSVGFeColorMatrix> component.
*/
using RNSVGFeColorMatrixShadowNode = RNSVGConcreteShadowNode<
RNSVGFeColorMatrixComponentName,
RNSVGFeColorMatrixProps>;
JSI_EXPORT extern const char RNSVGFeCompositeComponentName[];
/*
* `ShadowNode` for <RNSVGFeComposite> component.
*/
using RNSVGFeCompositeShadowNode = RNSVGConcreteShadowNode<
RNSVGFeCompositeComponentName,
RNSVGFeCompositeProps>;
JSI_EXPORT extern const char RNSVGFeFloodComponentName[];
/*
* `ShadowNode` for <RNSVGFeFlood> component.
*/
using RNSVGFeFloodShadowNode =
RNSVGConcreteShadowNode<RNSVGFeFloodComponentName, RNSVGFeFloodProps>;
JSI_EXPORT extern const char RNSVGFeGaussianBlurComponentName[];
/*
* `ShadowNode` for <RNSVGFeGaussianBlur> component.
*/
using RNSVGFeGaussianBlurShadowNode = RNSVGConcreteShadowNode<
RNSVGFeGaussianBlurComponentName,
RNSVGFeGaussianBlurProps>;
JSI_EXPORT extern const char RNSVGFeMergeComponentName[];
/*
* `ShadowNode` for <RNSVGFeMerge> component.
*/
using RNSVGFeMergeShadowNode =
RNSVGConcreteShadowNode<RNSVGFeMergeComponentName, RNSVGFeMergeProps>;
JSI_EXPORT extern const char RNSVGFeOffsetComponentName[];
/*
* `ShadowNode` for <RNSVGFeOffset> component.
*/
using RNSVGFeOffsetShadowNode =
RNSVGConcreteShadowNode<RNSVGFeOffsetComponentName, RNSVGFeOffsetProps>;
JSI_EXPORT extern const char RNSVGFilterComponentName[];
/*
* `ShadowNode` for <RNSVGFilter> component.
*/
using RNSVGFilterShadowNode =
RNSVGConcreteShadowNode<RNSVGFilterComponentName, RNSVGFilterProps>;
JSI_EXPORT extern const char RNSVGForeignObjectComponentName[];
/*
* `ShadowNode` for <RNSVGForeignObject> component.
*/
using RNSVGForeignObjectShadowNode = RNSVGConcreteShadowNode<
RNSVGForeignObjectComponentName,
RNSVGForeignObjectProps>;
JSI_EXPORT extern const char RNSVGGroupComponentName[];
/*
* `ShadowNode` for <RNSVGGroup> component.
*/
using RNSVGGroupShadowNode =
RNSVGConcreteShadowNode<RNSVGGroupComponentName, RNSVGGroupProps>;
JSI_EXPORT extern const char RNSVGLinearGradientComponentName[];
/*
* `ShadowNode` for <RNSVGLinearGradient> component.
*/
using RNSVGLinearGradientShadowNode = RNSVGConcreteShadowNode<
RNSVGLinearGradientComponentName,
RNSVGLinearGradientProps>;
JSI_EXPORT extern const char RNSVGLineComponentName[];
/*
* `ShadowNode` for <RNSVGLine> component.
*/
using RNSVGLineShadowNode =
RNSVGConcreteShadowNode<RNSVGLineComponentName, RNSVGLineProps>;
JSI_EXPORT extern const char RNSVGMarkerComponentName[];
/*
* `ShadowNode` for <RNSVGMarker> component.
*/
using RNSVGMarkerShadowNode =
RNSVGConcreteShadowNode<RNSVGMarkerComponentName, RNSVGMarkerProps>;
JSI_EXPORT extern const char RNSVGMaskComponentName[];
/*
* `ShadowNode` for <RNSVGMask> component.
*/
using RNSVGMaskShadowNode =
RNSVGConcreteShadowNode<RNSVGMaskComponentName, RNSVGMaskProps>;
JSI_EXPORT extern const char RNSVGPathComponentName[];
/*
* `ShadowNode` for <RNSVGPath> component.
*/
using RNSVGPathShadowNode =
RNSVGConcreteShadowNode<RNSVGPathComponentName, RNSVGPathProps>;
JSI_EXPORT extern const char RNSVGPatternComponentName[];
/*
* `ShadowNode` for <RNSVGPattern> component.
*/
using RNSVGPatternShadowNode =
RNSVGConcreteShadowNode<RNSVGPatternComponentName, RNSVGPatternProps>;
JSI_EXPORT extern const char RNSVGRadialGradientComponentName[];
/*
* `ShadowNode` for <RNSVGRadialGradient> component.
*/
using RNSVGRadialGradientShadowNode = RNSVGConcreteShadowNode<
RNSVGRadialGradientComponentName,
RNSVGRadialGradientProps>;
JSI_EXPORT extern const char RNSVGRectComponentName[];
/*
* `ShadowNode` for <RNSVGRect> component.
*/
using RNSVGRectShadowNode =
RNSVGConcreteShadowNode<RNSVGRectComponentName, RNSVGRectProps>;
JSI_EXPORT extern const char RNSVGSymbolComponentName[];
/*
* `ShadowNode` for <RNSVGSymbol> component.
*/
using RNSVGSymbolShadowNode =
RNSVGConcreteShadowNode<RNSVGSymbolComponentName, RNSVGSymbolProps>;
JSI_EXPORT extern const char RNSVGTextComponentName[];
/*
* `ShadowNode` for <RNSVGText> component.
*/
using RNSVGTextShadowNode =
RNSVGConcreteShadowNode<RNSVGTextComponentName, RNSVGTextProps>;
JSI_EXPORT extern const char RNSVGTextPathComponentName[];
/*
* `ShadowNode` for <RNSVGTextPath> component.
*/
using RNSVGTextPathShadowNode =
RNSVGConcreteShadowNode<RNSVGTextPathComponentName, RNSVGTextPathProps>;
JSI_EXPORT extern const char RNSVGTSpanComponentName[];
/*
* `ShadowNode` for <RNSVGTSpan> component.
*/
using RNSVGTSpanShadowNode =
RNSVGConcreteShadowNode<RNSVGTSpanComponentName, RNSVGTSpanProps>;
JSI_EXPORT extern const char RNSVGUseComponentName[];
/*
* `ShadowNode` for <RNSVGUse> component.
*/
using RNSVGUseShadowNode =
RNSVGConcreteShadowNode<RNSVGUseComponentName, RNSVGUseProps>;
} // namespace facebook::react

4
src/fabric/CircleNativeComponent.ts
View File

@@ -58,4 +58,6 @@ interface NativeProps
r?: UnsafeMixed<NumberProp>;
}
export default codegenNativeComponent<NativeProps>('RNSVGCircle');
export default codegenNativeComponent<NativeProps>('RNSVGCircle', {
interfaceOnly: true,
});

4
src/fabric/ClipPathNativeComponent.ts
View File

@@ -61,4 +61,6 @@ interface NativeProps
SvgRenderableCommonProps,
SvgGroupCommonProps {}
export default codegenNativeComponent<NativeProps>('RNSVGClipPath');
export default codegenNativeComponent<NativeProps>('RNSVGClipPath', {
interfaceOnly: true,
});

4
src/fabric/DefsNativeComponent.ts
View File

@@ -23,4 +23,6 @@ interface SvgNodeCommonProps {
interface NativeProps extends ViewProps, SvgNodeCommonProps {}
export default codegenNativeComponent<NativeProps>('RNSVGDefs');
export default codegenNativeComponent<NativeProps>('RNSVGDefs', {
interfaceOnly: true,
});

4
src/fabric/EllipseNativeComponent.ts
View File

@@ -59,4 +59,6 @@ interface NativeProps
ry?: UnsafeMixed<NumberProp>;
}
export default codegenNativeComponent<NativeProps>('RNSVGEllipse');
export default codegenNativeComponent<NativeProps>('RNSVGEllipse', {
interfaceOnly: true,
});

4
src/fabric/FeBlendNativeComponent.ts
View File

@@ -26,4 +26,6 @@ export interface NativeProps extends ViewProps, FilterPrimitiveCommonProps {
mode?: WithDefault<BlendMode, 'normal'>;
}
export default codegenNativeComponent<NativeProps>('RNSVGFeBlend');
export default codegenNativeComponent<NativeProps>('RNSVGFeBlend', {
interfaceOnly: true,
});

4
src/fabric/FeColorMatrixNativeComponent.ts
View File

@@ -21,4 +21,6 @@ export interface NativeProps extends ViewProps, FilterPrimitiveCommonProps {
values?: ReadonlyArray<Float>;
}
export default codegenNativeComponent<NativeProps>('RNSVGFeColorMatrix');
export default codegenNativeComponent<NativeProps>('RNSVGFeColorMatrix', {
interfaceOnly: true,
});

4
src/fabric/FeCompositeNativeComponent.ts
View File

@@ -31,4 +31,6 @@ export interface NativeProps extends ViewProps, FilterPrimitiveCommonProps {
k4?: Float;
}
export default codegenNativeComponent<NativeProps>('RNSVGFeComposite');
export default codegenNativeComponent<NativeProps>('RNSVGFeComposite', {
interfaceOnly: true,
});

4
src/fabric/FeFloodNativeComponent.ts
View File

@@ -28,4 +28,6 @@ export interface NativeProps extends ViewProps, FilterPrimitiveCommonProps {
floodOpacity?: WithDefault<Float, 1.0>;
}
export default codegenNativeComponent<NativeProps>('RNSVGFeFlood');
export default codegenNativeComponent<NativeProps>('RNSVGFeFlood', {
interfaceOnly: true,
});

4
src/fabric/FeGaussianBlurNativeComponent.ts
View File

@@ -22,4 +22,6 @@ export interface NativeProps extends ViewProps, FilterPrimitiveCommonProps {
edgeMode?: WithDefault<FilterEdgeMode, 'none'>;
}
export default codegenNativeComponent<NativeProps>('RNSVGFeGaussianBlur');
export default codegenNativeComponent<NativeProps>('RNSVGFeGaussianBlur', {
interfaceOnly: true,
});

4
src/fabric/FeMergeNativeComponent.ts
View File

@@ -16,4 +16,6 @@ export interface NativeProps extends ViewProps, FilterPrimitiveCommonProps {
nodes?: ReadonlyArray<string>;
}
export default codegenNativeComponent<NativeProps>('RNSVGFeMerge');
export default codegenNativeComponent<NativeProps>('RNSVGFeMerge', {
interfaceOnly: true,
});

4
src/fabric/FeOffsetNativeComponent.ts
View File

@@ -18,4 +18,6 @@ export interface NativeProps extends ViewProps, FilterPrimitiveCommonProps {
dy?: UnsafeMixed<NumberProp>;
}
export default codegenNativeComponent<NativeProps>('RNSVGFeOffset');
export default codegenNativeComponent<NativeProps>('RNSVGFeOffset', {
interfaceOnly: true,
});

4
src/fabric/FilterNativeComponent.ts
View File

@@ -16,4 +16,6 @@ interface NativeProps extends ViewProps {
primitiveUnits?: WithDefault<Units, 'userSpaceOnUse'>;
}
export default codegenNativeComponent<NativeProps>('RNSVGFilter');
export default codegenNativeComponent<NativeProps>('RNSVGFilter', {
interfaceOnly: true,
});

4
src/fabric/ForeignObjectNativeComponent.ts
View File

@@ -66,4 +66,6 @@ interface NativeProps
width?: UnsafeMixed<NumberProp>;
}
export default codegenNativeComponent<NativeProps>('RNSVGForeignObject');
export default codegenNativeComponent<NativeProps>('RNSVGForeignObject', {
interfaceOnly: true,
});

4
src/fabric/GroupNativeComponent.ts
View File

@@ -61,4 +61,6 @@ interface NativeProps
SvgRenderableCommonProps,
SvgGroupCommonProps {}
export default codegenNativeComponent<NativeProps>('RNSVGGroup');
export default codegenNativeComponent<NativeProps>('RNSVGGroup', {
interfaceOnly: true,
});

4
src/fabric/LineNativeComponent.ts
View File

@@ -59,4 +59,6 @@ interface NativeProps
y2?: UnsafeMixed<NumberProp>;
}
export default codegenNativeComponent<NativeProps>('RNSVGLine');
export default codegenNativeComponent<NativeProps>('RNSVGLine', {
interfaceOnly: true,
});

4
src/fabric/LinearGradientNativeComponent.ts
View File

@@ -34,4 +34,6 @@ interface NativeProps extends ViewProps, SvgNodeCommonProps {
gradientTransform?: ReadonlyArray<Float> | null;
}
export default codegenNativeComponent<NativeProps>('RNSVGLinearGradient');
export default codegenNativeComponent<NativeProps>('RNSVGLinearGradient', {
interfaceOnly: true,
});

4
src/fabric/MarkerNativeComponent.ts
View File

@@ -74,4 +74,6 @@ interface NativeProps
meetOrSlice?: Int32;
}
export default codegenNativeComponent<NativeProps>('RNSVGMarker');
export default codegenNativeComponent<NativeProps>('RNSVGMarker', {
interfaceOnly: true,
});

4
src/fabric/MaskNativeComponent.ts
View File

@@ -69,4 +69,6 @@ interface NativeProps
maskType?: Int32;
}
export default codegenNativeComponent<NativeProps>('RNSVGMask');
export default codegenNativeComponent<NativeProps>('RNSVGMask', {
interfaceOnly: true,
});

4
src/fabric/PathNativeComponent.ts
View File

@@ -56,4 +56,6 @@ interface NativeProps
d?: string;
}
export default codegenNativeComponent<NativeProps>('RNSVGPath');
export default codegenNativeComponent<NativeProps>('RNSVGPath', {
interfaceOnly: true,
});

4
src/fabric/PatternNativeComponent.ts
View File

@@ -75,4 +75,6 @@ interface NativeProps
meetOrSlice?: Int32;
}
export default codegenNativeComponent<NativeProps>('RNSVGPattern');
export default codegenNativeComponent<NativeProps>('RNSVGPattern', {
interfaceOnly: true,
});

4
src/fabric/RadialGradientNativeComponent.ts
View File

@@ -36,4 +36,6 @@ interface NativeProps extends ViewProps, SvgNodeCommonProps {
gradientTransform?: ReadonlyArray<Float> | null;
}
export default codegenNativeComponent<NativeProps>('RNSVGRadialGradient');
export default codegenNativeComponent<NativeProps>('RNSVGRadialGradient', {
interfaceOnly: true,
});

4
src/fabric/RectNativeComponent.ts
View File

@@ -61,4 +61,6 @@ interface NativeProps
ry?: UnsafeMixed<NumberProp>;
}
export default codegenNativeComponent<NativeProps>('RNSVGRect');
export default codegenNativeComponent<NativeProps>('RNSVGRect', {
interfaceOnly: true,
});

4
src/fabric/SymbolNativeComponent.ts
View File

@@ -68,4 +68,6 @@ interface NativeProps
meetOrSlice?: Int32;
}
export default codegenNativeComponent<NativeProps>('RNSVGSymbol');
export default codegenNativeComponent<NativeProps>('RNSVGSymbol', {
interfaceOnly: true,
});

4
src/fabric/TSpanNativeComponent.ts
View File

@@ -78,4 +78,6 @@ interface NativeProps
content?: string;
}
export default codegenNativeComponent<NativeProps>('RNSVGTSpan');
export default codegenNativeComponent<NativeProps>('RNSVGTSpan', {
interfaceOnly: true,
});

4
src/fabric/TextNativeComponent.ts
View File

@@ -76,4 +76,6 @@ interface NativeProps
SvgGroupCommonProps,
SvgTextCommonProps {}
export default codegenNativeComponent<NativeProps>('RNSVGText');
export default codegenNativeComponent<NativeProps>('RNSVGText', {
interfaceOnly: true,
});

4
src/fabric/TextPathNativeComponent.ts
View File

@@ -82,4 +82,6 @@ interface NativeProps
startOffset?: UnsafeMixed<NumberProp>;
}
export default codegenNativeComponent<NativeProps>('RNSVGTextPath');
export default codegenNativeComponent<NativeProps>('RNSVGTextPath', {
interfaceOnly: true,
});

4
src/fabric/UseNativeComponent.ts
View File

@@ -60,4 +60,6 @@ interface NativeProps
width?: UnsafeMixed<NumberProp>;
}
export default codegenNativeComponent<NativeProps>('RNSVGUse');
export default codegenNativeComponent<NativeProps>('RNSVGUse', {
interfaceOnly: true,
});