From e1fccf200bdce290ef370dbaa5b8dd762ee0e607 Mon Sep 17 00:00:00 2001 From: Wojciech Lewicki Date: Tue, 23 Aug 2022 16:06:37 +0200 Subject: [PATCH 01/79] feat: use codegenNativeComponent to import native views --- src/elements/NativeComponents.tsx | 56 ++++++++++++++----------------- 1 file changed, 26 insertions(+), 30 deletions(-) diff --git a/src/elements/NativeComponents.tsx b/src/elements/NativeComponents.tsx index 60fb7d707..18ff66e06 100644 --- a/src/elements/NativeComponents.tsx +++ b/src/elements/NativeComponents.tsx @@ -1,31 +1,27 @@ -import { requireNativeComponent as rnc } from 'react-native'; -import React from 'react'; +import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; -declare module 'react-native' { - function requireNativeComponent( - viewName: string, - ): // eslint-disable-next-line @typescript-eslint/no-explicit-any - React.ComponentType>; -} - -export const RNSVGSvg = rnc('RNSVGSvgView'); -export const RNSVGCircle = rnc('RNSVGCircle'); -export const RNSVGClipPath = rnc('RNSVGClipPath'); -export const RNSVGDefs = rnc('RNSVGDefs'); -export const RNSVGEllipse = rnc('RNSVGEllipse'); -export const RNSVGForeignObject = rnc('RNSVGForeignObject'); -export const RNSVGGroup = rnc('RNSVGGroup'); -export const RNSVGImage = rnc('RNSVGImage'); -export const RNSVGLine = rnc('RNSVGLine'); -export const RNSVGLinearGradient = rnc('RNSVGLinearGradient'); -export const RNSVGMarker = rnc('RNSVGMarker'); -export const RNSVGMask = rnc('RNSVGMask'); -export const RNSVGPath = rnc('RNSVGPath'); -export const RNSVGPattern = rnc('RNSVGPattern'); -export const RNSVGRadialGradient = rnc('RNSVGRadialGradient'); -export const RNSVGRect = rnc('RNSVGRect'); -export const RNSVGSymbol = rnc('RNSVGSymbol'); -export const RNSVGText = rnc('RNSVGText'); -export const RNSVGTextPath = rnc('RNSVGTextPath'); -export const RNSVGTSpan = rnc('RNSVGTSpan'); -export const RNSVGUse = rnc('RNSVGUse'); +export const RNSVGSvg = codegenNativeComponent('RNSVGSvgView'); +export const RNSVGCircle = codegenNativeComponent('RNSVGCircle'); +export const RNSVGClipPath = codegenNativeComponent('RNSVGClipPath'); +export const RNSVGDefs = codegenNativeComponent('RNSVGDefs'); +export const RNSVGEllipse = codegenNativeComponent('RNSVGEllipse'); +export const RNSVGForeignObject = codegenNativeComponent('RNSVGForeignObject'); +export const RNSVGGroup = codegenNativeComponent('RNSVGGroup'); +export const RNSVGImage = codegenNativeComponent('RNSVGImage'); +export const RNSVGLine = codegenNativeComponent('RNSVGLine'); +export const RNSVGLinearGradient = codegenNativeComponent( + 'RNSVGLinearGradient', +); +export const RNSVGMarker = codegenNativeComponent('RNSVGMarker'); +export const RNSVGMask = codegenNativeComponent('RNSVGMask'); +export const RNSVGPath = codegenNativeComponent('RNSVGPath'); +export const RNSVGPattern = codegenNativeComponent('RNSVGPattern'); +export const RNSVGRadialGradient = codegenNativeComponent( + 'RNSVGRadialGradient', +); +export const RNSVGRect = codegenNativeComponent('RNSVGRect'); +export const RNSVGSymbol = codegenNativeComponent('RNSVGSymbol'); +export const RNSVGText = codegenNativeComponent('RNSVGText'); +export const RNSVGTextPath = codegenNativeComponent('RNSVGTextPath'); +export const RNSVGTSpan = codegenNativeComponent('RNSVGTSpan'); +export const RNSVGUse = codegenNativeComponent('RNSVGUse'); From ad47bc6f684dc6556904a759a84cbf15dfa0dfd2 Mon Sep 17 00:00:00 2001 From: Wojciech Lewicki Date: Tue, 23 Aug 2022 16:37:52 +0200 Subject: [PATCH 02/79] fix: satisfy typescript --- src/elements/NativeComponents.tsx | 44 ++++++++++++++++--------------- 1 file changed, 23 insertions(+), 21 deletions(-) diff --git a/src/elements/NativeComponents.tsx b/src/elements/NativeComponents.tsx index 18ff66e06..b90a10065 100644 --- a/src/elements/NativeComponents.tsx +++ b/src/elements/NativeComponents.tsx @@ -1,27 +1,29 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; -export const RNSVGSvg = codegenNativeComponent('RNSVGSvgView'); -export const RNSVGCircle = codegenNativeComponent('RNSVGCircle'); -export const RNSVGClipPath = codegenNativeComponent('RNSVGClipPath'); -export const RNSVGDefs = codegenNativeComponent('RNSVGDefs'); -export const RNSVGEllipse = codegenNativeComponent('RNSVGEllipse'); -export const RNSVGForeignObject = codegenNativeComponent('RNSVGForeignObject'); -export const RNSVGGroup = codegenNativeComponent('RNSVGGroup'); -export const RNSVGImage = codegenNativeComponent('RNSVGImage'); -export const RNSVGLine = codegenNativeComponent('RNSVGLine'); -export const RNSVGLinearGradient = codegenNativeComponent( +export const RNSVGSvg = codegenNativeComponent('RNSVGSvgView'); +export const RNSVGCircle = codegenNativeComponent('RNSVGCircle'); +export const RNSVGClipPath = codegenNativeComponent('RNSVGClipPath'); +export const RNSVGDefs = codegenNativeComponent('RNSVGDefs'); +export const RNSVGEllipse = codegenNativeComponent('RNSVGEllipse'); +export const RNSVGForeignObject = + codegenNativeComponent('RNSVGForeignObject'); +export const RNSVGGroup = codegenNativeComponent('RNSVGGroup'); +export const RNSVGImage = codegenNativeComponent('RNSVGImage'); +export const RNSVGLine = codegenNativeComponent('RNSVGLine'); +export const RNSVGLinearGradient = codegenNativeComponent( 'RNSVGLinearGradient', ); -export const RNSVGMarker = codegenNativeComponent('RNSVGMarker'); -export const RNSVGMask = codegenNativeComponent('RNSVGMask'); -export const RNSVGPath = codegenNativeComponent('RNSVGPath'); -export const RNSVGPattern = codegenNativeComponent('RNSVGPattern'); -export const RNSVGRadialGradient = codegenNativeComponent( +export const RNSVGMarker = codegenNativeComponent('RNSVGMarker'); +export const RNSVGMask = codegenNativeComponent('RNSVGMask'); +export const RNSVGPath = codegenNativeComponent('RNSVGPath'); +export const RNSVGPattern = codegenNativeComponent('RNSVGPattern'); +export const RNSVGRadialGradient = codegenNativeComponent( 'RNSVGRadialGradient', ); -export const RNSVGRect = codegenNativeComponent('RNSVGRect'); -export const RNSVGSymbol = codegenNativeComponent('RNSVGSymbol'); -export const RNSVGText = codegenNativeComponent('RNSVGText'); -export const RNSVGTextPath = codegenNativeComponent('RNSVGTextPath'); -export const RNSVGTSpan = codegenNativeComponent('RNSVGTSpan'); -export const RNSVGUse = codegenNativeComponent('RNSVGUse'); +export const RNSVGRect = codegenNativeComponent('RNSVGRect'); +export const RNSVGSymbol = codegenNativeComponent('RNSVGSymbol'); +export const RNSVGText = codegenNativeComponent('RNSVGText'); +export const RNSVGTextPath = codegenNativeComponent('RNSVGTextPath'); +export const RNSVGTSpan = codegenNativeComponent('RNSVGTSpan'); +export const RNSVGUse = codegenNativeComponent('RNSVGUse'); From 5668008f62e6cbc6754f557614432330c1a43d38 Mon Sep 17 00:00:00 2001 From: Wojciech Lewicki Date: Fri, 26 Aug 2022 17:21:12 +0200 Subject: [PATCH 03/79] feat: make fabric specs TS --- src/fabric/CircleNativeComponent.js | 73 ------------- src/fabric/CircleNativeComponent.ts | 62 +++++++++++ src/fabric/ClipPathNativeComponent.js | 47 -------- src/fabric/ClipPathNativeComponent.ts | 33 ++++++ src/fabric/DefsNativeComponent.js | 19 ---- src/fabric/DefsNativeComponent.ts | 12 +++ src/fabric/EllipseNativeComponent.js | 74 ------------- src/fabric/EllipseNativeComponent.ts | 63 +++++++++++ src/fabric/ForeignObjectNativeComponent.js | 103 ------------------ src/fabric/ForeignObjectNativeComponent.ts | 89 ++++++++++++++++ src/fabric/GroupNativeComponent.js | 97 ----------------- src/fabric/GroupNativeComponent.ts | 82 ++++++++++++++ src/fabric/ImageNativeComponent.js | 79 -------------- src/fabric/ImageNativeComponent.ts | 70 ++++++++++++ src/fabric/LineNativeComponent.js | 74 ------------- src/fabric/LineNativeComponent.ts | 63 +++++++++++ src/fabric/LinearGradientNativeComponent.js | 56 ---------- src/fabric/LinearGradientNativeComponent.ts | 41 +++++++ src/fabric/MarkerNativeComponent.js | 109 ------------------- src/fabric/MarkerNativeComponent.ts | 95 +++++++++++++++++ src/fabric/MaskNativeComponent.js | 106 ------------------ src/fabric/MaskNativeComponent.ts | 92 ++++++++++++++++ src/fabric/PathNativeComponent.js | 71 ------------- src/fabric/PathNativeComponent.ts | 60 +++++++++++ src/fabric/PatternNativeComponent.js | 112 -------------------- src/fabric/PatternNativeComponent.ts | 98 +++++++++++++++++ src/fabric/RadialGradientNativeComponent.js | 58 ---------- src/fabric/RadialGradientNativeComponent.ts | 43 ++++++++ src/fabric/RectNativeComponent.js | 78 -------------- src/fabric/RectNativeComponent.ts | 67 ++++++++++++ src/fabric/SvgViewNativeComponent.js | 25 ----- src/fabric/SvgViewNativeComponent.ts | 25 +++++ src/fabric/SymbolNativeComponent.js | 103 ------------------ src/fabric/SymbolNativeComponent.ts | 89 ++++++++++++++++ src/fabric/TSpanNativeComponent.js | 108 ------------------- src/fabric/TSpanNativeComponent.ts | 97 +++++++++++++++++ src/fabric/TextNativeComponent.js | 107 ------------------- src/fabric/TextNativeComponent.ts | 96 +++++++++++++++++ src/fabric/TextPathNativeComponent.js | 76 ------------- src/fabric/TextPathNativeComponent.ts | 65 ++++++++++++ src/fabric/UseNativeComponent.js | 77 -------------- src/fabric/UseNativeComponent.ts | 66 ++++++++++++ 42 files changed, 1408 insertions(+), 1652 deletions(-) delete mode 100644 src/fabric/CircleNativeComponent.js create mode 100644 src/fabric/CircleNativeComponent.ts delete mode 100644 src/fabric/ClipPathNativeComponent.js create mode 100644 src/fabric/ClipPathNativeComponent.ts delete mode 100644 src/fabric/DefsNativeComponent.js create mode 100644 src/fabric/DefsNativeComponent.ts delete mode 100644 src/fabric/EllipseNativeComponent.js create mode 100644 src/fabric/EllipseNativeComponent.ts delete mode 100644 src/fabric/ForeignObjectNativeComponent.js create mode 100644 src/fabric/ForeignObjectNativeComponent.ts delete mode 100644 src/fabric/GroupNativeComponent.js create mode 100644 src/fabric/GroupNativeComponent.ts delete mode 100644 src/fabric/ImageNativeComponent.js create mode 100644 src/fabric/ImageNativeComponent.ts delete mode 100644 src/fabric/LineNativeComponent.js create mode 100644 src/fabric/LineNativeComponent.ts delete mode 100644 src/fabric/LinearGradientNativeComponent.js create mode 100644 src/fabric/LinearGradientNativeComponent.ts delete mode 100644 src/fabric/MarkerNativeComponent.js create mode 100644 src/fabric/MarkerNativeComponent.ts delete mode 100644 src/fabric/MaskNativeComponent.js create mode 100644 src/fabric/MaskNativeComponent.ts delete mode 100644 src/fabric/PathNativeComponent.js create mode 100644 src/fabric/PathNativeComponent.ts delete mode 100644 src/fabric/PatternNativeComponent.js create mode 100644 src/fabric/PatternNativeComponent.ts delete mode 100644 src/fabric/RadialGradientNativeComponent.js create mode 100644 src/fabric/RadialGradientNativeComponent.ts delete mode 100644 src/fabric/RectNativeComponent.js create mode 100644 src/fabric/RectNativeComponent.ts delete mode 100644 src/fabric/SvgViewNativeComponent.js create mode 100644 src/fabric/SvgViewNativeComponent.ts delete mode 100644 src/fabric/SymbolNativeComponent.js create mode 100644 src/fabric/SymbolNativeComponent.ts delete mode 100644 src/fabric/TSpanNativeComponent.js create mode 100644 src/fabric/TSpanNativeComponent.ts delete mode 100644 src/fabric/TextNativeComponent.js create mode 100644 src/fabric/TextNativeComponent.ts delete mode 100644 src/fabric/TextPathNativeComponent.js create mode 100644 src/fabric/TextPathNativeComponent.ts delete mode 100644 src/fabric/UseNativeComponent.js create mode 100644 src/fabric/UseNativeComponent.ts diff --git a/src/fabric/CircleNativeComponent.js b/src/fabric/CircleNativeComponent.js deleted file mode 100644 index 4d8e59b5e..000000000 --- a/src/fabric/CircleNativeComponent.js +++ /dev/null @@ -1,73 +0,0 @@ -/** - * @flow strict-local - * @format - */ -/* eslint-disable */ -import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'; -import type { HostComponent } from 'react-native/Libraries/Renderer/shims/ReactNativeTypes'; -import { ColorValue } from 'react-native/Libraries/StyleSheet/StyleSheet'; -import type { Int32, Double } from 'react-native/Libraries/Types/CodegenTypes'; - -type LayoutEvent = $ReadOnly<{| - layout: $ReadOnly<{| - x: Float, - y: Float, - width: Float, - height: Float, - |}>, -|}>; - -type SvgNodeCommonProps = $ReadOnly<{| - name?: string, - opacity?: WithDefault, - matrix?: $ReadOnlyArray, //CGAffineTransform, - // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling - mask?: string, - markerStart?: string, - markerMid?: string, - markerEnd?: string, - clipPath?: string, - clipRule?: WithDefault, - responsible?: boolean, - onLayout?: ?DirectEventHandler, // not working for now - display?: string, -|}>; - -type ColorStruct = $ReadOnly<{| - type?: WithDefault, - value?: ColorValue, - brushRef?: string, -|}>; - -type SvgRenderableCommonProps = $ReadOnly<{| - fill?: ColorStruct, - fillOpacity?: WithDefault, - fillRule?: WithDefault, - stroke?: ColorStruct, - strokeOpacity?: WithDefault, - strokeWidth?: WithDefault, - strokeLinecap?: WithDefault, - strokeLinejoin?: WithDefault, - strokeDasharray?: $ReadOnlyArray, - strokeDashoffset?: Float, - strokeMiterlimit?: Float, - vectorEffect?: WithDefault, - propList?: $ReadOnlyArray, -|}>; - -type NativeProps = $ReadOnly<{| - ...ViewProps, - ...SvgNodeCommonProps, - ...SvgRenderableCommonProps, - cx?: string, - cy?: string, - r?: string, -|}>; - -type ComponentType = HostComponent; - -export default (codegenNativeComponent( - 'RNSVGCircle', - {}, -): ComponentType); diff --git a/src/fabric/CircleNativeComponent.ts b/src/fabric/CircleNativeComponent.ts new file mode 100644 index 000000000..89330d98d --- /dev/null +++ b/src/fabric/CircleNativeComponent.ts @@ -0,0 +1,62 @@ +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import type { + Float, + Int32, + WithDefault, +} from 'react-native/Libraries/Types/CodegenTypes'; + +interface SvgNodeCommonProps { + name?: string; + opacity?: WithDefault; + matrix?: ReadonlyArray; //CGAffineTransform, + // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling + mask?: string; + markerStart?: string; + markerMid?: string; + markerEnd?: string; + clipPath?: string; + clipRule?: WithDefault; + responsible?: boolean; + display?: string; +} + +type ColorStruct = Readonly<{ + type?: WithDefault; + value?: ColorValue; + brushRef?: string; +}>; + +interface SvgRenderableCommonProps { + fill?: ColorStruct; + fillOpacity?: WithDefault; + fillRule?: WithDefault; + stroke?: ColorStruct; + strokeOpacity?: WithDefault; + strokeWidth?: WithDefault; + strokeLinecap?: WithDefault; + strokeLinejoin?: WithDefault; + strokeDasharray?: ReadonlyArray; + strokeDashoffset?: Float; + strokeMiterlimit?: Float; + vectorEffect?: WithDefault; + propList?: ReadonlyArray; +} + +interface NativeProps + extends ViewProps, + SvgNodeCommonProps, + SvgRenderableCommonProps { + cx?: string; + cy?: string; + r?: string; +} + +// eslint-disable-next-line @typescript-eslint/ban-types +const codegenNativeComponent = codegenNativeComponentUntyped as ( + name: string, +) => HostComponent; + +export default codegenNativeComponent('RNSVGCircle'); diff --git a/src/fabric/ClipPathNativeComponent.js b/src/fabric/ClipPathNativeComponent.js deleted file mode 100644 index 94707885b..000000000 --- a/src/fabric/ClipPathNativeComponent.js +++ /dev/null @@ -1,47 +0,0 @@ -/** - * @flow strict-local - * @format - */ -/* eslint-disable */ -import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'; -import type { HostComponent } from 'react-native/Libraries/Renderer/shims/ReactNativeTypes'; -import { ColorValue } from 'react-native/Libraries/StyleSheet/StyleSheet'; -import type { Int32, Double } from 'react-native/Libraries/Types/CodegenTypes'; - -type LayoutEvent = $ReadOnly<{| - layout: $ReadOnly<{| - x: Float, - y: Float, - width: Float, - height: Float, - |}>, -|}>; - -type SvgNodeCommonProps = $ReadOnly<{| - name?: string, - opacity?: WithDefault, - matrix?: $ReadOnlyArray, //CGAffineTransform, - // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling - mask?: string, - markerStart?: string, - markerMid?: string, - markerEnd?: string, - clipPath?: string, - clipRule?: WithDefault, - responsible?: boolean, - onLayout?: ?DirectEventHandler, // not working for now - display?: string, -|}>; - -type NativeProps = $ReadOnly<{| - ...ViewProps, - ...SvgNodeCommonProps, -|}>; - -type ComponentType = HostComponent; - -export default (codegenNativeComponent( - 'RNSVGClipPath', - {}, -): ComponentType); diff --git a/src/fabric/ClipPathNativeComponent.ts b/src/fabric/ClipPathNativeComponent.ts new file mode 100644 index 000000000..505872a9b --- /dev/null +++ b/src/fabric/ClipPathNativeComponent.ts @@ -0,0 +1,33 @@ +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { HostComponent, ViewProps } from 'react-native'; +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import type { + Float, + Int32, + WithDefault, +} from 'react-native/Libraries/Types/CodegenTypes'; + +interface SvgNodeCommonProps { + name?: string; + opacity?: WithDefault; + matrix?: ReadonlyArray; //CGAffineTransform, + // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling + mask?: string; + markerStart?: string; + markerMid?: string; + markerEnd?: string; + clipPath?: string; + clipRule?: WithDefault; + responsible?: boolean; + display?: string; +} + +interface NativeProps extends ViewProps, SvgNodeCommonProps {} + +// eslint-disable-next-line @typescript-eslint/ban-types +const codegenNativeComponent = codegenNativeComponentUntyped as ( + name: string, +) => HostComponent; + +export default codegenNativeComponent('RNSVGClipPath'); diff --git a/src/fabric/DefsNativeComponent.js b/src/fabric/DefsNativeComponent.js deleted file mode 100644 index cc8ac8629..000000000 --- a/src/fabric/DefsNativeComponent.js +++ /dev/null @@ -1,19 +0,0 @@ -/** - * @flow strict-local - * @format - */ -/* eslint-disable */ -import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'; -import type { HostComponent } from 'react-native/Libraries/Renderer/shims/ReactNativeTypes'; - -type NativeProps = $ReadOnly<{| - ...ViewProps, -|}>; - -type ComponentType = HostComponent; - -export default (codegenNativeComponent( - 'RNSVGDefs', - {}, -): ComponentType); diff --git a/src/fabric/DefsNativeComponent.ts b/src/fabric/DefsNativeComponent.ts new file mode 100644 index 000000000..753104714 --- /dev/null +++ b/src/fabric/DefsNativeComponent.ts @@ -0,0 +1,12 @@ +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { HostComponent, ViewProps } from 'react-native'; + +interface NativeProps extends ViewProps {} + +// eslint-disable-next-line @typescript-eslint/ban-types +const codegenNativeComponent = codegenNativeComponentUntyped as ( + name: string, +) => HostComponent; + +export default codegenNativeComponent('RNSVGDefs'); diff --git a/src/fabric/EllipseNativeComponent.js b/src/fabric/EllipseNativeComponent.js deleted file mode 100644 index 40c47afc5..000000000 --- a/src/fabric/EllipseNativeComponent.js +++ /dev/null @@ -1,74 +0,0 @@ -/** - * @flow strict-local - * @format - */ -/* eslint-disable */ -import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'; -import type { HostComponent } from 'react-native/Libraries/Renderer/shims/ReactNativeTypes'; -import { ColorValue } from 'react-native/Libraries/StyleSheet/StyleSheet'; -import type { Int32, Double } from 'react-native/Libraries/Types/CodegenTypes'; - -type LayoutEvent = $ReadOnly<{| - layout: $ReadOnly<{| - x: Float, - y: Float, - width: Float, - height: Float, - |}>, -|}>; - -type SvgNodeCommonProps = $ReadOnly<{| - name?: string, - opacity?: WithDefault, - matrix?: $ReadOnlyArray, //CGAffineTransform, - // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling - mask?: string, - markerStart?: string, - markerMid?: string, - markerEnd?: string, - clipPath?: string, - clipRule?: WithDefault, - responsible?: boolean, - onLayout?: ?DirectEventHandler, // not working for now - display?: string, -|}>; - -type ColorStruct = $ReadOnly<{| - type?: WithDefault, - value?: ColorValue, - brushRef?: string, -|}>; - -type SvgRenderableCommonProps = $ReadOnly<{| - fill?: ColorStruct, - fillOpacity?: WithDefault, - fillRule?: WithDefault, - stroke?: ColorStruct, - strokeOpacity?: WithDefault, - strokeWidth?: WithDefault, - strokeLinecap?: WithDefault, - strokeLinejoin?: WithDefault, - strokeDasharray?: $ReadOnlyArray, - strokeDashoffset?: Float, - strokeMiterlimit?: Float, - vectorEffect?: WithDefault, - propList?: $ReadOnlyArray, -|}>; - -type NativeProps = $ReadOnly<{| - ...ViewProps, - ...SvgNodeCommonProps, - ...SvgRenderableCommonProps, - cx?: string, - cy?: string, - rx?: string, - ry?: string, -|}>; - -type ComponentType = HostComponent; - -export default (codegenNativeComponent( - 'RNSVGEllipse', - {}, -): ComponentType); diff --git a/src/fabric/EllipseNativeComponent.ts b/src/fabric/EllipseNativeComponent.ts new file mode 100644 index 000000000..3cf88550c --- /dev/null +++ b/src/fabric/EllipseNativeComponent.ts @@ -0,0 +1,63 @@ +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import type { + Float, + Int32, + WithDefault, +} from 'react-native/Libraries/Types/CodegenTypes'; + +interface SvgNodeCommonProps { + name?: string; + opacity?: WithDefault; + matrix?: ReadonlyArray; //CGAffineTransform, + // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling + mask?: string; + markerStart?: string; + markerMid?: string; + markerEnd?: string; + clipPath?: string; + clipRule?: WithDefault; + responsible?: boolean; + display?: string; +} + +type ColorStruct = Readonly<{ + type?: WithDefault; + value?: ColorValue; + brushRef?: string; +}>; + +interface SvgRenderableCommonProps { + fill?: ColorStruct; + fillOpacity?: WithDefault; + fillRule?: WithDefault; + stroke?: ColorStruct; + strokeOpacity?: WithDefault; + strokeWidth?: WithDefault; + strokeLinecap?: WithDefault; + strokeLinejoin?: WithDefault; + strokeDasharray?: ReadonlyArray; + strokeDashoffset?: Float; + strokeMiterlimit?: Float; + vectorEffect?: WithDefault; + propList?: ReadonlyArray; +} + +interface NativeProps + extends ViewProps, + SvgNodeCommonProps, + SvgRenderableCommonProps { + cx?: string; + cy?: string; + rx?: string; + ry?: string; +} + +// eslint-disable-next-line @typescript-eslint/ban-types +const codegenNativeComponent = codegenNativeComponentUntyped as ( + name: string, +) => HostComponent; + +export default codegenNativeComponent('RNSVGEllipse'); diff --git a/src/fabric/ForeignObjectNativeComponent.js b/src/fabric/ForeignObjectNativeComponent.js deleted file mode 100644 index ed4e23cd1..000000000 --- a/src/fabric/ForeignObjectNativeComponent.js +++ /dev/null @@ -1,103 +0,0 @@ -/** - * @flow strict-local - * @format - */ -/* eslint-disable */ -import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { HostComponent } from 'react-native/Libraries/Renderer/shims/ReactNativeTypes'; -import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'; - -import type { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes'; - -// for some reason the parser doesn't allow to put flow types in another file -// import type { SvgNodeCommonProps } from './svgNodeCommonProps'; - -type LayoutEvent = $ReadOnly<{| - layout: $ReadOnly<{| - x: Float, - y: Float, - width: Float, - height: Float, - |}>, -|}>; - -type SvgNodeCommonProps = $ReadOnly<{| - name?: string, - opacity?: WithDefault, - matrix?: $ReadOnlyArray, //CGAffineTransform, - // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling - mask?: string, - markerStart?: string, - markerMid?: string, - markerEnd?: string, - clipPath?: string, - clipRule?: WithDefault, - responsible?: boolean, - onLayout?: ?DirectEventHandler, - display?: string, -|}>; - -type ColorStruct = $ReadOnly<{| - type?: WithDefault, - value?: ColorValue, - brushRef?: string, -|}>; - -type SvgRenderableCommonProps = $ReadOnly<{| - fill?: ColorStruct, - fillOpacity?: WithDefault, - fillRule?: WithDefault, - stroke?: ColorStruct, - strokeOpacity?: WithDefault, - strokeWidth?: WithDefault, - strokeLinecap?: WithDefault, - strokeLinejoin?: WithDefault, - strokeDasharray?: $ReadOnlyArray, - strokeDashoffset?: Float, - strokeMiterlimit?: Float, - vectorEffect?: WithDefault, - propList?: $ReadOnlyArray, -|}>; - -type FontObject = $ReadOnly<{| - fontStyle?: string, - fontVariant?: string, - fontWeight?: string, - fontStretch?: string, - fontSize?: string, - fontFamily?: string, - textAnchor?: string, - textDecoration?: string, - letterSpacing?: string, - wordSpacing?: string, - kerning?: string, - fontFeatureSettings?: string, - fontVariantLigatures?: string, - fontVariationSettings?: string, -|}>; - -type SvgGroupCommonProps = $ReadOnly<{| - fontSize?: string, - fontWeight?: string, - font?: FontObject, -|}>; - -type NativeProps = $ReadOnly<{| - ...ViewProps, - ...SvgNodeCommonProps, - ...SvgRenderableCommonProps, - ...SvgGroupCommonProps, - x?: string, - y?: string, - foreignObjectheight?: string, - foreignObjectwidth?: string, - height?: string, - width?: string, -|}>; - -type ComponentType = HostComponent; - -export default (codegenNativeComponent( - 'RNSVGForeignObject', - {}, -): ComponentType); diff --git a/src/fabric/ForeignObjectNativeComponent.ts b/src/fabric/ForeignObjectNativeComponent.ts new file mode 100644 index 000000000..71f963643 --- /dev/null +++ b/src/fabric/ForeignObjectNativeComponent.ts @@ -0,0 +1,89 @@ +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import type { + Float, + Int32, + WithDefault, +} from 'react-native/Libraries/Types/CodegenTypes'; + +interface SvgNodeCommonProps { + name?: string; + opacity?: WithDefault; + matrix?: ReadonlyArray; //CGAffineTransform, + // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling + mask?: string; + markerStart?: string; + markerMid?: string; + markerEnd?: string; + clipPath?: string; + clipRule?: WithDefault; + responsible?: boolean; + display?: string; +} + +type ColorStruct = Readonly<{ + type?: WithDefault; + value?: ColorValue; + brushRef?: string; +}>; + +interface SvgRenderableCommonProps { + fill?: ColorStruct; + fillOpacity?: WithDefault; + fillRule?: WithDefault; + stroke?: ColorStruct; + strokeOpacity?: WithDefault; + strokeWidth?: WithDefault; + strokeLinecap?: WithDefault; + strokeLinejoin?: WithDefault; + strokeDasharray?: ReadonlyArray; + strokeDashoffset?: Float; + strokeMiterlimit?: Float; + vectorEffect?: WithDefault; + propList?: ReadonlyArray; +} + +type FontObject = Readonly<{ + fontStyle?: string; + fontVariant?: string; + fontWeight?: string; + fontStretch?: string; + fontSize?: string; + fontFamily?: string; + textAnchor?: string; + textDecoration?: string; + letterSpacing?: string; + wordSpacing?: string; + kerning?: string; + fontFeatureSettings?: string; + fontVariantLigatures?: string; + fontVariationSettings?: string; +}>; + +type SvgGroupCommonProps = Readonly<{ + fontSize?: string; + fontWeight?: string; + font?: FontObject; +}>; + +interface NativeProps + extends ViewProps, + SvgNodeCommonProps, + SvgRenderableCommonProps, + SvgGroupCommonProps { + x?: string; + y?: string; + foreignObjectheight?: string; + foreignObjectwidth?: string; + height?: string; + width?: string; +} + +// eslint-disable-next-line @typescript-eslint/ban-types +const codegenNativeComponent = codegenNativeComponentUntyped as ( + name: string, +) => HostComponent; + +export default codegenNativeComponent('RNSVGForeignObject'); diff --git a/src/fabric/GroupNativeComponent.js b/src/fabric/GroupNativeComponent.js deleted file mode 100644 index 77bd1c019..000000000 --- a/src/fabric/GroupNativeComponent.js +++ /dev/null @@ -1,97 +0,0 @@ -/** - * @flow strict-local - * @format - */ -/* eslint-disable */ -import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { HostComponent } from 'react-native/Libraries/Renderer/shims/ReactNativeTypes'; -import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'; - -import type { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes'; - -// for some reason the parser doesn't allow to put flow types in another file -// import type { SvgNodeCommonProps } from './svgNodeCommonProps'; - -type LayoutEvent = $ReadOnly<{| - layout: $ReadOnly<{| - x: Float, - y: Float, - width: Float, - height: Float, - |}>, -|}>; - -type SvgNodeCommonProps = $ReadOnly<{| - name?: string, - opacity?: WithDefault, - matrix?: $ReadOnlyArray, //CGAffineTransform, - // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling - mask?: string, - markerStart?: string, - markerMid?: string, - markerEnd?: string, - clipPath?: string, - clipRule?: WithDefault, - responsible?: boolean, - onLayout?: ?DirectEventHandler, - display?: string, -|}>; - -type ColorStruct = $ReadOnly<{| - type?: WithDefault, - value?: ColorValue, - brushRef?: string, -|}>; - -type SvgRenderableCommonProps = $ReadOnly<{| - fill?: ColorStruct, - fillOpacity?: WithDefault, - fillRule?: WithDefault, - stroke?: ColorStruct, - strokeOpacity?: WithDefault, - strokeWidth?: WithDefault, - strokeLinecap?: WithDefault, - strokeLinejoin?: WithDefault, - strokeDasharray?: $ReadOnlyArray, - strokeDashoffset?: Float, - strokeMiterlimit?: Float, - vectorEffect?: WithDefault, - propList?: $ReadOnlyArray, -|}>; - -type FontObject = $ReadOnly<{| - fontStyle?: string, - fontVariant?: string, - fontWeight?: string, - fontStretch?: string, - fontSize?: string, - fontFamily?: string, - textAnchor?: string, - textDecoration?: string, - letterSpacing?: string, - wordSpacing?: string, - kerning?: string, - fontFeatureSettings?: string, - fontVariantLigatures?: string, - fontVariationSettings?: string, -|}>; - -type SvgGroupCommonProps = $ReadOnly<{| - fontSize?: string, - fontWeight?: string, - font?: FontObject, -|}>; - -type NativeProps = $ReadOnly<{| - ...ViewProps, - ...SvgNodeCommonProps, - ...SvgRenderableCommonProps, - ...SvgGroupCommonProps, -|}>; - -type ComponentType = HostComponent; - -export default (codegenNativeComponent( - 'RNSVGGroup', - {}, -): ComponentType); diff --git a/src/fabric/GroupNativeComponent.ts b/src/fabric/GroupNativeComponent.ts new file mode 100644 index 000000000..302eca3fc --- /dev/null +++ b/src/fabric/GroupNativeComponent.ts @@ -0,0 +1,82 @@ +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import type { + Float, + Int32, + WithDefault, +} from 'react-native/Libraries/Types/CodegenTypes'; + +interface SvgNodeCommonProps { + name?: string; + opacity?: WithDefault; + matrix?: ReadonlyArray; //CGAffineTransform, + // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling + mask?: string; + markerStart?: string; + markerMid?: string; + markerEnd?: string; + clipPath?: string; + clipRule?: WithDefault; + responsible?: boolean; + display?: string; +} + +type ColorStruct = Readonly<{ + type?: WithDefault; + value?: ColorValue; + brushRef?: string; +}>; + +interface SvgRenderableCommonProps { + fill?: ColorStruct; + fillOpacity?: WithDefault; + fillRule?: WithDefault; + stroke?: ColorStruct; + strokeOpacity?: WithDefault; + strokeWidth?: WithDefault; + strokeLinecap?: WithDefault; + strokeLinejoin?: WithDefault; + strokeDasharray?: ReadonlyArray; + strokeDashoffset?: Float; + strokeMiterlimit?: Float; + vectorEffect?: WithDefault; + propList?: ReadonlyArray; +} + +type FontObject = Readonly<{ + fontStyle?: string; + fontVariant?: string; + fontWeight?: string; + fontStretch?: string; + fontSize?: string; + fontFamily?: string; + textAnchor?: string; + textDecoration?: string; + letterSpacing?: string; + wordSpacing?: string; + kerning?: string; + fontFeatureSettings?: string; + fontVariantLigatures?: string; + fontVariationSettings?: string; +}>; + +type SvgGroupCommonProps = Readonly<{ + fontSize?: string; + fontWeight?: string; + font?: FontObject; +}>; + +interface NativeProps + extends ViewProps, + SvgNodeCommonProps, + SvgRenderableCommonProps, + SvgGroupCommonProps {} + +// eslint-disable-next-line @typescript-eslint/ban-types +const codegenNativeComponent = codegenNativeComponentUntyped as ( + name: string, +) => HostComponent; + +export default codegenNativeComponent('RNSVGGroup'); diff --git a/src/fabric/ImageNativeComponent.js b/src/fabric/ImageNativeComponent.js deleted file mode 100644 index 50ef18798..000000000 --- a/src/fabric/ImageNativeComponent.js +++ /dev/null @@ -1,79 +0,0 @@ -/** - * @flow strict-local - * @format - */ -/* eslint-disable */ -import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'; -import type { HostComponent } from 'react-native/Libraries/Renderer/shims/ReactNativeTypes'; -import { ColorValue } from 'react-native/Libraries/StyleSheet/StyleSheet'; -import type { Int32, Double } from 'react-native/Libraries/Types/CodegenTypes'; - -type LayoutEvent = $ReadOnly<{| - layout: $ReadOnly<{| - x: Float, - y: Float, - width: Float, - height: Float, - |}>, -|}>; - -type SvgNodeCommonProps = $ReadOnly<{| - name?: string, - opacity?: WithDefault, - matrix?: $ReadOnlyArray, //CGAffineTransform, - // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling - mask?: string, - markerStart?: string, - markerMid?: string, - markerEnd?: string, - clipPath?: string, - clipRule?: WithDefault, - responsible?: boolean, - onLayout?: ?DirectEventHandler, // not working for now - display?: string, -|}>; - -type ColorStruct = $ReadOnly<{| - type?: WithDefault, - value?: ColorValue, - brushRef?: string, -|}>; - -type SvgRenderableCommonProps = $ReadOnly<{| - fill?: ColorStruct, - fillOpacity?: WithDefault, - fillRule?: WithDefault, - stroke?: ColorStruct, - strokeOpacity?: WithDefault, - strokeWidth?: WithDefault, - strokeLinecap?: WithDefault, - strokeLinejoin?: WithDefault, - strokeDasharray?: $ReadOnlyArray, - strokeDashoffset?: Float, - strokeMiterlimit?: Float, - vectorEffect?: WithDefault, - propList?: $ReadOnlyArray, -|}>; - -type NativeProps = $ReadOnly<{| - ...ViewProps, - ...SvgNodeCommonProps, - ...SvgRenderableCommonProps, - x?: string, - y?: string, - imagewidth?: string, - imageheight?: string, - width?: string, - height?: string, - src?: ImageSource, - align?: string, - meetOrSlice?: Int32, -|}>; - -type ComponentType = HostComponent; - -export default (codegenNativeComponent( - 'RNSVGImage', - {}, -): ComponentType); diff --git a/src/fabric/ImageNativeComponent.ts b/src/fabric/ImageNativeComponent.ts new file mode 100644 index 000000000..276802707 --- /dev/null +++ b/src/fabric/ImageNativeComponent.ts @@ -0,0 +1,70 @@ +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import type { + Float, + Int32, + WithDefault, +} from 'react-native/Libraries/Types/CodegenTypes'; +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import type { ImageSource } from 'react-native/Libraries/Image/ImageSource'; + +interface SvgNodeCommonProps { + name?: string; + opacity?: WithDefault; + matrix?: ReadonlyArray; + // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling + mask?: string; + markerStart?: string; + markerMid?: string; + markerEnd?: string; + clipPath?: string; + clipRule?: WithDefault; + responsible?: boolean; + display?: string; +} + +type ColorStruct = Readonly<{ + type?: WithDefault; + value?: ColorValue; + brushRef?: string; +}>; + +interface SvgRenderableCommonProps { + fill?: ColorStruct; + fillOpacity?: WithDefault; + fillRule?: WithDefault; + stroke?: ColorStruct; + strokeOpacity?: WithDefault; + strokeWidth?: WithDefault; + strokeLinecap?: WithDefault; + strokeLinejoin?: WithDefault; + strokeDasharray?: ReadonlyArray; + strokeDashoffset?: Float; + strokeMiterlimit?: Float; + vectorEffect?: WithDefault; + propList?: ReadonlyArray; +} + +interface NativeProps + extends ViewProps, + SvgNodeCommonProps, + SvgRenderableCommonProps { + x?: string; + y?: string; + imagewidth?: string; + imageheight?: string; + width?: string; + height?: string; + src?: ImageSource; + align?: string; + meetOrSlice?: Int32; +} + +// eslint-disable-next-line @typescript-eslint/ban-types +const codegenNativeComponent = codegenNativeComponentUntyped as ( + name: string, +) => HostComponent; + +export default codegenNativeComponent('RNSVGImage'); diff --git a/src/fabric/LineNativeComponent.js b/src/fabric/LineNativeComponent.js deleted file mode 100644 index 14ea6ab4d..000000000 --- a/src/fabric/LineNativeComponent.js +++ /dev/null @@ -1,74 +0,0 @@ -/** - * @flow strict-local - * @format - */ -/* eslint-disable */ -import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'; -import type { HostComponent } from 'react-native/Libraries/Renderer/shims/ReactNativeTypes'; -import { ColorValue } from 'react-native/Libraries/StyleSheet/StyleSheet'; -import type { Int32, Double } from 'react-native/Libraries/Types/CodegenTypes'; - -type LayoutEvent = $ReadOnly<{| - layout: $ReadOnly<{| - x: Float, - y: Float, - width: Float, - height: Float, - |}>, -|}>; - -type SvgNodeCommonProps = $ReadOnly<{| - name?: string, - opacity?: WithDefault, - matrix?: $ReadOnlyArray, //CGAffineTransform, - // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling - mask?: string, - markerStart?: string, - markerMid?: string, - markerEnd?: string, - clipPath?: string, - clipRule?: WithDefault, - responsible?: boolean, - onLayout?: ?DirectEventHandler, // not working for now - display?: string, -|}>; - -type ColorStruct = $ReadOnly<{| - type?: WithDefault, - value?: ColorValue, - brushRef?: string, -|}>; - -type SvgRenderableCommonProps = $ReadOnly<{| - fill?: ColorStruct, - fillOpacity?: WithDefault, - fillRule?: WithDefault, - stroke?: ColorStruct, - strokeOpacity?: WithDefault, - strokeWidth?: WithDefault, - strokeLinecap?: WithDefault, - strokeLinejoin?: WithDefault, - strokeDasharray?: $ReadOnlyArray, - strokeDashoffset?: Float, - strokeMiterlimit?: Float, - vectorEffect?: WithDefault, - propList?: $ReadOnlyArray, -|}>; - -type NativeProps = $ReadOnly<{| - ...ViewProps, - ...SvgNodeCommonProps, - ...SvgRenderableCommonProps, - x1?: string, - y1?: string, - x2?: string, - y2?: string, -|}>; - -type ComponentType = HostComponent; - -export default (codegenNativeComponent( - 'RNSVGLine', - {}, -): ComponentType); diff --git a/src/fabric/LineNativeComponent.ts b/src/fabric/LineNativeComponent.ts new file mode 100644 index 000000000..ae94f8fe0 --- /dev/null +++ b/src/fabric/LineNativeComponent.ts @@ -0,0 +1,63 @@ +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import type { + Float, + Int32, + WithDefault, +} from 'react-native/Libraries/Types/CodegenTypes'; + +interface SvgNodeCommonProps { + name?: string; + opacity?: WithDefault; + matrix?: ReadonlyArray; //CGAffineTransform, + // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling + mask?: string; + markerStart?: string; + markerMid?: string; + markerEnd?: string; + clipPath?: string; + clipRule?: WithDefault; + responsible?: boolean; + display?: string; +} + +type ColorStruct = Readonly<{ + type?: WithDefault; + value?: ColorValue; + brushRef?: string; +}>; + +interface SvgRenderableCommonProps { + fill?: ColorStruct; + fillOpacity?: WithDefault; + fillRule?: WithDefault; + stroke?: ColorStruct; + strokeOpacity?: WithDefault; + strokeWidth?: WithDefault; + strokeLinecap?: WithDefault; + strokeLinejoin?: WithDefault; + strokeDasharray?: ReadonlyArray; + strokeDashoffset?: Float; + strokeMiterlimit?: Float; + vectorEffect?: WithDefault; + propList?: ReadonlyArray; +} + +interface NativeProps + extends ViewProps, + SvgNodeCommonProps, + SvgRenderableCommonProps { + x1?: string; + y1?: string; + x2?: string; + y2?: string; +} + +// eslint-disable-next-line @typescript-eslint/ban-types +const codegenNativeComponent = codegenNativeComponentUntyped as ( + name: string, +) => HostComponent; + +export default codegenNativeComponent('RNSVGLine'); diff --git a/src/fabric/LinearGradientNativeComponent.js b/src/fabric/LinearGradientNativeComponent.js deleted file mode 100644 index 162c988d0..000000000 --- a/src/fabric/LinearGradientNativeComponent.js +++ /dev/null @@ -1,56 +0,0 @@ -/** - * @flow strict-local - * @format - */ -/* eslint-disable */ -import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'; -import type { HostComponent } from 'react-native/Libraries/Renderer/shims/ReactNativeTypes'; -import { ColorValue } from 'react-native/Libraries/StyleSheet/StyleSheet'; -import type { Int32, Double } from 'react-native/Libraries/Types/CodegenTypes'; - -type LayoutEvent = $ReadOnly<{| - layout: $ReadOnly<{| - x: Float, - y: Float, - width: Float, - height: Float, - |}>, -|}>; - -type SvgNodeCommonProps = $ReadOnly<{| - name?: string, - opacity?: WithDefault, - matrix?: $ReadOnlyArray, //CGAffineTransform, - // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling - mask?: string, - markerStart?: string, - markerMid?: string, - markerEnd?: string, - clipPath?: string, - clipRule?: WithDefault, - responsible?: boolean, - onLayout?: ?DirectEventHandler, // not working for now - display?: string, -|}>; - -type Units = 'userSpaceOnUse' | 'objectBoundingBox'; - -type NativeProps = $ReadOnly<{| - ...ViewProps, - ...SvgNodeCommonProps, - x1?: string, - y1?: string, - x2?: string, - y2?: string, - gradient?: $ReadOnlyArray, - gradientUnits?: Int32, - gradientTransform?: $ReadOnlyArray, //CGAffineTransform, -|}>; - -type ComponentType = HostComponent; - -export default (codegenNativeComponent( - 'RNSVGLinearGradient', - {}, -): ComponentType); diff --git a/src/fabric/LinearGradientNativeComponent.ts b/src/fabric/LinearGradientNativeComponent.ts new file mode 100644 index 000000000..30bbdf570 --- /dev/null +++ b/src/fabric/LinearGradientNativeComponent.ts @@ -0,0 +1,41 @@ +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { HostComponent, ViewProps } from 'react-native'; +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import type { + Float, + Int32, + WithDefault, +} from 'react-native/Libraries/Types/CodegenTypes'; + +interface SvgNodeCommonProps { + name?: string; + opacity?: WithDefault; + matrix?: ReadonlyArray; //CGAffineTransform, + // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling + mask?: string; + markerStart?: string; + markerMid?: string; + markerEnd?: string; + clipPath?: string; + clipRule?: WithDefault; + responsible?: boolean; + display?: string; +} + +interface NativeProps extends ViewProps, SvgNodeCommonProps { + x1?: string; + y1?: string; + x2?: string; + y2?: string; + gradient?: ReadonlyArray; + gradientUnits?: Int32; + gradientTransform?: ReadonlyArray; +} + +// eslint-disable-next-line @typescript-eslint/ban-types +const codegenNativeComponent = codegenNativeComponentUntyped as ( + name: string, +) => HostComponent; + +export default codegenNativeComponent('RNSVGLinearGradient'); diff --git a/src/fabric/MarkerNativeComponent.js b/src/fabric/MarkerNativeComponent.js deleted file mode 100644 index 59c10d7b5..000000000 --- a/src/fabric/MarkerNativeComponent.js +++ /dev/null @@ -1,109 +0,0 @@ -/** - * @flow strict-local - * @format - */ -/* eslint-disable */ -import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { HostComponent } from 'react-native/Libraries/Renderer/shims/ReactNativeTypes'; -import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'; - -import type { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes'; - -// for some reason the parser doesn't allow to put flow types in another file -// import type { SvgNodeCommonProps } from './svgNodeCommonProps'; - -type LayoutEvent = $ReadOnly<{| - layout: $ReadOnly<{| - x: Float, - y: Float, - width: Float, - height: Float, - |}>, -|}>; - -type SvgNodeCommonProps = $ReadOnly<{| - name?: string, - opacity?: WithDefault, - matrix?: $ReadOnlyArray, //CGAffineTransform, - // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling - mask?: string, - markerStart?: string, - markerMid?: string, - markerEnd?: string, - clipPath?: string, - clipRule?: WithDefault, - responsible?: boolean, - onLayout?: ?DirectEventHandler, - display?: string, -|}>; - -type ColorStruct = $ReadOnly<{| - type?: WithDefault, - value?: ColorValue, - brushRef?: string, -|}>; - -type SvgRenderableCommonProps = $ReadOnly<{| - fill?: ColorStruct, - fillOpacity?: WithDefault, - fillRule?: WithDefault, - stroke?: ColorStruct, - strokeOpacity?: WithDefault, - strokeWidth?: WithDefault, - strokeLinecap?: WithDefault, - strokeLinejoin?: WithDefault, - strokeDasharray?: $ReadOnlyArray, - strokeDashoffset?: Float, - strokeMiterlimit?: Float, - vectorEffect?: WithDefault, - propList?: $ReadOnlyArray, -|}>; - -type FontObject = $ReadOnly<{| - fontStyle?: string, - fontVariant?: string, - fontWeight?: string, - fontStretch?: string, - fontSize?: string, - fontFamily?: string, - textAnchor?: string, - textDecoration?: string, - letterSpacing?: string, - wordSpacing?: string, - kerning?: string, - fontFeatureSettings?: string, - fontVariantLigatures?: string, - fontVariationSettings?: string, -|}>; - -type SvgGroupCommonProps = $ReadOnly<{| - fontSize?: string, - fontWeight?: string, - font?: FontObject, -|}>; - -type NativeProps = $ReadOnly<{| - ...ViewProps, - ...SvgNodeCommonProps, - ...SvgRenderableCommonProps, - ...SvgGroupCommonProps, - refX?: string, - refY?: string, - markerHeight?: string, - markerWidth?: string, - markerUnits?: string, - orient?: string, - minX?: Float, - minY?: Float, - vbWidth?: Float, - vbHeight?: Float, - align?: string, - meetOrSlice?: Int32, -|}>; - -type ComponentType = HostComponent; - -export default (codegenNativeComponent( - 'RNSVGMarker', - {}, -): ComponentType); diff --git a/src/fabric/MarkerNativeComponent.ts b/src/fabric/MarkerNativeComponent.ts new file mode 100644 index 000000000..a95244a61 --- /dev/null +++ b/src/fabric/MarkerNativeComponent.ts @@ -0,0 +1,95 @@ +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import type { + Float, + Int32, + WithDefault, +} from 'react-native/Libraries/Types/CodegenTypes'; + +interface SvgNodeCommonProps { + name?: string; + opacity?: WithDefault; + matrix?: ReadonlyArray; //CGAffineTransform, + // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling + mask?: string; + markerStart?: string; + markerMid?: string; + markerEnd?: string; + clipPath?: string; + clipRule?: WithDefault; + responsible?: boolean; + display?: string; +} + +type ColorStruct = Readonly<{ + type?: WithDefault; + value?: ColorValue; + brushRef?: string; +}>; + +interface SvgRenderableCommonProps { + fill?: ColorStruct; + fillOpacity?: WithDefault; + fillRule?: WithDefault; + stroke?: ColorStruct; + strokeOpacity?: WithDefault; + strokeWidth?: WithDefault; + strokeLinecap?: WithDefault; + strokeLinejoin?: WithDefault; + strokeDasharray?: ReadonlyArray; + strokeDashoffset?: Float; + strokeMiterlimit?: Float; + vectorEffect?: WithDefault; + propList?: ReadonlyArray; +} + +type FontObject = Readonly<{ + fontStyle?: string; + fontVariant?: string; + fontWeight?: string; + fontStretch?: string; + fontSize?: string; + fontFamily?: string; + textAnchor?: string; + textDecoration?: string; + letterSpacing?: string; + wordSpacing?: string; + kerning?: string; + fontFeatureSettings?: string; + fontVariantLigatures?: string; + fontVariationSettings?: string; +}>; + +type SvgGroupCommonProps = Readonly<{ + fontSize?: string; + fontWeight?: string; + font?: FontObject; +}>; + +interface NativeProps + extends ViewProps, + SvgNodeCommonProps, + SvgRenderableCommonProps, + SvgGroupCommonProps { + refX?: string; + refY?: string; + markerHeight?: string; + markerWidth?: string; + markerUnits?: string; + orient?: string; + minX?: Float; + minY?: Float; + vbWidth?: Float; + vbHeight?: Float; + align?: string; + meetOrSlice?: Int32; +} + +// eslint-disable-next-line @typescript-eslint/ban-types +const codegenNativeComponent = codegenNativeComponentUntyped as ( + name: string, +) => HostComponent; + +export default codegenNativeComponent('RNSVGMarker'); diff --git a/src/fabric/MaskNativeComponent.js b/src/fabric/MaskNativeComponent.js deleted file mode 100644 index c195a6159..000000000 --- a/src/fabric/MaskNativeComponent.js +++ /dev/null @@ -1,106 +0,0 @@ -/** - * @flow strict-local - * @format - */ -/* eslint-disable */ -import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { HostComponent } from 'react-native/Libraries/Renderer/shims/ReactNativeTypes'; -import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'; - -import type { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes'; - -// for some reason the parser doesn't allow to put flow types in another file -// import type { SvgNodeCommonProps } from './svgNodeCommonProps'; - -type LayoutEvent = $ReadOnly<{| - layout: $ReadOnly<{| - x: Float, - y: Float, - width: Float, - height: Float, - |}>, -|}>; - -type SvgNodeCommonProps = $ReadOnly<{| - name?: string, - opacity?: WithDefault, - matrix?: $ReadOnlyArray, //CGAffineTransform, - // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling - mask?: string, - markerStart?: string, - markerMid?: string, - markerEnd?: string, - clipPath?: string, - clipRule?: WithDefault, - responsible?: boolean, - onLayout?: ?DirectEventHandler, - display?: string, -|}>; - -type ColorStruct = $ReadOnly<{| - type?: WithDefault, - value?: ColorValue, - brushRef?: string, -|}>; - -type SvgRenderableCommonProps = $ReadOnly<{| - fill?: ColorStruct, - fillOpacity?: WithDefault, - fillRule?: WithDefault, - stroke?: ColorStruct, - strokeOpacity?: WithDefault, - strokeWidth?: WithDefault, - strokeLinecap?: WithDefault, - strokeLinejoin?: WithDefault, - strokeDasharray?: $ReadOnlyArray, - strokeDashoffset?: Float, - strokeMiterlimit?: Float, - vectorEffect?: WithDefault, - propList?: $ReadOnlyArray, -|}>; - -type FontObject = $ReadOnly<{| - fontStyle?: string, - fontVariant?: string, - fontWeight?: string, - fontStretch?: string, - fontSize?: string, - fontFamily?: string, - textAnchor?: string, - textDecoration?: string, - letterSpacing?: string, - wordSpacing?: string, - kerning?: string, - fontFeatureSettings?: string, - fontVariantLigatures?: string, - fontVariationSettings?: string, -|}>; - -type SvgGroupCommonProps = $ReadOnly<{| - fontSize?: string, - fontWeight?: string, - font?: FontObject, -|}>; - -type NativeProps = $ReadOnly<{| - ...ViewProps, - ...SvgNodeCommonProps, - ...SvgRenderableCommonProps, - ...SvgGroupCommonProps, - x?: string, - y?: string, - maskheight?: string, - maskwidth?: string, - height?: string, - width?: string, - maskUnits?: Int32, - maskContentUnits?: Int32, - maskTransform?: $ReadOnlyArray, //CGAffineTransform, -|}>; - -type ComponentType = HostComponent; - -export default (codegenNativeComponent( - 'RNSVGMask', - {}, -): ComponentType); diff --git a/src/fabric/MaskNativeComponent.ts b/src/fabric/MaskNativeComponent.ts new file mode 100644 index 000000000..000eebee0 --- /dev/null +++ b/src/fabric/MaskNativeComponent.ts @@ -0,0 +1,92 @@ +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import type { + Float, + Int32, + WithDefault, +} from 'react-native/Libraries/Types/CodegenTypes'; + +interface SvgNodeCommonProps { + name?: string; + opacity?: WithDefault; + matrix?: ReadonlyArray; //CGAffineTransform, + // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling + mask?: string; + markerStart?: string; + markerMid?: string; + markerEnd?: string; + clipPath?: string; + clipRule?: WithDefault; + responsible?: boolean; + display?: string; +} + +type ColorStruct = Readonly<{ + type?: WithDefault; + value?: ColorValue; + brushRef?: string; +}>; + +interface SvgRenderableCommonProps { + fill?: ColorStruct; + fillOpacity?: WithDefault; + fillRule?: WithDefault; + stroke?: ColorStruct; + strokeOpacity?: WithDefault; + strokeWidth?: WithDefault; + strokeLinecap?: WithDefault; + strokeLinejoin?: WithDefault; + strokeDasharray?: ReadonlyArray; + strokeDashoffset?: Float; + strokeMiterlimit?: Float; + vectorEffect?: WithDefault; + propList?: ReadonlyArray; +} + +type FontObject = Readonly<{ + fontStyle?: string; + fontVariant?: string; + fontWeight?: string; + fontStretch?: string; + fontSize?: string; + fontFamily?: string; + textAnchor?: string; + textDecoration?: string; + letterSpacing?: string; + wordSpacing?: string; + kerning?: string; + fontFeatureSettings?: string; + fontVariantLigatures?: string; + fontVariationSettings?: string; +}>; + +type SvgGroupCommonProps = Readonly<{ + fontSize?: string; + fontWeight?: string; + font?: FontObject; +}>; + +interface NativeProps + extends ViewProps, + SvgNodeCommonProps, + SvgRenderableCommonProps, + SvgGroupCommonProps { + x?: string; + y?: string; + maskheight?: string; + maskwidth?: string; + height?: string; + width?: string; + maskUnits?: Int32; + maskContentUnits?: Int32; + maskTransform?: ReadonlyArray; //CGAffineTransform, +} + +// eslint-disable-next-line @typescript-eslint/ban-types +const codegenNativeComponent = codegenNativeComponentUntyped as ( + name: string, +) => HostComponent; + +export default codegenNativeComponent('RNSVGMask'); diff --git a/src/fabric/PathNativeComponent.js b/src/fabric/PathNativeComponent.js deleted file mode 100644 index 676744d76..000000000 --- a/src/fabric/PathNativeComponent.js +++ /dev/null @@ -1,71 +0,0 @@ -/** - * @flow strict-local - * @format - */ -/* eslint-disable */ -import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'; -import type { HostComponent } from 'react-native/Libraries/Renderer/shims/ReactNativeTypes'; -import { ColorValue } from 'react-native/Libraries/StyleSheet/StyleSheet'; -import type { Int32, Double } from 'react-native/Libraries/Types/CodegenTypes'; - -type LayoutEvent = $ReadOnly<{| - layout: $ReadOnly<{| - x: Float, - y: Float, - width: Float, - height: Float, - |}>, -|}>; - -type SvgNodeCommonProps = $ReadOnly<{| - name?: string, - opacity?: WithDefault, - matrix?: $ReadOnlyArray, //CGAffineTransform, - // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling - mask?: string, - markerStart?: string, - markerMid?: string, - markerEnd?: string, - clipPath?: string, - clipRule?: WithDefault, - responsible?: boolean, - onLayout?: ?DirectEventHandler, // not working for now - display?: string, -|}>; - -type ColorStruct = $ReadOnly<{| - type?: WithDefault, - value?: ColorValue, - brushRef?: string, -|}>; - -type SvgRenderableCommonProps = $ReadOnly<{| - fill?: ColorStruct, - fillOpacity?: WithDefault, - fillRule?: WithDefault, - stroke?: ColorStruct, - strokeOpacity?: WithDefault, - strokeWidth?: WithDefault, - strokeLinecap?: WithDefault, - strokeLinejoin?: WithDefault, - strokeDasharray?: $ReadOnlyArray, - strokeDashoffset?: Float, - strokeMiterlimit?: Float, - vectorEffect?: WithDefault, - propList?: $ReadOnlyArray, -|}>; - -type NativeProps = $ReadOnly<{| - ...ViewProps, - ...SvgNodeCommonProps, - ...SvgRenderableCommonProps, - d?: string, -|}>; - -type ComponentType = HostComponent; - -export default (codegenNativeComponent( - 'RNSVGPath', - {}, -): ComponentType); diff --git a/src/fabric/PathNativeComponent.ts b/src/fabric/PathNativeComponent.ts new file mode 100644 index 000000000..ccc722135 --- /dev/null +++ b/src/fabric/PathNativeComponent.ts @@ -0,0 +1,60 @@ +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import type { + Float, + Int32, + WithDefault, +} from 'react-native/Libraries/Types/CodegenTypes'; + +interface SvgNodeCommonProps { + name?: string; + opacity?: WithDefault; + matrix?: ReadonlyArray; //CGAffineTransform, + // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling + mask?: string; + markerStart?: string; + markerMid?: string; + markerEnd?: string; + clipPath?: string; + clipRule?: WithDefault; + responsible?: boolean; + display?: string; +} + +type ColorStruct = Readonly<{ + type?: WithDefault; + value?: ColorValue; + brushRef?: string; +}>; + +interface SvgRenderableCommonProps { + fill?: ColorStruct; + fillOpacity?: WithDefault; + fillRule?: WithDefault; + stroke?: ColorStruct; + strokeOpacity?: WithDefault; + strokeWidth?: WithDefault; + strokeLinecap?: WithDefault; + strokeLinejoin?: WithDefault; + strokeDasharray?: ReadonlyArray; + strokeDashoffset?: Float; + strokeMiterlimit?: Float; + vectorEffect?: WithDefault; + propList?: ReadonlyArray; +} + +interface NativeProps + extends ViewProps, + SvgNodeCommonProps, + SvgRenderableCommonProps { + d?: string; +} + +// eslint-disable-next-line @typescript-eslint/ban-types +const codegenNativeComponent = codegenNativeComponentUntyped as ( + name: string, +) => HostComponent; + +export default codegenNativeComponent('RNSVGPath'); diff --git a/src/fabric/PatternNativeComponent.js b/src/fabric/PatternNativeComponent.js deleted file mode 100644 index 8fb14f7a9..000000000 --- a/src/fabric/PatternNativeComponent.js +++ /dev/null @@ -1,112 +0,0 @@ -/** - * @flow strict-local - * @format - */ -/* eslint-disable */ -import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { HostComponent } from 'react-native/Libraries/Renderer/shims/ReactNativeTypes'; -import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'; - -import type { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes'; - -// for some reason the parser doesn't allow to put flow types in another file -// import type { SvgNodeCommonProps } from './svgNodeCommonProps'; - -type LayoutEvent = $ReadOnly<{| - layout: $ReadOnly<{| - x: Float, - y: Float, - width: Float, - height: Float, - |}>, -|}>; - -type SvgNodeCommonProps = $ReadOnly<{| - name?: string, - opacity?: WithDefault, - matrix?: $ReadOnlyArray, //CGAffineTransform, - // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling - mask?: string, - markerStart?: string, - markerMid?: string, - markerEnd?: string, - clipPath?: string, - clipRule?: WithDefault, - responsible?: boolean, - onLayout?: ?DirectEventHandler, - display?: string, -|}>; - -type ColorStruct = $ReadOnly<{| - type?: WithDefault, - value?: ColorValue, - brushRef?: string, -|}>; - -type SvgRenderableCommonProps = $ReadOnly<{| - fill?: ColorStruct, - fillOpacity?: WithDefault, - fillRule?: WithDefault, - stroke?: ColorStruct, - strokeOpacity?: WithDefault, - strokeWidth?: WithDefault, - strokeLinecap?: WithDefault, - strokeLinejoin?: WithDefault, - strokeDasharray?: $ReadOnlyArray, - strokeDashoffset?: Float, - strokeMiterlimit?: Float, - vectorEffect?: WithDefault, - propList?: $ReadOnlyArray, -|}>; - -type FontObject = $ReadOnly<{| - fontStyle?: string, - fontVariant?: string, - fontWeight?: string, - fontStretch?: string, - fontSize?: string, - fontFamily?: string, - textAnchor?: string, - textDecoration?: string, - letterSpacing?: string, - wordSpacing?: string, - kerning?: string, - fontFeatureSettings?: string, - fontVariantLigatures?: string, - fontVariationSettings?: string, -|}>; - -type SvgGroupCommonProps = $ReadOnly<{| - fontSize?: string, - fontWeight?: string, - font?: FontObject, -|}>; - -type NativeProps = $ReadOnly<{| - ...ViewProps, - ...SvgNodeCommonProps, - ...SvgRenderableCommonProps, - ...SvgGroupCommonProps, - x?: string, - y?: string, - patternheight?: string, - patternwidth?: string, - height?: string, - width?: string, - patternUnits?: Int32, - patternContentUnits?: Int32, - patternTransform?: $ReadOnlyArray, //CGAffineTransform, - minX?: Float, - minY?: Float, - vbWidth?: Float, - vbHeight?: Float, - align?: string, - meetOrSlice?: Int32, -|}>; - -type ComponentType = HostComponent; - -export default (codegenNativeComponent( - 'RNSVGPattern', - {}, -): ComponentType); diff --git a/src/fabric/PatternNativeComponent.ts b/src/fabric/PatternNativeComponent.ts new file mode 100644 index 000000000..fc5dca201 --- /dev/null +++ b/src/fabric/PatternNativeComponent.ts @@ -0,0 +1,98 @@ +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import type { + Float, + Int32, + WithDefault, +} from 'react-native/Libraries/Types/CodegenTypes'; + +interface SvgNodeCommonProps { + name?: string; + opacity?: WithDefault; + matrix?: ReadonlyArray; //CGAffineTransform, + // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling + mask?: string; + markerStart?: string; + markerMid?: string; + markerEnd?: string; + clipPath?: string; + clipRule?: WithDefault; + responsible?: boolean; + display?: string; +} + +type ColorStruct = Readonly<{ + type?: WithDefault; + value?: ColorValue; + brushRef?: string; +}>; + +interface SvgRenderableCommonProps { + fill?: ColorStruct; + fillOpacity?: WithDefault; + fillRule?: WithDefault; + stroke?: ColorStruct; + strokeOpacity?: WithDefault; + strokeWidth?: WithDefault; + strokeLinecap?: WithDefault; + strokeLinejoin?: WithDefault; + strokeDasharray?: ReadonlyArray; + strokeDashoffset?: Float; + strokeMiterlimit?: Float; + vectorEffect?: WithDefault; + propList?: ReadonlyArray; +} + +type FontObject = Readonly<{ + fontStyle?: string; + fontVariant?: string; + fontWeight?: string; + fontStretch?: string; + fontSize?: string; + fontFamily?: string; + textAnchor?: string; + textDecoration?: string; + letterSpacing?: string; + wordSpacing?: string; + kerning?: string; + fontFeatureSettings?: string; + fontVariantLigatures?: string; + fontVariationSettings?: string; +}>; + +type SvgGroupCommonProps = Readonly<{ + fontSize?: string; + fontWeight?: string; + font?: FontObject; +}>; + +interface NativeProps + extends ViewProps, + SvgNodeCommonProps, + SvgRenderableCommonProps, + SvgGroupCommonProps { + x?: string; + y?: string; + patternheight?: string; + patternwidth?: string; + height?: string; + width?: string; + patternUnits?: Int32; + patternContentUnits?: Int32; + patternTransform?: ReadonlyArray; //CGAffineTransform, + minX?: Float; + minY?: Float; + vbWidth?: Float; + vbHeight?: Float; + align?: string; + meetOrSlice?: Int32; +} + +// eslint-disable-next-line @typescript-eslint/ban-types +const codegenNativeComponent = codegenNativeComponentUntyped as ( + name: string, +) => HostComponent; + +export default codegenNativeComponent('RNSVGPattern'); diff --git a/src/fabric/RadialGradientNativeComponent.js b/src/fabric/RadialGradientNativeComponent.js deleted file mode 100644 index 29f2ce454..000000000 --- a/src/fabric/RadialGradientNativeComponent.js +++ /dev/null @@ -1,58 +0,0 @@ -/** - * @flow strict-local - * @format - */ -/* eslint-disable */ -import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'; -import type { HostComponent } from 'react-native/Libraries/Renderer/shims/ReactNativeTypes'; -import { ColorValue } from 'react-native/Libraries/StyleSheet/StyleSheet'; -import type { Int32, Double } from 'react-native/Libraries/Types/CodegenTypes'; - -type LayoutEvent = $ReadOnly<{| - layout: $ReadOnly<{| - x: Float, - y: Float, - width: Float, - height: Float, - |}>, -|}>; - -type SvgNodeCommonProps = $ReadOnly<{| - name?: string, - opacity?: WithDefault, - matrix?: $ReadOnlyArray, //CGAffineTransform, - // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling - mask?: string, - markerStart?: string, - markerMid?: string, - markerEnd?: string, - clipPath?: string, - clipRule?: WithDefault, - responsible?: boolean, - onLayout?: ?DirectEventHandler, // not working for now - display?: string, -|}>; - -type Units = 'userSpaceOnUse' | 'objectBoundingBox'; - -type NativeProps = $ReadOnly<{| - ...ViewProps, - ...SvgNodeCommonProps, - fx?: string, - fy?: string, - cx?: string, - cy?: string, - rx?: string, - ry?: string, - gradient?: $ReadOnlyArray, - gradientUnits?: Int32, - gradientTransform?: $ReadOnlyArray, //CGAffineTransform, -|}>; - -type ComponentType = HostComponent; - -export default (codegenNativeComponent( - 'RNSVGRadialGradient', - {}, -): ComponentType); diff --git a/src/fabric/RadialGradientNativeComponent.ts b/src/fabric/RadialGradientNativeComponent.ts new file mode 100644 index 000000000..f5e60c915 --- /dev/null +++ b/src/fabric/RadialGradientNativeComponent.ts @@ -0,0 +1,43 @@ +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { HostComponent, ViewProps } from 'react-native'; +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import type { + Float, + Int32, + WithDefault, +} from 'react-native/Libraries/Types/CodegenTypes'; + +interface SvgNodeCommonProps { + name?: string; + opacity?: WithDefault; + matrix?: ReadonlyArray; //CGAffineTransform, + // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling + mask?: string; + markerStart?: string; + markerMid?: string; + markerEnd?: string; + clipPath?: string; + clipRule?: WithDefault; + responsible?: boolean; + display?: string; +} + +interface NativeProps extends ViewProps, SvgNodeCommonProps { + fx?: string; + fy?: string; + cx?: string; + cy?: string; + rx?: string; + ry?: string; + gradient?: ReadonlyArray; + gradientUnits?: Int32; + gradientTransform?: ReadonlyArray; //CGAffineTransform, +} + +// eslint-disable-next-line @typescript-eslint/ban-types +const codegenNativeComponent = codegenNativeComponentUntyped as ( + name: string, +) => HostComponent; + +export default codegenNativeComponent('RNSVGRadialGradient'); diff --git a/src/fabric/RectNativeComponent.js b/src/fabric/RectNativeComponent.js deleted file mode 100644 index 8193c805a..000000000 --- a/src/fabric/RectNativeComponent.js +++ /dev/null @@ -1,78 +0,0 @@ -/** - * @flow strict-local - * @format - */ -/* eslint-disable */ -import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'; -import type { HostComponent } from 'react-native/Libraries/Renderer/shims/ReactNativeTypes'; -import { ColorValue } from 'react-native/Libraries/StyleSheet/StyleSheet'; -import type { Int32, Double } from 'react-native/Libraries/Types/CodegenTypes'; - -type LayoutEvent = $ReadOnly<{| - layout: $ReadOnly<{| - x: Float, - y: Float, - width: Float, - height: Float, - |}>, -|}>; - -type SvgNodeCommonProps = $ReadOnly<{| - name?: string, - opacity?: WithDefault, - matrix?: $ReadOnlyArray, //CGAffineTransform, - // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling - mask?: string, - markerStart?: string, - markerMid?: string, - markerEnd?: string, - clipPath?: string, - clipRule?: WithDefault, - responsible?: boolean, - onLayout?: ?DirectEventHandler, // not working for now - display?: string, -|}>; - -type ColorStruct = $ReadOnly<{| - type?: WithDefault, - value?: ColorValue, - brushRef?: string, -|}>; - -type SvgRenderableCommonProps = $ReadOnly<{| - fill?: ColorStruct, - fillOpacity?: WithDefault, - fillRule?: WithDefault, - stroke?: ColorStruct, - strokeOpacity?: WithDefault, - strokeWidth?: WithDefault, - strokeLinecap?: WithDefault, - strokeLinejoin?: WithDefault, - strokeDasharray?: $ReadOnlyArray, - strokeDashoffset?: Float, - strokeMiterlimit?: Float, - vectorEffect?: WithDefault, - propList?: $ReadOnlyArray, -|}>; - -type NativeProps = $ReadOnly<{| - ...ViewProps, - ...SvgNodeCommonProps, - ...SvgRenderableCommonProps, - x?: string, - y?: string, - rectheight?: string, - rectwidth?: string, - height?: string, - width?: string, - rx?: string, - ry?: string, -|}>; - -type ComponentType = HostComponent; - -export default (codegenNativeComponent( - 'RNSVGRect', - {}, -): ComponentType); diff --git a/src/fabric/RectNativeComponent.ts b/src/fabric/RectNativeComponent.ts new file mode 100644 index 000000000..c8046bd5b --- /dev/null +++ b/src/fabric/RectNativeComponent.ts @@ -0,0 +1,67 @@ +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import type { + Float, + Int32, + WithDefault, +} from 'react-native/Libraries/Types/CodegenTypes'; + +interface SvgNodeCommonProps { + name?: string; + opacity?: WithDefault; + matrix?: ReadonlyArray; //CGAffineTransform, + // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling + mask?: string; + markerStart?: string; + markerMid?: string; + markerEnd?: string; + clipPath?: string; + clipRule?: WithDefault; + responsible?: boolean; + display?: string; +} + +type ColorStruct = Readonly<{ + type?: WithDefault; + value?: ColorValue; + brushRef?: string; +}>; + +interface SvgRenderableCommonProps { + fill?: ColorStruct; + fillOpacity?: WithDefault; + fillRule?: WithDefault; + stroke?: ColorStruct; + strokeOpacity?: WithDefault; + strokeWidth?: WithDefault; + strokeLinecap?: WithDefault; + strokeLinejoin?: WithDefault; + strokeDasharray?: ReadonlyArray; + strokeDashoffset?: Float; + strokeMiterlimit?: Float; + vectorEffect?: WithDefault; + propList?: ReadonlyArray; +} + +interface NativeProps + extends ViewProps, + SvgNodeCommonProps, + SvgRenderableCommonProps { + x?: string; + y?: string; + rectheight?: string; + rectwidth?: string; + height?: string; + width?: string; + rx?: string; + ry?: string; +} + +// eslint-disable-next-line @typescript-eslint/ban-types +const codegenNativeComponent = codegenNativeComponentUntyped as ( + name: string, +) => HostComponent; + +export default codegenNativeComponent('RNSVGRect'); diff --git a/src/fabric/SvgViewNativeComponent.js b/src/fabric/SvgViewNativeComponent.js deleted file mode 100644 index 6404bdbe3..000000000 --- a/src/fabric/SvgViewNativeComponent.js +++ /dev/null @@ -1,25 +0,0 @@ -/** - * @flow strict-local - * @format - */ -/* eslint-disable */ -import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; - -type NativeProps = $ReadOnly<{| - ...ViewProps, - bbWidth: string, - bbHeight: string, - minX: Float, - minY: Float, - vbWidth: Float, - vbHeight: Float, - align: string, - meetOrSlice: Int32, - tintColor: ColorValue, - color: ColorValue, -|}>; - -export default (codegenNativeComponent( - 'RNSVGSvgView', - {}, -): ComponentType); diff --git a/src/fabric/SvgViewNativeComponent.ts b/src/fabric/SvgViewNativeComponent.ts new file mode 100644 index 000000000..13c63823d --- /dev/null +++ b/src/fabric/SvgViewNativeComponent.ts @@ -0,0 +1,25 @@ +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import type { Float, Int32 } from 'react-native/Libraries/Types/CodegenTypes'; + +interface NativeProps extends ViewProps { + bbWidth: string; + bbHeight: string; + minX: Float; + minY: Float; + vbWidth: Float; + vbHeight: Float; + align: string; + meetOrSlice: Int32; + tintColor: ColorValue; + color: ColorValue; +} + +// eslint-disable-next-line @typescript-eslint/ban-types +const codegenNativeComponent = codegenNativeComponentUntyped as ( + name: string, +) => HostComponent; + +export default codegenNativeComponent('RNSVGSvgView'); diff --git a/src/fabric/SymbolNativeComponent.js b/src/fabric/SymbolNativeComponent.js deleted file mode 100644 index 5747a5fc1..000000000 --- a/src/fabric/SymbolNativeComponent.js +++ /dev/null @@ -1,103 +0,0 @@ -/** - * @flow strict-local - * @format - */ -/* eslint-disable */ -import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { HostComponent } from 'react-native/Libraries/Renderer/shims/ReactNativeTypes'; -import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'; - -import type { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes'; - -// for some reason the parser doesn't allow to put flow types in another file -// import type { SvgNodeCommonProps } from './svgNodeCommonProps'; - -type LayoutEvent = $ReadOnly<{| - layout: $ReadOnly<{| - x: Float, - y: Float, - width: Float, - height: Float, - |}>, -|}>; - -type SvgNodeCommonProps = $ReadOnly<{| - name?: string, - opacity?: WithDefault, - matrix?: $ReadOnlyArray, //CGAffineTransform, - // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling - mask?: string, - markerStart?: string, - markerMid?: string, - markerEnd?: string, - clipPath?: string, - clipRule?: WithDefault, - responsible?: boolean, - onLayout?: ?DirectEventHandler, - display?: string, -|}>; - -type ColorStruct = $ReadOnly<{| - type?: WithDefault, - value?: ColorValue, - brushRef?: string, -|}>; - -type SvgRenderableCommonProps = $ReadOnly<{| - fill?: ColorStruct, - fillOpacity?: WithDefault, - fillRule?: WithDefault, - stroke?: ColorStruct, - strokeOpacity?: WithDefault, - strokeWidth?: WithDefault, - strokeLinecap?: WithDefault, - strokeLinejoin?: WithDefault, - strokeDasharray?: $ReadOnlyArray, - strokeDashoffset?: Float, - strokeMiterlimit?: Float, - vectorEffect?: WithDefault, - propList?: $ReadOnlyArray, -|}>; - -type FontObject = $ReadOnly<{| - fontStyle?: string, - fontVariant?: string, - fontWeight?: string, - fontStretch?: string, - fontSize?: string, - fontFamily?: string, - textAnchor?: string, - textDecoration?: string, - letterSpacing?: string, - wordSpacing?: string, - kerning?: string, - fontFeatureSettings?: string, - fontVariantLigatures?: string, - fontVariationSettings?: string, -|}>; - -type SvgGroupCommonProps = $ReadOnly<{| - fontSize?: string, - fontWeight?: string, - font?: FontObject, -|}>; - -type NativeProps = $ReadOnly<{| - ...ViewProps, - ...SvgNodeCommonProps, - ...SvgRenderableCommonProps, - ...SvgGroupCommonProps, - minX?: Float, - minY?: Float, - vbWidth?: Float, - vbHeight?: Float, - align?: string, - meetOrSlice?: Int32, -|}>; - -type ComponentType = HostComponent; - -export default (codegenNativeComponent( - 'RNSVGSymbol', - {}, -): ComponentType); diff --git a/src/fabric/SymbolNativeComponent.ts b/src/fabric/SymbolNativeComponent.ts new file mode 100644 index 000000000..21724ab6d --- /dev/null +++ b/src/fabric/SymbolNativeComponent.ts @@ -0,0 +1,89 @@ +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import type { + Float, + Int32, + WithDefault, +} from 'react-native/Libraries/Types/CodegenTypes'; + +interface SvgNodeCommonProps { + name?: string; + opacity?: WithDefault; + matrix?: ReadonlyArray; //CGAffineTransform, + // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling + mask?: string; + markerStart?: string; + markerMid?: string; + markerEnd?: string; + clipPath?: string; + clipRule?: WithDefault; + responsible?: boolean; + display?: string; +} + +type ColorStruct = Readonly<{ + type?: WithDefault; + value?: ColorValue; + brushRef?: string; +}>; + +interface SvgRenderableCommonProps { + fill?: ColorStruct; + fillOpacity?: WithDefault; + fillRule?: WithDefault; + stroke?: ColorStruct; + strokeOpacity?: WithDefault; + strokeWidth?: WithDefault; + strokeLinecap?: WithDefault; + strokeLinejoin?: WithDefault; + strokeDasharray?: ReadonlyArray; + strokeDashoffset?: Float; + strokeMiterlimit?: Float; + vectorEffect?: WithDefault; + propList?: ReadonlyArray; +} + +type FontObject = Readonly<{ + fontStyle?: string; + fontVariant?: string; + fontWeight?: string; + fontStretch?: string; + fontSize?: string; + fontFamily?: string; + textAnchor?: string; + textDecoration?: string; + letterSpacing?: string; + wordSpacing?: string; + kerning?: string; + fontFeatureSettings?: string; + fontVariantLigatures?: string; + fontVariationSettings?: string; +}>; + +type SvgGroupCommonProps = Readonly<{ + fontSize?: string; + fontWeight?: string; + font?: FontObject; +}>; + +interface NativeProps + extends ViewProps, + SvgNodeCommonProps, + SvgRenderableCommonProps, + SvgGroupCommonProps { + minX?: Float; + minY?: Float; + vbWidth?: Float; + vbHeight?: Float; + align?: string; + meetOrSlice?: Int32; +} + +// eslint-disable-next-line @typescript-eslint/ban-types +const codegenNativeComponent = codegenNativeComponentUntyped as ( + name: string, +) => HostComponent; + +export default codegenNativeComponent('RNSVGSymbol'); diff --git a/src/fabric/TSpanNativeComponent.js b/src/fabric/TSpanNativeComponent.js deleted file mode 100644 index a2b22c0ba..000000000 --- a/src/fabric/TSpanNativeComponent.js +++ /dev/null @@ -1,108 +0,0 @@ -/** - * @flow strict-local - * @format - */ -/* eslint-disable */ -import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'; -import type { HostComponent } from 'react-native/Libraries/Renderer/shims/ReactNativeTypes'; -import { ColorValue } from 'react-native/Libraries/StyleSheet/StyleSheet'; -import type { Int32, Double } from 'react-native/Libraries/Types/CodegenTypes'; - -type LayoutEvent = $ReadOnly<{| - layout: $ReadOnly<{| - x: Float, - y: Float, - width: Float, - height: Float, - |}>, -|}>; - -type SvgNodeCommonProps = $ReadOnly<{| - name?: string, - opacity?: WithDefault, - matrix?: $ReadOnlyArray, //CGAffineTransform, - // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling - mask?: string, - markerStart?: string, - markerMid?: string, - markerEnd?: string, - clipPath?: string, - clipRule?: WithDefault, - responsible?: boolean, - onLayout?: ?DirectEventHandler, // not working for now - display?: string, -|}>; - -type ColorStruct = $ReadOnly<{| - type?: WithDefault, - value?: ColorValue, - brushRef?: string, -|}>; - -type SvgRenderableCommonProps = $ReadOnly<{| - fill?: ColorStruct, - fillOpacity?: WithDefault, - fillRule?: WithDefault, - stroke?: ColorStruct, - strokeOpacity?: WithDefault, - strokeWidth?: WithDefault, - strokeLinecap?: WithDefault, - strokeLinejoin?: WithDefault, - strokeDasharray?: $ReadOnlyArray, - strokeDashoffset?: Float, - strokeMiterlimit?: Float, - vectorEffect?: WithDefault, - propList?: $ReadOnlyArray, -|}>; - -type FontObject = $ReadOnly<{| - fontStyle?: string, - fontVariant?: string, - fontWeight?: string, - fontStretch?: string, - fontSize?: string, - fontFamily?: string, - textAnchor?: string, - textDecoration?: string, - letterSpacing?: string, - wordSpacing?: string, - kerning?: string, - fontFeatureSettings?: string, - fontVariantLigatures?: string, - fontVariationSettings?: string, -|}>; - -type SvgGroupCommonProps = $ReadOnly<{| - fontSize?: string, - fontWeight?: string, - font?: FontObject, -|}>; - -type NativeProps = $ReadOnly<{| - ...ViewProps, - ...SvgNodeCommonProps, - ...SvgRenderableCommonProps, - ...SvgGroupCommonProps, - textAnchor?: string, - dx?: $ReadOnlyArray, - dy?: $ReadOnlyArray, - positionX?: $ReadOnlyArray, - positionY?: $ReadOnlyArray, - x?: $ReadOnlyArray, - y?: $ReadOnlyArray, - rotate?: $ReadOnlyArray, - inlineSize?: string, - textLength?: string, - baselineShift?: string, - lengthAdjust?: string, - alignmentBaseline?: string, - content?: string, -|}>; - -type ComponentType = HostComponent; - -export default (codegenNativeComponent( - 'RNSVGTSpan', - {}, -): ComponentType); diff --git a/src/fabric/TSpanNativeComponent.ts b/src/fabric/TSpanNativeComponent.ts new file mode 100644 index 000000000..1d31e36da --- /dev/null +++ b/src/fabric/TSpanNativeComponent.ts @@ -0,0 +1,97 @@ +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import type { + Float, + Int32, + WithDefault, +} from 'react-native/Libraries/Types/CodegenTypes'; + +interface SvgNodeCommonProps { + name?: string; + opacity?: WithDefault; + matrix?: ReadonlyArray; //CGAffineTransform, + // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling + mask?: string; + markerStart?: string; + markerMid?: string; + markerEnd?: string; + clipPath?: string; + clipRule?: WithDefault; + responsible?: boolean; + display?: string; +} + +type ColorStruct = Readonly<{ + type?: WithDefault; + value?: ColorValue; + brushRef?: string; +}>; + +interface SvgRenderableCommonProps { + fill?: ColorStruct; + fillOpacity?: WithDefault; + fillRule?: WithDefault; + stroke?: ColorStruct; + strokeOpacity?: WithDefault; + strokeWidth?: WithDefault; + strokeLinecap?: WithDefault; + strokeLinejoin?: WithDefault; + strokeDasharray?: ReadonlyArray; + strokeDashoffset?: Float; + strokeMiterlimit?: Float; + vectorEffect?: WithDefault; + propList?: ReadonlyArray; +} + +type FontObject = Readonly<{ + fontStyle?: string; + fontVariant?: string; + fontWeight?: string; + fontStretch?: string; + fontSize?: string; + fontFamily?: string; + textAnchor?: string; + textDecoration?: string; + letterSpacing?: string; + wordSpacing?: string; + kerning?: string; + fontFeatureSettings?: string; + fontVariantLigatures?: string; + fontVariationSettings?: string; +}>; + +type SvgGroupCommonProps = Readonly<{ + fontSize?: string; + fontWeight?: string; + font?: FontObject; +}>; + +interface NativeProps + extends ViewProps, + SvgNodeCommonProps, + SvgRenderableCommonProps, + SvgGroupCommonProps { + textAnchor?: string; + dx?: ReadonlyArray; + dy?: ReadonlyArray; + positionX?: ReadonlyArray; + positionY?: ReadonlyArray; + x?: ReadonlyArray; + y?: ReadonlyArray; + rotate?: ReadonlyArray; + inlineSize?: string; + textLength?: string; + baselineShift?: string; + lengthAdjust?: string; + alignmentBaseline?: string; + content?: string; +} + +// eslint-disable-next-line @typescript-eslint/ban-types +const codegenNativeComponent = codegenNativeComponentUntyped as ( + name: string, +) => HostComponent; + +export default codegenNativeComponent('RNSVGTSpan'); diff --git a/src/fabric/TextNativeComponent.js b/src/fabric/TextNativeComponent.js deleted file mode 100644 index fa2b2d3ef..000000000 --- a/src/fabric/TextNativeComponent.js +++ /dev/null @@ -1,107 +0,0 @@ -/** - * @flow strict-local - * @format - */ -/* eslint-disable */ -import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'; -import type { HostComponent } from 'react-native/Libraries/Renderer/shims/ReactNativeTypes'; -import { ColorValue } from 'react-native/Libraries/StyleSheet/StyleSheet'; -import type { Int32, Double } from 'react-native/Libraries/Types/CodegenTypes'; - -type LayoutEvent = $ReadOnly<{| - layout: $ReadOnly<{| - x: Float, - y: Float, - width: Float, - height: Float, - |}>, -|}>; - -type SvgNodeCommonProps = $ReadOnly<{| - name?: string, - opacity?: WithDefault, - matrix?: $ReadOnlyArray, //CGAffineTransform, - // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling - mask?: string, - markerStart?: string, - markerMid?: string, - markerEnd?: string, - clipPath?: string, - clipRule?: WithDefault, - responsible?: boolean, - onLayout?: ?DirectEventHandler, // not working for now - display?: string, -|}>; - -type ColorStruct = $ReadOnly<{| - type?: WithDefault, - value?: ColorValue, - brushRef?: string, -|}>; - -type SvgRenderableCommonProps = $ReadOnly<{| - fill?: ColorStruct, - fillOpacity?: WithDefault, - fillRule?: WithDefault, - stroke?: ColorStruct, - strokeOpacity?: WithDefault, - strokeWidth?: WithDefault, - strokeLinecap?: WithDefault, - strokeLinejoin?: WithDefault, - strokeDasharray?: $ReadOnlyArray, - strokeDashoffset?: Float, - strokeMiterlimit?: Float, - vectorEffect?: WithDefault, - propList?: $ReadOnlyArray, -|}>; - -type FontObject = $ReadOnly<{| - fontStyle?: string, - fontVariant?: string, - fontWeight?: string, - fontStretch?: string, - fontSize?: string, - fontFamily?: string, - textAnchor?: string, - textDecoration?: string, - letterSpacing?: string, - wordSpacing?: string, - kerning?: string, - fontFeatureSettings?: string, - fontVariantLigatures?: string, - fontVariationSettings?: string, -|}>; - -type SvgGroupCommonProps = $ReadOnly<{| - fontSize?: string, - fontWeight?: string, - font?: FontObject, -|}>; - -type NativeProps = $ReadOnly<{| - ...ViewProps, - ...SvgNodeCommonProps, - ...SvgRenderableCommonProps, - ...SvgGroupCommonProps, - textAnchor?: string, - dx?: $ReadOnlyArray, - dy?: $ReadOnlyArray, - positionX?: $ReadOnlyArray, - positionY?: $ReadOnlyArray, - x?: $ReadOnlyArray, - y?: $ReadOnlyArray, - rotate?: $ReadOnlyArray, - inlineSize?: string, - textLength?: string, - baselineShift?: string, - lengthAdjust?: string, - alignmentBaseline?: string, -|}>; - -type ComponentType = HostComponent; - -export default (codegenNativeComponent( - 'RNSVGText', - {}, -): ComponentType); diff --git a/src/fabric/TextNativeComponent.ts b/src/fabric/TextNativeComponent.ts new file mode 100644 index 000000000..7815bbb31 --- /dev/null +++ b/src/fabric/TextNativeComponent.ts @@ -0,0 +1,96 @@ +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import type { + Float, + Int32, + WithDefault, +} from 'react-native/Libraries/Types/CodegenTypes'; + +interface SvgNodeCommonProps { + name?: string; + opacity?: WithDefault; + matrix?: ReadonlyArray; //CGAffineTransform, + // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling + mask?: string; + markerStart?: string; + markerMid?: string; + markerEnd?: string; + clipPath?: string; + clipRule?: WithDefault; + responsible?: boolean; + display?: string; +} + +type ColorStruct = Readonly<{ + type?: WithDefault; + value?: ColorValue; + brushRef?: string; +}>; + +interface SvgRenderableCommonProps { + fill?: ColorStruct; + fillOpacity?: WithDefault; + fillRule?: WithDefault; + stroke?: ColorStruct; + strokeOpacity?: WithDefault; + strokeWidth?: WithDefault; + strokeLinecap?: WithDefault; + strokeLinejoin?: WithDefault; + strokeDasharray?: ReadonlyArray; + strokeDashoffset?: Float; + strokeMiterlimit?: Float; + vectorEffect?: WithDefault; + propList?: ReadonlyArray; +} + +type FontObject = Readonly<{ + fontStyle?: string; + fontVariant?: string; + fontWeight?: string; + fontStretch?: string; + fontSize?: string; + fontFamily?: string; + textAnchor?: string; + textDecoration?: string; + letterSpacing?: string; + wordSpacing?: string; + kerning?: string; + fontFeatureSettings?: string; + fontVariantLigatures?: string; + fontVariationSettings?: string; +}>; + +type SvgGroupCommonProps = Readonly<{ + fontSize?: string; + fontWeight?: string; + font?: FontObject; +}>; + +interface NativeProps + extends ViewProps, + SvgNodeCommonProps, + SvgRenderableCommonProps, + SvgGroupCommonProps { + textAnchor?: string; + dx?: ReadonlyArray; + dy?: ReadonlyArray; + positionX?: ReadonlyArray; + positionY?: ReadonlyArray; + x?: ReadonlyArray; + y?: ReadonlyArray; + rotate?: ReadonlyArray; + inlineSize?: string; + textLength?: string; + baselineShift?: string; + lengthAdjust?: string; + alignmentBaseline?: string; +} + +// eslint-disable-next-line @typescript-eslint/ban-types +const codegenNativeComponent = codegenNativeComponentUntyped as ( + name: string, +) => HostComponent; + +export default codegenNativeComponent('RNSVGText'); diff --git a/src/fabric/TextPathNativeComponent.js b/src/fabric/TextPathNativeComponent.js deleted file mode 100644 index 10b15d028..000000000 --- a/src/fabric/TextPathNativeComponent.js +++ /dev/null @@ -1,76 +0,0 @@ -/** - * @flow strict-local - * @format - */ -/* eslint-disable */ -import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'; -import type { HostComponent } from 'react-native/Libraries/Renderer/shims/ReactNativeTypes'; -import { ColorValue } from 'react-native/Libraries/StyleSheet/StyleSheet'; -import type { Int32, Double } from 'react-native/Libraries/Types/CodegenTypes'; - -type LayoutEvent = $ReadOnly<{| - layout: $ReadOnly<{| - x: Float, - y: Float, - width: Float, - height: Float, - |}>, -|}>; - -type SvgNodeCommonProps = $ReadOnly<{| - name?: string, - opacity?: WithDefault, - matrix?: $ReadOnlyArray, //CGAffineTransform, - // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling - mask?: string, - markerStart?: string, - markerMid?: string, - markerEnd?: string, - clipPath?: string, - clipRule?: WithDefault, - responsible?: boolean, - onLayout?: ?DirectEventHandler, // not working for now - display?: string, -|}>; - -type ColorStruct = $ReadOnly<{| - type?: WithDefault, - value?: ColorValue, - brushRef?: string, -|}>; - -type SvgRenderableCommonProps = $ReadOnly<{| - fill?: ColorStruct, - fillOpacity?: WithDefault, - fillRule?: WithDefault, - stroke?: ColorStruct, - strokeOpacity?: WithDefault, - strokeWidth?: WithDefault, - strokeLinecap?: WithDefault, - strokeLinejoin?: WithDefault, - strokeDasharray?: $ReadOnlyArray, - strokeDashoffset?: Float, - strokeMiterlimit?: Float, - vectorEffect?: WithDefault, - propList?: $ReadOnlyArray, -|}>; - -type NativeProps = $ReadOnly<{| - ...ViewProps, - ...SvgNodeCommonProps, - ...SvgRenderableCommonProps, - href?: string, - side?: string, - method?: string, - midLine?: string, - spacing?: string, - startOffset?: string, -|}>; - -type ComponentType = HostComponent; - -export default (codegenNativeComponent( - 'RNSVGTextPath', - {}, -): ComponentType); diff --git a/src/fabric/TextPathNativeComponent.ts b/src/fabric/TextPathNativeComponent.ts new file mode 100644 index 000000000..472e64b6e --- /dev/null +++ b/src/fabric/TextPathNativeComponent.ts @@ -0,0 +1,65 @@ +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import type { + Float, + Int32, + WithDefault, +} from 'react-native/Libraries/Types/CodegenTypes'; + +interface SvgNodeCommonProps { + name?: string; + opacity?: WithDefault; + matrix?: ReadonlyArray; //CGAffineTransform, + // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling + mask?: string; + markerStart?: string; + markerMid?: string; + markerEnd?: string; + clipPath?: string; + clipRule?: WithDefault; + responsible?: boolean; + display?: string; +} + +type ColorStruct = Readonly<{ + type?: WithDefault; + value?: ColorValue; + brushRef?: string; +}>; + +interface SvgRenderableCommonProps { + fill?: ColorStruct; + fillOpacity?: WithDefault; + fillRule?: WithDefault; + stroke?: ColorStruct; + strokeOpacity?: WithDefault; + strokeWidth?: WithDefault; + strokeLinecap?: WithDefault; + strokeLinejoin?: WithDefault; + strokeDasharray?: ReadonlyArray; + strokeDashoffset?: Float; + strokeMiterlimit?: Float; + vectorEffect?: WithDefault; + propList?: ReadonlyArray; +} + +interface NativeProps + extends ViewProps, + SvgNodeCommonProps, + SvgRenderableCommonProps { + href?: string; + side?: string; + method?: string; + midLine?: string; + spacing?: string; + startOffset?: string; +} + +// eslint-disable-next-line @typescript-eslint/ban-types +const codegenNativeComponent = codegenNativeComponentUntyped as ( + name: string, +) => HostComponent; + +export default codegenNativeComponent('RNSVGTextPath'); diff --git a/src/fabric/UseNativeComponent.js b/src/fabric/UseNativeComponent.js deleted file mode 100644 index 8b2ded616..000000000 --- a/src/fabric/UseNativeComponent.js +++ /dev/null @@ -1,77 +0,0 @@ -/** - * @flow strict-local - * @format - */ -/* eslint-disable */ -import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'; -import type { HostComponent } from 'react-native/Libraries/Renderer/shims/ReactNativeTypes'; -import { ColorValue } from 'react-native/Libraries/StyleSheet/StyleSheet'; -import type { Int32, Double } from 'react-native/Libraries/Types/CodegenTypes'; - -type LayoutEvent = $ReadOnly<{| - layout: $ReadOnly<{| - x: Float, - y: Float, - width: Float, - height: Float, - |}>, -|}>; - -type SvgNodeCommonProps = $ReadOnly<{| - name?: string, - opacity?: WithDefault, - matrix?: $ReadOnlyArray, //CGAffineTransform, - // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling - mask?: string, - markerStart?: string, - markerMid?: string, - markerEnd?: string, - clipPath?: string, - clipRule?: WithDefault, - responsible?: boolean, - onLayout?: ?DirectEventHandler, // not working for now - display?: string, -|}>; - -type ColorStruct = $ReadOnly<{| - type?: WithDefault, - value?: ColorValue, - brushRef?: string, -|}>; - -type SvgRenderableCommonProps = $ReadOnly<{| - fill?: ColorStruct, - fillOpacity?: WithDefault, - fillRule?: WithDefault, - stroke?: ColorStruct, - strokeOpacity?: WithDefault, - strokeWidth?: WithDefault, - strokeLinecap?: WithDefault, - strokeLinejoin?: WithDefault, - strokeDasharray?: $ReadOnlyArray, - strokeDashoffset?: Float, - strokeMiterlimit?: Float, - vectorEffect?: WithDefault, - propList?: $ReadOnlyArray, -|}>; - -type NativeProps = $ReadOnly<{| - ...ViewProps, - ...SvgNodeCommonProps, - ...SvgRenderableCommonProps, - href?: string, - x?: string, - y?: string, - useheight?: string, - usewidth?: string, - height?: string, - width?: string, -|}>; - -type ComponentType = HostComponent; - -export default (codegenNativeComponent( - 'RNSVGUse', - {}, -): ComponentType); diff --git a/src/fabric/UseNativeComponent.ts b/src/fabric/UseNativeComponent.ts new file mode 100644 index 000000000..68c1b3168 --- /dev/null +++ b/src/fabric/UseNativeComponent.ts @@ -0,0 +1,66 @@ +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +// @ts-ignore TODO: remove once there is a .d.ts file with definitions +import type { + Float, + Int32, + WithDefault, +} from 'react-native/Libraries/Types/CodegenTypes'; + +interface SvgNodeCommonProps { + name?: string; + opacity?: WithDefault; + matrix?: ReadonlyArray; //CGAffineTransform, + // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling + mask?: string; + markerStart?: string; + markerMid?: string; + markerEnd?: string; + clipPath?: string; + clipRule?: WithDefault; + responsible?: boolean; + display?: string; +} + +type ColorStruct = Readonly<{ + type?: WithDefault; + value?: ColorValue; + brushRef?: string; +}>; + +interface SvgRenderableCommonProps { + fill?: ColorStruct; + fillOpacity?: WithDefault; + fillRule?: WithDefault; + stroke?: ColorStruct; + strokeOpacity?: WithDefault; + strokeWidth?: WithDefault; + strokeLinecap?: WithDefault; + strokeLinejoin?: WithDefault; + strokeDasharray?: ReadonlyArray; + strokeDashoffset?: Float; + strokeMiterlimit?: Float; + vectorEffect?: WithDefault; + propList?: ReadonlyArray; +} + +interface NativeProps + extends ViewProps, + SvgNodeCommonProps, + SvgRenderableCommonProps { + href?: string; + x?: string; + y?: string; + useheight?: string; + usewidth?: string; + height?: string; + width?: string; +} + +// eslint-disable-next-line @typescript-eslint/ban-types +const codegenNativeComponent = codegenNativeComponentUntyped as ( + name: string, +) => HostComponent; + +export default codegenNativeComponent('RNSVGUse'); From a51a92836a9a03387cae830598a58b4cc793c1e3 Mon Sep 17 00:00:00 2001 From: Wojciech Lewicki Date: Fri, 26 Aug 2022 17:25:07 +0200 Subject: [PATCH 04/79] make ts happy --- README.md | 3 ++- src/fabric/CircleNativeComponent.ts | 4 ++-- src/fabric/ClipPathNativeComponent.ts | 4 ++-- src/fabric/EllipseNativeComponent.ts | 4 ++-- src/fabric/ForeignObjectNativeComponent.ts | 4 ++-- src/fabric/GroupNativeComponent.ts | 4 ++-- src/fabric/ImageNativeComponent.ts | 2 +- src/fabric/LineNativeComponent.ts | 4 ++-- src/fabric/LinearGradientNativeComponent.ts | 4 ++-- src/fabric/MarkerNativeComponent.ts | 4 ++-- src/fabric/MaskNativeComponent.ts | 6 +++--- src/fabric/PathNativeComponent.ts | 4 ++-- src/fabric/PatternNativeComponent.ts | 6 +++--- src/fabric/RadialGradientNativeComponent.ts | 6 +++--- src/fabric/RectNativeComponent.ts | 4 ++-- src/fabric/SymbolNativeComponent.ts | 4 ++-- src/fabric/TSpanNativeComponent.ts | 4 ++-- src/fabric/TextNativeComponent.ts | 4 ++-- src/fabric/TextPathNativeComponent.ts | 4 ++-- src/fabric/UseNativeComponent.ts | 4 ++-- 20 files changed, 42 insertions(+), 41 deletions(-) diff --git a/README.md b/README.md index 7273cbecc..38b12931d 100644 --- a/README.md +++ b/README.md @@ -58,7 +58,7 @@ expo install react-native-svg ## Supported react-native versions -| react-native-svg | react-native | +| react-native-svg | react-native | | ---------------- | ------------ | | 3.2.0 | 0.29 | | 4.2.0 | 0.32 | @@ -77,6 +77,7 @@ expo install react-native-svg | >=12.3.0 | >=0.63.0 | ## Support for Fabric + [Fabric](https://reactnative.dev/architecture/fabric-renderer) is React Native's new rendering system. As of [version `13.0.0`](https://github.com/react-native-svg/react-native-svg/releases/tag/v13.0.0) of this project, Fabric is supported only for react-native 0.69.0+. Support for earlier versions is not possible due to breaking changes in configuration. | react-native-svg | react-native | diff --git a/src/fabric/CircleNativeComponent.ts b/src/fabric/CircleNativeComponent.ts index 89330d98d..dc6c8f539 100644 --- a/src/fabric/CircleNativeComponent.ts +++ b/src/fabric/CircleNativeComponent.ts @@ -1,17 +1,17 @@ // @ts-ignore TODO: remove once there is a .d.ts file with definitions import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; import type { ViewProps, HostComponent, ColorValue } from 'react-native'; -// @ts-ignore TODO: remove once there is a .d.ts file with definitions import type { Float, Int32, WithDefault, + // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; //CGAffineTransform, + matrix?: ReadonlyArray; // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling mask?: string; markerStart?: string; diff --git a/src/fabric/ClipPathNativeComponent.ts b/src/fabric/ClipPathNativeComponent.ts index 505872a9b..277a96ae7 100644 --- a/src/fabric/ClipPathNativeComponent.ts +++ b/src/fabric/ClipPathNativeComponent.ts @@ -1,17 +1,17 @@ // @ts-ignore TODO: remove once there is a .d.ts file with definitions import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; import type { HostComponent, ViewProps } from 'react-native'; -// @ts-ignore TODO: remove once there is a .d.ts file with definitions import type { Float, Int32, WithDefault, + // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; //CGAffineTransform, + matrix?: ReadonlyArray; // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling mask?: string; markerStart?: string; diff --git a/src/fabric/EllipseNativeComponent.ts b/src/fabric/EllipseNativeComponent.ts index 3cf88550c..e1e20dc1d 100644 --- a/src/fabric/EllipseNativeComponent.ts +++ b/src/fabric/EllipseNativeComponent.ts @@ -1,17 +1,17 @@ // @ts-ignore TODO: remove once there is a .d.ts file with definitions import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; import type { ViewProps, HostComponent, ColorValue } from 'react-native'; -// @ts-ignore TODO: remove once there is a .d.ts file with definitions import type { Float, Int32, WithDefault, + // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; //CGAffineTransform, + matrix?: ReadonlyArray; // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling mask?: string; markerStart?: string; diff --git a/src/fabric/ForeignObjectNativeComponent.ts b/src/fabric/ForeignObjectNativeComponent.ts index 71f963643..801df16e0 100644 --- a/src/fabric/ForeignObjectNativeComponent.ts +++ b/src/fabric/ForeignObjectNativeComponent.ts @@ -1,17 +1,17 @@ // @ts-ignore TODO: remove once there is a .d.ts file with definitions import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; import type { ViewProps, HostComponent, ColorValue } from 'react-native'; -// @ts-ignore TODO: remove once there is a .d.ts file with definitions import type { Float, Int32, WithDefault, + // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; //CGAffineTransform, + matrix?: ReadonlyArray; // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling mask?: string; markerStart?: string; diff --git a/src/fabric/GroupNativeComponent.ts b/src/fabric/GroupNativeComponent.ts index 302eca3fc..2a64146cd 100644 --- a/src/fabric/GroupNativeComponent.ts +++ b/src/fabric/GroupNativeComponent.ts @@ -1,17 +1,17 @@ // @ts-ignore TODO: remove once there is a .d.ts file with definitions import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; import type { ViewProps, HostComponent, ColorValue } from 'react-native'; -// @ts-ignore TODO: remove once there is a .d.ts file with definitions import type { Float, Int32, WithDefault, + // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; //CGAffineTransform, + matrix?: ReadonlyArray; // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling mask?: string; markerStart?: string; diff --git a/src/fabric/ImageNativeComponent.ts b/src/fabric/ImageNativeComponent.ts index 276802707..e3191550a 100644 --- a/src/fabric/ImageNativeComponent.ts +++ b/src/fabric/ImageNativeComponent.ts @@ -1,11 +1,11 @@ // @ts-ignore TODO: remove once there is a .d.ts file with definitions import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; import type { ViewProps, HostComponent, ColorValue } from 'react-native'; -// @ts-ignore TODO: remove once there is a .d.ts file with definitions import type { Float, Int32, WithDefault, + // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; // @ts-ignore TODO: remove once there is a .d.ts file with definitions import type { ImageSource } from 'react-native/Libraries/Image/ImageSource'; diff --git a/src/fabric/LineNativeComponent.ts b/src/fabric/LineNativeComponent.ts index ae94f8fe0..f8500f237 100644 --- a/src/fabric/LineNativeComponent.ts +++ b/src/fabric/LineNativeComponent.ts @@ -1,17 +1,17 @@ // @ts-ignore TODO: remove once there is a .d.ts file with definitions import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; import type { ViewProps, HostComponent, ColorValue } from 'react-native'; -// @ts-ignore TODO: remove once there is a .d.ts file with definitions import type { Float, Int32, WithDefault, + // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; //CGAffineTransform, + matrix?: ReadonlyArray; // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling mask?: string; markerStart?: string; diff --git a/src/fabric/LinearGradientNativeComponent.ts b/src/fabric/LinearGradientNativeComponent.ts index 30bbdf570..aee8caad7 100644 --- a/src/fabric/LinearGradientNativeComponent.ts +++ b/src/fabric/LinearGradientNativeComponent.ts @@ -1,17 +1,17 @@ // @ts-ignore TODO: remove once there is a .d.ts file with definitions import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; import type { HostComponent, ViewProps } from 'react-native'; -// @ts-ignore TODO: remove once there is a .d.ts file with definitions import type { Float, Int32, WithDefault, + // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; //CGAffineTransform, + matrix?: ReadonlyArray; // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling mask?: string; markerStart?: string; diff --git a/src/fabric/MarkerNativeComponent.ts b/src/fabric/MarkerNativeComponent.ts index a95244a61..d1b526b57 100644 --- a/src/fabric/MarkerNativeComponent.ts +++ b/src/fabric/MarkerNativeComponent.ts @@ -1,17 +1,17 @@ // @ts-ignore TODO: remove once there is a .d.ts file with definitions import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; import type { ViewProps, HostComponent, ColorValue } from 'react-native'; -// @ts-ignore TODO: remove once there is a .d.ts file with definitions import type { Float, Int32, WithDefault, + // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; //CGAffineTransform, + matrix?: ReadonlyArray; // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling mask?: string; markerStart?: string; diff --git a/src/fabric/MaskNativeComponent.ts b/src/fabric/MaskNativeComponent.ts index 000eebee0..9eaf61283 100644 --- a/src/fabric/MaskNativeComponent.ts +++ b/src/fabric/MaskNativeComponent.ts @@ -1,17 +1,17 @@ // @ts-ignore TODO: remove once there is a .d.ts file with definitions import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; import type { ViewProps, HostComponent, ColorValue } from 'react-native'; -// @ts-ignore TODO: remove once there is a .d.ts file with definitions import type { Float, Int32, WithDefault, + // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; //CGAffineTransform, + matrix?: ReadonlyArray; // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling mask?: string; markerStart?: string; @@ -81,7 +81,7 @@ interface NativeProps width?: string; maskUnits?: Int32; maskContentUnits?: Int32; - maskTransform?: ReadonlyArray; //CGAffineTransform, + maskTransform?: ReadonlyArray; } // eslint-disable-next-line @typescript-eslint/ban-types diff --git a/src/fabric/PathNativeComponent.ts b/src/fabric/PathNativeComponent.ts index ccc722135..19136ad78 100644 --- a/src/fabric/PathNativeComponent.ts +++ b/src/fabric/PathNativeComponent.ts @@ -1,17 +1,17 @@ // @ts-ignore TODO: remove once there is a .d.ts file with definitions import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; import type { ViewProps, HostComponent, ColorValue } from 'react-native'; -// @ts-ignore TODO: remove once there is a .d.ts file with definitions import type { Float, Int32, WithDefault, + // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; //CGAffineTransform, + matrix?: ReadonlyArray; // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling mask?: string; markerStart?: string; diff --git a/src/fabric/PatternNativeComponent.ts b/src/fabric/PatternNativeComponent.ts index fc5dca201..fc48085bc 100644 --- a/src/fabric/PatternNativeComponent.ts +++ b/src/fabric/PatternNativeComponent.ts @@ -1,17 +1,17 @@ // @ts-ignore TODO: remove once there is a .d.ts file with definitions import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; import type { ViewProps, HostComponent, ColorValue } from 'react-native'; -// @ts-ignore TODO: remove once there is a .d.ts file with definitions import type { Float, Int32, WithDefault, + // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; //CGAffineTransform, + matrix?: ReadonlyArray; // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling mask?: string; markerStart?: string; @@ -81,7 +81,7 @@ interface NativeProps width?: string; patternUnits?: Int32; patternContentUnits?: Int32; - patternTransform?: ReadonlyArray; //CGAffineTransform, + patternTransform?: ReadonlyArray; minX?: Float; minY?: Float; vbWidth?: Float; diff --git a/src/fabric/RadialGradientNativeComponent.ts b/src/fabric/RadialGradientNativeComponent.ts index f5e60c915..5e3a01d0a 100644 --- a/src/fabric/RadialGradientNativeComponent.ts +++ b/src/fabric/RadialGradientNativeComponent.ts @@ -1,17 +1,17 @@ // @ts-ignore TODO: remove once there is a .d.ts file with definitions import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; import type { HostComponent, ViewProps } from 'react-native'; -// @ts-ignore TODO: remove once there is a .d.ts file with definitions import type { Float, Int32, WithDefault, + // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; //CGAffineTransform, + matrix?: ReadonlyArray; // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling mask?: string; markerStart?: string; @@ -32,7 +32,7 @@ interface NativeProps extends ViewProps, SvgNodeCommonProps { ry?: string; gradient?: ReadonlyArray; gradientUnits?: Int32; - gradientTransform?: ReadonlyArray; //CGAffineTransform, + gradientTransform?: ReadonlyArray; } // eslint-disable-next-line @typescript-eslint/ban-types diff --git a/src/fabric/RectNativeComponent.ts b/src/fabric/RectNativeComponent.ts index c8046bd5b..7eadc7cd2 100644 --- a/src/fabric/RectNativeComponent.ts +++ b/src/fabric/RectNativeComponent.ts @@ -1,17 +1,17 @@ // @ts-ignore TODO: remove once there is a .d.ts file with definitions import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; import type { ViewProps, HostComponent, ColorValue } from 'react-native'; -// @ts-ignore TODO: remove once there is a .d.ts file with definitions import type { Float, Int32, WithDefault, + // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; //CGAffineTransform, + matrix?: ReadonlyArray; // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling mask?: string; markerStart?: string; diff --git a/src/fabric/SymbolNativeComponent.ts b/src/fabric/SymbolNativeComponent.ts index 21724ab6d..0743396a1 100644 --- a/src/fabric/SymbolNativeComponent.ts +++ b/src/fabric/SymbolNativeComponent.ts @@ -1,17 +1,17 @@ // @ts-ignore TODO: remove once there is a .d.ts file with definitions import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; import type { ViewProps, HostComponent, ColorValue } from 'react-native'; -// @ts-ignore TODO: remove once there is a .d.ts file with definitions import type { Float, Int32, WithDefault, + // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; //CGAffineTransform, + matrix?: ReadonlyArray; // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling mask?: string; markerStart?: string; diff --git a/src/fabric/TSpanNativeComponent.ts b/src/fabric/TSpanNativeComponent.ts index 1d31e36da..b9f0d7941 100644 --- a/src/fabric/TSpanNativeComponent.ts +++ b/src/fabric/TSpanNativeComponent.ts @@ -1,17 +1,17 @@ // @ts-ignore TODO: remove once there is a .d.ts file with definitions import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; import type { ViewProps, HostComponent, ColorValue } from 'react-native'; -// @ts-ignore TODO: remove once there is a .d.ts file with definitions import type { Float, Int32, WithDefault, + // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; //CGAffineTransform, + matrix?: ReadonlyArray; // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling mask?: string; markerStart?: string; diff --git a/src/fabric/TextNativeComponent.ts b/src/fabric/TextNativeComponent.ts index 7815bbb31..a518abc32 100644 --- a/src/fabric/TextNativeComponent.ts +++ b/src/fabric/TextNativeComponent.ts @@ -1,17 +1,17 @@ // @ts-ignore TODO: remove once there is a .d.ts file with definitions import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; import type { ViewProps, HostComponent, ColorValue } from 'react-native'; -// @ts-ignore TODO: remove once there is a .d.ts file with definitions import type { Float, Int32, WithDefault, + // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; //CGAffineTransform, + matrix?: ReadonlyArray; // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling mask?: string; markerStart?: string; diff --git a/src/fabric/TextPathNativeComponent.ts b/src/fabric/TextPathNativeComponent.ts index 472e64b6e..d215a2b1e 100644 --- a/src/fabric/TextPathNativeComponent.ts +++ b/src/fabric/TextPathNativeComponent.ts @@ -1,17 +1,17 @@ // @ts-ignore TODO: remove once there is a .d.ts file with definitions import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; import type { ViewProps, HostComponent, ColorValue } from 'react-native'; -// @ts-ignore TODO: remove once there is a .d.ts file with definitions import type { Float, Int32, WithDefault, + // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; //CGAffineTransform, + matrix?: ReadonlyArray; // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling mask?: string; markerStart?: string; diff --git a/src/fabric/UseNativeComponent.ts b/src/fabric/UseNativeComponent.ts index 68c1b3168..7c3a24aa8 100644 --- a/src/fabric/UseNativeComponent.ts +++ b/src/fabric/UseNativeComponent.ts @@ -1,17 +1,17 @@ // @ts-ignore TODO: remove once there is a .d.ts file with definitions import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; import type { ViewProps, HostComponent, ColorValue } from 'react-native'; -// @ts-ignore TODO: remove once there is a .d.ts file with definitions import type { Float, Int32, WithDefault, + // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { name?: string; opacity?: WithDefault; - matrix?: ReadonlyArray; //CGAffineTransform, + matrix?: ReadonlyArray; // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling mask?: string; markerStart?: string; From cac2e9ba39fccd41933eb2c9271eec5003742a62 Mon Sep 17 00:00:00 2001 From: Wojciech Lewicki Date: Fri, 26 Aug 2022 17:35:47 +0200 Subject: [PATCH 05/79] feat: transfer circle --- src/elements/Circle.tsx | 3 ++- src/elements/NativeComponents.tsx | 1 - src/fabric/CircleNativeComponent.ts | 10 ++-------- 3 files changed, 4 insertions(+), 10 deletions(-) diff --git a/src/elements/Circle.tsx b/src/elements/Circle.tsx index b850e9864..d720d2e0b 100644 --- a/src/elements/Circle.tsx +++ b/src/elements/Circle.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { extract, stringifyPropsForFabric } from '../lib/extract/extractProps'; import { CommonPathProps, NumberProp } from '../lib/extract/types'; import Shape from './Shape'; -import { RNSVGCircle } from './NativeComponents'; +import RNSVGCircle from '../fabric/CircleNativeComponent'; export interface CircleProps extends CommonPathProps { cx?: NumberProp; @@ -28,6 +28,7 @@ export default class Circle extends Shape { ...stringifyPropsForFabric({ cx, cy, r }), }; + // @ts-ignore TODO: handle ref correctly return ; } } diff --git a/src/elements/NativeComponents.tsx b/src/elements/NativeComponents.tsx index b90a10065..be4564685 100644 --- a/src/elements/NativeComponents.tsx +++ b/src/elements/NativeComponents.tsx @@ -2,7 +2,6 @@ import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; export const RNSVGSvg = codegenNativeComponent('RNSVGSvgView'); -export const RNSVGCircle = codegenNativeComponent('RNSVGCircle'); export const RNSVGClipPath = codegenNativeComponent('RNSVGClipPath'); export const RNSVGDefs = codegenNativeComponent('RNSVGDefs'); export const RNSVGEllipse = codegenNativeComponent('RNSVGEllipse'); diff --git a/src/fabric/CircleNativeComponent.ts b/src/fabric/CircleNativeComponent.ts index dc6c8f539..85f2eccd4 100644 --- a/src/fabric/CircleNativeComponent.ts +++ b/src/fabric/CircleNativeComponent.ts @@ -1,6 +1,5 @@ -// @ts-ignore TODO: remove once there is a .d.ts file with definitions -import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, ColorValue } from 'react-native'; import type { Float, Int32, @@ -54,9 +53,4 @@ interface NativeProps r?: string; } -// eslint-disable-next-line @typescript-eslint/ban-types -const codegenNativeComponent = codegenNativeComponentUntyped as ( - name: string, -) => HostComponent; - export default codegenNativeComponent('RNSVGCircle'); From 2887a29c11eca610f1b4cacafc921e3f663590e7 Mon Sep 17 00:00:00 2001 From: Wojciech Lewicki Date: Fri, 26 Aug 2022 17:39:06 +0200 Subject: [PATCH 06/79] fix: minor change --- src/ReactNativeSVG.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/ReactNativeSVG.ts b/src/ReactNativeSVG.ts index 81e262a4f..a1198f8a2 100644 --- a/src/ReactNativeSVG.ts +++ b/src/ReactNativeSVG.ts @@ -49,7 +49,6 @@ import { LocalProps, } from './LocalSvg'; import { - RNSVGCircle, RNSVGClipPath, RNSVGDefs, RNSVGEllipse, @@ -72,6 +71,8 @@ import { RNSVGUse, } from './elements/NativeComponents'; +import RNSVGCircle from './fabric/CircleNativeComponent'; + export { RectProps, CircleProps, From 782f30e8e4bb0d3ac5fb3f9eceb7fc75e083ef97 Mon Sep 17 00:00:00 2001 From: Wojciech Lewicki Date: Mon, 29 Aug 2022 12:02:54 +0200 Subject: [PATCH 07/79] feat: bump types to have codegen types --- package.json | 2 +- src/fabric/CircleNativeComponent.ts | 1 - yarn.lock | 8 ++++---- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 731e7a2f5..9e8456e9f 100644 --- a/package.json +++ b/package.json @@ -78,7 +78,7 @@ "@types/jest": "^27.5.2", "@types/node": "*", "@types/react": "~18.0.15", - "@types/react-native": "^0.69.3", + "@types/react-native": "^0.69.5", "babel-eslint": "^10.1.0", "babel-jest": "^28.1.0", "clang-format": "^1.8.0", diff --git a/src/fabric/CircleNativeComponent.ts b/src/fabric/CircleNativeComponent.ts index 85f2eccd4..13efc322e 100644 --- a/src/fabric/CircleNativeComponent.ts +++ b/src/fabric/CircleNativeComponent.ts @@ -4,7 +4,6 @@ import type { Float, Int32, WithDefault, - // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { diff --git a/yarn.lock b/yarn.lock index e30c8ddee..d437d0c11 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2002,10 +2002,10 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf" integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== -"@types/react-native@^0.69.3": - version "0.69.3" - resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.69.3.tgz#344074ef5a8b95815128cceb4d1dc212d115faf3" - integrity sha512-htIxgvwUlYMFKogynsoMeZgxHq9WVEMJGl1UoVdRFctYCR/gSjapN+vKjxX+eo5qh/WSOYdzC/hOEz0cgLkTtQ== +"@types/react-native@^0.69.5": + version "0.69.5" + resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.69.5.tgz#7709fdbff031a5ecf1956705e6c4a07cdfe6867c" + integrity sha512-mSUCuGUsW2kJlZiu4GmdYVDKZX/52iyC9rm6dxAmflJj1b7kSO/CMSDy5WbcfS8QerxTqbYGTrIwHD0GnXHzbQ== dependencies: "@types/react" "*" From 6f041246a3dc3c5e05b5a51a084bccdea990a6da Mon Sep 17 00:00:00 2001 From: Wojciech Lewicki Date: Mon, 29 Aug 2022 13:15:25 +0200 Subject: [PATCH 08/79] feat: transfer rest of elements --- FabricExample/src/examples/Svg.tsx | 20 ++++----- src/ReactNativeSVG.ts | 5 +-- src/elements/Circle.tsx | 2 +- src/elements/ClipPath.tsx | 2 +- src/elements/Defs.tsx | 2 +- src/elements/Ellipse.tsx | 3 +- src/elements/ForeignObject.tsx | 3 +- src/elements/G.tsx | 3 +- src/elements/Image.tsx | 3 +- src/elements/Line.tsx | 3 +- src/elements/LinearGradient.tsx | 3 +- src/elements/Marker.tsx | 3 +- src/elements/Mask.tsx | 3 +- src/elements/NativeComponents.tsx | 28 ------------- src/elements/Path.tsx | 3 +- src/elements/Pattern.tsx | 3 +- src/elements/RadialGradient.tsx | 3 +- src/elements/Rect.tsx | 3 +- src/elements/Svg.tsx | 3 +- src/elements/Symbol.tsx | 3 +- src/elements/TSpan.tsx | 2 +- src/elements/Text.tsx | 2 +- src/elements/TextPath.tsx | 2 +- src/elements/Use.tsx | 3 +- src/fabric/ClipPathNativeComponent.ts | 11 +---- src/fabric/DefsNativeComponent.ts | 10 +---- src/fabric/EllipseNativeComponent.ts | 10 +---- src/fabric/ForeignObjectNativeComponent.ts | 10 +---- src/fabric/GroupNativeComponent.ts | 10 +---- src/fabric/ImageNativeComponent.ts | 10 +---- src/fabric/LineNativeComponent.ts | 10 +---- src/fabric/LinearGradientNativeComponent.ts | 10 +---- src/fabric/MarkerNativeComponent.ts | 10 +---- src/fabric/MaskNativeComponent.ts | 10 +---- src/fabric/PathNativeComponent.ts | 10 +---- src/fabric/PatternNativeComponent.ts | 10 +---- src/fabric/RadialGradientNativeComponent.ts | 10 +---- src/fabric/RectNativeComponent.ts | 10 +---- src/fabric/SvgViewNativeComponent.ts | 10 +---- src/fabric/SymbolNativeComponent.ts | 10 +---- src/fabric/TSpanNativeComponent.ts | 10 +---- src/fabric/TextNativeComponent.ts | 10 +---- src/fabric/TextPathNativeComponent.ts | 10 +---- src/fabric/UseNativeComponent.ts | 10 +---- src/fabric/index.ts | 45 +++++++++++++++++++++ 45 files changed, 133 insertions(+), 223 deletions(-) delete mode 100644 src/elements/NativeComponents.tsx create mode 100644 src/fabric/index.ts diff --git a/FabricExample/src/examples/Svg.tsx b/FabricExample/src/examples/Svg.tsx index 4f066f0a7..97b225b95 100644 --- a/FabricExample/src/examples/Svg.tsx +++ b/FabricExample/src/examples/Svg.tsx @@ -133,22 +133,22 @@ class SvgNativeMethods extends Component { }; alert = () => { console.log("PRESSED"); - this.root.toDataURL(base64 => { + this.root?.toDataURL(base64 => { this.setState({ base64, }); }); - console.log(this.circle.isPointInFill({x: 200, y: 100})); - console.log(this.circle.isPointInStroke({x: 200, y: 100})); - console.log(this.circle.getTotalLength()); - console.log(this.circle.getPointAtLength(25)); - console.log(this.circle.getBBox({fill: true})); - console.log(this.circle.getCTM()); - console.log(this.circle.getScreenCTM()); + console.log(this.circle?.isPointInFill({x: 200, y: 100})); + console.log(this.circle?.isPointInStroke({x: 200, y: 100})); + console.log(this.circle?.getTotalLength()); + console.log(this.circle?.getPointAtLength(25)); + console.log(this.circle?.getBBox({fill: true})); + console.log(this.circle?.getCTM()); + console.log(this.circle?.getScreenCTM()); }; - root: any; - circle: any; + root: Svg | null; + circle: Circle | null; componentDidMount() { this.alert(); diff --git a/src/ReactNativeSVG.ts b/src/ReactNativeSVG.ts index a1198f8a2..8257a2b7c 100644 --- a/src/ReactNativeSVG.ts +++ b/src/ReactNativeSVG.ts @@ -49,6 +49,7 @@ import { LocalProps, } from './LocalSvg'; import { + RNSVGCircle, RNSVGClipPath, RNSVGDefs, RNSVGEllipse, @@ -69,9 +70,7 @@ import { RNSVGTextPath, RNSVGTSpan, RNSVGUse, -} from './elements/NativeComponents'; - -import RNSVGCircle from './fabric/CircleNativeComponent'; +} from './fabric'; export { RectProps, diff --git a/src/elements/Circle.tsx b/src/elements/Circle.tsx index d720d2e0b..ee1743d75 100644 --- a/src/elements/Circle.tsx +++ b/src/elements/Circle.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { extract, stringifyPropsForFabric } from '../lib/extract/extractProps'; import { CommonPathProps, NumberProp } from '../lib/extract/types'; import Shape from './Shape'; -import RNSVGCircle from '../fabric/CircleNativeComponent'; +import RNSVGCircle from '../ReactNativeSVG'; export interface CircleProps extends CommonPathProps { cx?: NumberProp; diff --git a/src/elements/ClipPath.tsx b/src/elements/ClipPath.tsx index fd0937c38..25860878e 100644 --- a/src/elements/ClipPath.tsx +++ b/src/elements/ClipPath.tsx @@ -1,7 +1,7 @@ import React, { ReactNode } from 'react'; import { extract } from '../lib/extract/extractProps'; import Shape from './Shape'; -import { RNSVGClipPath } from './NativeComponents'; +import { RNSVGClipPath } from '../ReactNativeSVG'; export interface ClipPathProps { children?: ReactNode; diff --git a/src/elements/Defs.tsx b/src/elements/Defs.tsx index 3d488f962..cc0394380 100644 --- a/src/elements/Defs.tsx +++ b/src/elements/Defs.tsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { RNSVGDefs } from './NativeComponents'; +import { RNSVGDefs } from '../ReactNativeSVG'; export default class Defs extends Component> { static displayName = 'Defs'; diff --git a/src/elements/Ellipse.tsx b/src/elements/Ellipse.tsx index 55c176db7..789465960 100644 --- a/src/elements/Ellipse.tsx +++ b/src/elements/Ellipse.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { extract, stringifyPropsForFabric } from '../lib/extract/extractProps'; import { CommonPathProps, NumberProp } from '../lib/extract/types'; import Shape from './Shape'; -import { RNSVGEllipse } from './NativeComponents'; +import { RNSVGEllipse } from '../ReactNativeSVG'; export interface EllipseProps extends CommonPathProps { cx?: NumberProp; @@ -29,6 +29,7 @@ export default class Ellipse extends Shape { ...extract(this, props), ...stringifyPropsForFabric({ cx, cy, rx, ry }), }; + // @ts-ignore TODO: handle ref correctly return ; } } diff --git a/src/elements/ForeignObject.tsx b/src/elements/ForeignObject.tsx index fba552651..5c25c8909 100644 --- a/src/elements/ForeignObject.tsx +++ b/src/elements/ForeignObject.tsx @@ -5,7 +5,7 @@ import { } from '../lib/extract/extractProps'; import { NumberProp } from '../lib/extract/types'; import G from './G'; -import { RNSVGForeignObject } from './NativeComponents'; +import { RNSVGForeignObject } from '../ReactNativeSVG'; export interface ForeignObjectProps { children?: ReactNode; @@ -31,6 +31,7 @@ export default class ForeignObject extends G { const foreignObjectProps = stringifyPropsForFabric({ x, y, width, height }); return ( extends Shape { extractedProps.font = font; } return ( + // @ts-ignore TODO: handle ref correctly {props.children} diff --git a/src/elements/Image.tsx b/src/elements/Image.tsx index bb1b1994e..0fbf1bda2 100644 --- a/src/elements/Image.tsx +++ b/src/elements/Image.tsx @@ -14,7 +14,7 @@ import { TouchableProps, } from '../lib/extract/types'; import Shape from './Shape'; -import { RNSVGImage } from './NativeComponents'; +import { RNSVGImage } from '../ReactNativeSVG'; const spacesRegExp = /\s+/; @@ -82,6 +82,7 @@ export default class SvgImage extends Shape { }; return ( { ...extract(this, props), ...stringifyPropsForFabric({ x1, y1, x2, y2 }), }; + // @ts-ignore TODO: handle ref correctly return ; } } diff --git a/src/elements/LinearGradient.tsx b/src/elements/LinearGradient.tsx index 88793138f..bd35a60a1 100644 --- a/src/elements/LinearGradient.tsx +++ b/src/elements/LinearGradient.tsx @@ -6,7 +6,7 @@ import { Units, } from '../lib/extract/types'; import Shape from './Shape'; -import { RNSVGLinearGradient } from './NativeComponents'; +import { RNSVGLinearGradient } from '../ReactNativeSVG'; import { stringifyPropsForFabric } from '../lib/extract/extractProps'; export interface LinearGradientProps { @@ -36,6 +36,7 @@ export default class LinearGradient extends Shape { const linearGradientProps = stringifyPropsForFabric({ x1, y1, x2, y2 }); return ( { return ( { }; return ( ('RNSVGSvgView'); -export const RNSVGClipPath = codegenNativeComponent('RNSVGClipPath'); -export const RNSVGDefs = codegenNativeComponent('RNSVGDefs'); -export const RNSVGEllipse = codegenNativeComponent('RNSVGEllipse'); -export const RNSVGForeignObject = - codegenNativeComponent('RNSVGForeignObject'); -export const RNSVGGroup = codegenNativeComponent('RNSVGGroup'); -export const RNSVGImage = codegenNativeComponent('RNSVGImage'); -export const RNSVGLine = codegenNativeComponent('RNSVGLine'); -export const RNSVGLinearGradient = codegenNativeComponent( - 'RNSVGLinearGradient', -); -export const RNSVGMarker = codegenNativeComponent('RNSVGMarker'); -export const RNSVGMask = codegenNativeComponent('RNSVGMask'); -export const RNSVGPath = codegenNativeComponent('RNSVGPath'); -export const RNSVGPattern = codegenNativeComponent('RNSVGPattern'); -export const RNSVGRadialGradient = codegenNativeComponent( - 'RNSVGRadialGradient', -); -export const RNSVGRect = codegenNativeComponent('RNSVGRect'); -export const RNSVGSymbol = codegenNativeComponent('RNSVGSymbol'); -export const RNSVGText = codegenNativeComponent('RNSVGText'); -export const RNSVGTextPath = codegenNativeComponent('RNSVGTextPath'); -export const RNSVGTSpan = codegenNativeComponent('RNSVGTSpan'); -export const RNSVGUse = codegenNativeComponent('RNSVGUse'); diff --git a/src/elements/Path.tsx b/src/elements/Path.tsx index b2364a97c..3db9563a1 100644 --- a/src/elements/Path.tsx +++ b/src/elements/Path.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { extract } from '../lib/extract/extractProps'; import Shape from './Shape'; -import { RNSVGPath } from './NativeComponents'; +import { RNSVGPath } from '../ReactNativeSVG'; import { CommonPathProps, NumberProp } from '../lib/extract/types'; export interface PathProps extends CommonPathProps { @@ -16,6 +16,7 @@ export default class Path extends Shape { const { props } = this; const { d } = props; const pathProps = { ...extract(this, props), d }; + // @ts-ignore TODO: handle ref correctly return ; } } diff --git a/src/elements/Pattern.tsx b/src/elements/Pattern.tsx index 0746cd5f0..1c8db715d 100644 --- a/src/elements/Pattern.tsx +++ b/src/elements/Pattern.tsx @@ -9,7 +9,7 @@ import { } from '../lib/extract/types'; import units from '../lib/units'; import Shape from './Shape'; -import { RNSVGPattern } from './NativeComponents'; +import { RNSVGPattern } from '../ReactNativeSVG'; import { stringifyPropsForFabric } from '../lib/extract/extractProps'; export interface PatternProps { @@ -69,6 +69,7 @@ export default class Pattern extends Shape { }; return ( { }); return ( { const rectProps = stringifyPropsForFabric({ x, y, width, height, rx, ry }); return ( { return ( diff --git a/src/elements/Symbol.tsx b/src/elements/Symbol.tsx index 1074f57c1..001cdb18c 100644 --- a/src/elements/Symbol.tsx +++ b/src/elements/Symbol.tsx @@ -1,7 +1,7 @@ import React, { ReactNode } from 'react'; import extractViewBox from '../lib/extract/extractViewBox'; import Shape from './Shape'; -import { RNSVGSymbol } from './NativeComponents'; +import { RNSVGSymbol } from '../ReactNativeSVG'; import { NumberProp } from '../lib/extract/types'; export interface SymbolProps { @@ -21,6 +21,7 @@ export default class Symbol extends Shape { const symbolProps = { name: id }; return ( { height, }); return ( + // @ts-ignore TODO: handle ref correctly {children} diff --git a/src/fabric/ClipPathNativeComponent.ts b/src/fabric/ClipPathNativeComponent.ts index 277a96ae7..4e91d40ed 100644 --- a/src/fabric/ClipPathNativeComponent.ts +++ b/src/fabric/ClipPathNativeComponent.ts @@ -1,11 +1,9 @@ -// @ts-ignore TODO: remove once there is a .d.ts file with definitions -import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { HostComponent, ViewProps } from 'react-native'; +import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps } from 'react-native'; import type { Float, Int32, WithDefault, - // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { @@ -25,9 +23,4 @@ interface SvgNodeCommonProps { interface NativeProps extends ViewProps, SvgNodeCommonProps {} -// eslint-disable-next-line @typescript-eslint/ban-types -const codegenNativeComponent = codegenNativeComponentUntyped as ( - name: string, -) => HostComponent; - export default codegenNativeComponent('RNSVGClipPath'); diff --git a/src/fabric/DefsNativeComponent.ts b/src/fabric/DefsNativeComponent.ts index 753104714..6b5cd51db 100644 --- a/src/fabric/DefsNativeComponent.ts +++ b/src/fabric/DefsNativeComponent.ts @@ -1,12 +1,6 @@ -// @ts-ignore TODO: remove once there is a .d.ts file with definitions -import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { HostComponent, ViewProps } from 'react-native'; +import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps } from 'react-native'; interface NativeProps extends ViewProps {} -// eslint-disable-next-line @typescript-eslint/ban-types -const codegenNativeComponent = codegenNativeComponentUntyped as ( - name: string, -) => HostComponent; - export default codegenNativeComponent('RNSVGDefs'); diff --git a/src/fabric/EllipseNativeComponent.ts b/src/fabric/EllipseNativeComponent.ts index e1e20dc1d..1be971101 100644 --- a/src/fabric/EllipseNativeComponent.ts +++ b/src/fabric/EllipseNativeComponent.ts @@ -1,6 +1,5 @@ -// @ts-ignore TODO: remove once there is a .d.ts file with definitions -import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, ColorValue } from 'react-native'; import type { Float, Int32, @@ -55,9 +54,4 @@ interface NativeProps ry?: string; } -// eslint-disable-next-line @typescript-eslint/ban-types -const codegenNativeComponent = codegenNativeComponentUntyped as ( - name: string, -) => HostComponent; - export default codegenNativeComponent('RNSVGEllipse'); diff --git a/src/fabric/ForeignObjectNativeComponent.ts b/src/fabric/ForeignObjectNativeComponent.ts index 801df16e0..e785f3590 100644 --- a/src/fabric/ForeignObjectNativeComponent.ts +++ b/src/fabric/ForeignObjectNativeComponent.ts @@ -1,6 +1,5 @@ -// @ts-ignore TODO: remove once there is a .d.ts file with definitions -import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, ColorValue } from 'react-native'; import type { Float, Int32, @@ -81,9 +80,4 @@ interface NativeProps width?: string; } -// eslint-disable-next-line @typescript-eslint/ban-types -const codegenNativeComponent = codegenNativeComponentUntyped as ( - name: string, -) => HostComponent; - export default codegenNativeComponent('RNSVGForeignObject'); diff --git a/src/fabric/GroupNativeComponent.ts b/src/fabric/GroupNativeComponent.ts index 2a64146cd..b5925eb2e 100644 --- a/src/fabric/GroupNativeComponent.ts +++ b/src/fabric/GroupNativeComponent.ts @@ -1,6 +1,5 @@ -// @ts-ignore TODO: remove once there is a .d.ts file with definitions -import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, ColorValue } from 'react-native'; import type { Float, Int32, @@ -74,9 +73,4 @@ interface NativeProps SvgRenderableCommonProps, SvgGroupCommonProps {} -// eslint-disable-next-line @typescript-eslint/ban-types -const codegenNativeComponent = codegenNativeComponentUntyped as ( - name: string, -) => HostComponent; - export default codegenNativeComponent('RNSVGGroup'); diff --git a/src/fabric/ImageNativeComponent.ts b/src/fabric/ImageNativeComponent.ts index e3191550a..38c2efe5e 100644 --- a/src/fabric/ImageNativeComponent.ts +++ b/src/fabric/ImageNativeComponent.ts @@ -1,6 +1,5 @@ -// @ts-ignore TODO: remove once there is a .d.ts file with definitions -import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, ColorValue } from 'react-native'; import type { Float, Int32, @@ -62,9 +61,4 @@ interface NativeProps meetOrSlice?: Int32; } -// eslint-disable-next-line @typescript-eslint/ban-types -const codegenNativeComponent = codegenNativeComponentUntyped as ( - name: string, -) => HostComponent; - export default codegenNativeComponent('RNSVGImage'); diff --git a/src/fabric/LineNativeComponent.ts b/src/fabric/LineNativeComponent.ts index f8500f237..396ea11ca 100644 --- a/src/fabric/LineNativeComponent.ts +++ b/src/fabric/LineNativeComponent.ts @@ -1,6 +1,5 @@ -// @ts-ignore TODO: remove once there is a .d.ts file with definitions -import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, ColorValue } from 'react-native'; import type { Float, Int32, @@ -55,9 +54,4 @@ interface NativeProps y2?: string; } -// eslint-disable-next-line @typescript-eslint/ban-types -const codegenNativeComponent = codegenNativeComponentUntyped as ( - name: string, -) => HostComponent; - export default codegenNativeComponent('RNSVGLine'); diff --git a/src/fabric/LinearGradientNativeComponent.ts b/src/fabric/LinearGradientNativeComponent.ts index aee8caad7..1506394ba 100644 --- a/src/fabric/LinearGradientNativeComponent.ts +++ b/src/fabric/LinearGradientNativeComponent.ts @@ -1,6 +1,5 @@ -// @ts-ignore TODO: remove once there is a .d.ts file with definitions -import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { HostComponent, ViewProps } from 'react-native'; +import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps } from 'react-native'; import type { Float, Int32, @@ -33,9 +32,4 @@ interface NativeProps extends ViewProps, SvgNodeCommonProps { gradientTransform?: ReadonlyArray; } -// eslint-disable-next-line @typescript-eslint/ban-types -const codegenNativeComponent = codegenNativeComponentUntyped as ( - name: string, -) => HostComponent; - export default codegenNativeComponent('RNSVGLinearGradient'); diff --git a/src/fabric/MarkerNativeComponent.ts b/src/fabric/MarkerNativeComponent.ts index d1b526b57..2150c79c2 100644 --- a/src/fabric/MarkerNativeComponent.ts +++ b/src/fabric/MarkerNativeComponent.ts @@ -1,6 +1,5 @@ -// @ts-ignore TODO: remove once there is a .d.ts file with definitions -import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, ColorValue } from 'react-native'; import type { Float, Int32, @@ -87,9 +86,4 @@ interface NativeProps meetOrSlice?: Int32; } -// eslint-disable-next-line @typescript-eslint/ban-types -const codegenNativeComponent = codegenNativeComponentUntyped as ( - name: string, -) => HostComponent; - export default codegenNativeComponent('RNSVGMarker'); diff --git a/src/fabric/MaskNativeComponent.ts b/src/fabric/MaskNativeComponent.ts index 9eaf61283..912cf794d 100644 --- a/src/fabric/MaskNativeComponent.ts +++ b/src/fabric/MaskNativeComponent.ts @@ -1,6 +1,5 @@ -// @ts-ignore TODO: remove once there is a .d.ts file with definitions -import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, ColorValue } from 'react-native'; import type { Float, Int32, @@ -84,9 +83,4 @@ interface NativeProps maskTransform?: ReadonlyArray; } -// eslint-disable-next-line @typescript-eslint/ban-types -const codegenNativeComponent = codegenNativeComponentUntyped as ( - name: string, -) => HostComponent; - export default codegenNativeComponent('RNSVGMask'); diff --git a/src/fabric/PathNativeComponent.ts b/src/fabric/PathNativeComponent.ts index 19136ad78..5acbc7d49 100644 --- a/src/fabric/PathNativeComponent.ts +++ b/src/fabric/PathNativeComponent.ts @@ -1,6 +1,5 @@ -// @ts-ignore TODO: remove once there is a .d.ts file with definitions -import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, ColorValue } from 'react-native'; import type { Float, Int32, @@ -52,9 +51,4 @@ interface NativeProps d?: string; } -// eslint-disable-next-line @typescript-eslint/ban-types -const codegenNativeComponent = codegenNativeComponentUntyped as ( - name: string, -) => HostComponent; - export default codegenNativeComponent('RNSVGPath'); diff --git a/src/fabric/PatternNativeComponent.ts b/src/fabric/PatternNativeComponent.ts index fc48085bc..f8730ad45 100644 --- a/src/fabric/PatternNativeComponent.ts +++ b/src/fabric/PatternNativeComponent.ts @@ -1,6 +1,5 @@ -// @ts-ignore TODO: remove once there is a .d.ts file with definitions -import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, ColorValue } from 'react-native'; import type { Float, Int32, @@ -90,9 +89,4 @@ interface NativeProps meetOrSlice?: Int32; } -// eslint-disable-next-line @typescript-eslint/ban-types -const codegenNativeComponent = codegenNativeComponentUntyped as ( - name: string, -) => HostComponent; - export default codegenNativeComponent('RNSVGPattern'); diff --git a/src/fabric/RadialGradientNativeComponent.ts b/src/fabric/RadialGradientNativeComponent.ts index 5e3a01d0a..34f1ebb9c 100644 --- a/src/fabric/RadialGradientNativeComponent.ts +++ b/src/fabric/RadialGradientNativeComponent.ts @@ -1,6 +1,5 @@ -// @ts-ignore TODO: remove once there is a .d.ts file with definitions -import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { HostComponent, ViewProps } from 'react-native'; +import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps } from 'react-native'; import type { Float, Int32, @@ -35,9 +34,4 @@ interface NativeProps extends ViewProps, SvgNodeCommonProps { gradientTransform?: ReadonlyArray; } -// eslint-disable-next-line @typescript-eslint/ban-types -const codegenNativeComponent = codegenNativeComponentUntyped as ( - name: string, -) => HostComponent; - export default codegenNativeComponent('RNSVGRadialGradient'); diff --git a/src/fabric/RectNativeComponent.ts b/src/fabric/RectNativeComponent.ts index 7eadc7cd2..c120a3703 100644 --- a/src/fabric/RectNativeComponent.ts +++ b/src/fabric/RectNativeComponent.ts @@ -1,6 +1,5 @@ -// @ts-ignore TODO: remove once there is a .d.ts file with definitions -import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, ColorValue } from 'react-native'; import type { Float, Int32, @@ -59,9 +58,4 @@ interface NativeProps ry?: string; } -// eslint-disable-next-line @typescript-eslint/ban-types -const codegenNativeComponent = codegenNativeComponentUntyped as ( - name: string, -) => HostComponent; - export default codegenNativeComponent('RNSVGRect'); diff --git a/src/fabric/SvgViewNativeComponent.ts b/src/fabric/SvgViewNativeComponent.ts index 13c63823d..1c1192ab4 100644 --- a/src/fabric/SvgViewNativeComponent.ts +++ b/src/fabric/SvgViewNativeComponent.ts @@ -1,6 +1,5 @@ -// @ts-ignore TODO: remove once there is a .d.ts file with definitions -import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, ColorValue } from 'react-native'; // @ts-ignore TODO: remove once there is a .d.ts file with definitions import type { Float, Int32 } from 'react-native/Libraries/Types/CodegenTypes'; @@ -17,9 +16,4 @@ interface NativeProps extends ViewProps { color: ColorValue; } -// eslint-disable-next-line @typescript-eslint/ban-types -const codegenNativeComponent = codegenNativeComponentUntyped as ( - name: string, -) => HostComponent; - export default codegenNativeComponent('RNSVGSvgView'); diff --git a/src/fabric/SymbolNativeComponent.ts b/src/fabric/SymbolNativeComponent.ts index 0743396a1..c611ce2f0 100644 --- a/src/fabric/SymbolNativeComponent.ts +++ b/src/fabric/SymbolNativeComponent.ts @@ -1,6 +1,5 @@ -// @ts-ignore TODO: remove once there is a .d.ts file with definitions -import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, ColorValue } from 'react-native'; import type { Float, Int32, @@ -81,9 +80,4 @@ interface NativeProps meetOrSlice?: Int32; } -// eslint-disable-next-line @typescript-eslint/ban-types -const codegenNativeComponent = codegenNativeComponentUntyped as ( - name: string, -) => HostComponent; - export default codegenNativeComponent('RNSVGSymbol'); diff --git a/src/fabric/TSpanNativeComponent.ts b/src/fabric/TSpanNativeComponent.ts index b9f0d7941..9e12f732e 100644 --- a/src/fabric/TSpanNativeComponent.ts +++ b/src/fabric/TSpanNativeComponent.ts @@ -1,6 +1,5 @@ -// @ts-ignore TODO: remove once there is a .d.ts file with definitions -import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, ColorValue } from 'react-native'; import type { Float, Int32, @@ -89,9 +88,4 @@ interface NativeProps content?: string; } -// eslint-disable-next-line @typescript-eslint/ban-types -const codegenNativeComponent = codegenNativeComponentUntyped as ( - name: string, -) => HostComponent; - export default codegenNativeComponent('RNSVGTSpan'); diff --git a/src/fabric/TextNativeComponent.ts b/src/fabric/TextNativeComponent.ts index a518abc32..e1d241f62 100644 --- a/src/fabric/TextNativeComponent.ts +++ b/src/fabric/TextNativeComponent.ts @@ -1,6 +1,5 @@ -// @ts-ignore TODO: remove once there is a .d.ts file with definitions -import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, ColorValue } from 'react-native'; import type { Float, Int32, @@ -88,9 +87,4 @@ interface NativeProps alignmentBaseline?: string; } -// eslint-disable-next-line @typescript-eslint/ban-types -const codegenNativeComponent = codegenNativeComponentUntyped as ( - name: string, -) => HostComponent; - export default codegenNativeComponent('RNSVGText'); diff --git a/src/fabric/TextPathNativeComponent.ts b/src/fabric/TextPathNativeComponent.ts index d215a2b1e..034bf89bb 100644 --- a/src/fabric/TextPathNativeComponent.ts +++ b/src/fabric/TextPathNativeComponent.ts @@ -1,6 +1,5 @@ -// @ts-ignore TODO: remove once there is a .d.ts file with definitions -import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, ColorValue } from 'react-native'; import type { Float, Int32, @@ -57,9 +56,4 @@ interface NativeProps startOffset?: string; } -// eslint-disable-next-line @typescript-eslint/ban-types -const codegenNativeComponent = codegenNativeComponentUntyped as ( - name: string, -) => HostComponent; - export default codegenNativeComponent('RNSVGTextPath'); diff --git a/src/fabric/UseNativeComponent.ts b/src/fabric/UseNativeComponent.ts index 7c3a24aa8..81d3d4e50 100644 --- a/src/fabric/UseNativeComponent.ts +++ b/src/fabric/UseNativeComponent.ts @@ -1,6 +1,5 @@ -// @ts-ignore TODO: remove once there is a .d.ts file with definitions -import codegenNativeComponentUntyped from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps, HostComponent, ColorValue } from 'react-native'; +import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; +import type { ViewProps, ColorValue } from 'react-native'; import type { Float, Int32, @@ -58,9 +57,4 @@ interface NativeProps width?: string; } -// eslint-disable-next-line @typescript-eslint/ban-types -const codegenNativeComponent = codegenNativeComponentUntyped as ( - name: string, -) => HostComponent; - export default codegenNativeComponent('RNSVGUse'); diff --git a/src/fabric/index.ts b/src/fabric/index.ts new file mode 100644 index 000000000..52ea30eb2 --- /dev/null +++ b/src/fabric/index.ts @@ -0,0 +1,45 @@ +import RNSVGCircle from './CircleNativeComponent'; +import RNSVGClipPath from './ClipPathNativeComponent'; +import RNSVGDefs from './DefsNativeComponent'; +import RNSVGEllipse from './EllipseNativeComponent'; +import RNSVGForeignObject from './ForeignObjectNativeComponent'; +import RNSVGGroup from './GroupNativeComponent'; +import RNSVGImage from './ImageNativeComponent'; +import RNSVGLinearGradient from './LinearGradientNativeComponent'; +import RNSVGLine from './LineNativeComponent'; +import RNSVGMarker from './MarkerNativeComponent'; +import RNSVGMask from './MaskNativeComponent'; +import RNSVGPath from './PathNativeComponent'; +import RNSVGPattern from './PatternNativeComponent'; +import RNSVGRadialGradient from './RadialGradientNativeComponent'; +import RNSVGRect from './RectNativeComponent'; +import RNSVGSvg from './SvgViewNativeComponent'; +import RNSVGSymbol from './SymbolNativeComponent'; +import RNSVGText from './TextNativeComponent'; +import RNSVGTextPath from './TextPathNativeComponent'; +import RNSVGTSpan from './TSpanNativeComponent'; +import RNSVGUse from './UseNativeComponent'; + +export { + RNSVGCircle, + RNSVGClipPath, + RNSVGDefs, + RNSVGEllipse, + RNSVGForeignObject, + RNSVGGroup, + RNSVGImage, + RNSVGLinearGradient, + RNSVGLine, + RNSVGMarker, + RNSVGMask, + RNSVGPath, + RNSVGPattern, + RNSVGRadialGradient, + RNSVGRect, + RNSVGSvg, + RNSVGSymbol, + RNSVGText, + RNSVGTextPath, + RNSVGTSpan, + RNSVGUse, +}; From 870992383b25a9ede785a9287e9ef8ee6e7fa600 Mon Sep 17 00:00:00 2001 From: Wojciech Lewicki Date: Mon, 29 Aug 2022 13:30:52 +0200 Subject: [PATCH 09/79] fix: wrong import --- src/elements/Circle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/elements/Circle.tsx b/src/elements/Circle.tsx index ee1743d75..2a70918fb 100644 --- a/src/elements/Circle.tsx +++ b/src/elements/Circle.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { extract, stringifyPropsForFabric } from '../lib/extract/extractProps'; import { CommonPathProps, NumberProp } from '../lib/extract/types'; import Shape from './Shape'; -import RNSVGCircle from '../ReactNativeSVG'; +import { RNSVGCircle } from '../ReactNativeSVG'; export interface CircleProps extends CommonPathProps { cx?: NumberProp; From 80fe687747fba6c7d7b072562278496b5fec15d1 Mon Sep 17 00:00:00 2001 From: Wojciech Lewicki Date: Mon, 29 Aug 2022 17:02:11 +0200 Subject: [PATCH 10/79] feat: try to add babel plugin --- babel.config.js | 3 ++ package.json | 1 + yarn.lock | 136 ++++++++++++++++++++++++++++++++++++++++++++---- 3 files changed, 130 insertions(+), 10 deletions(-) diff --git a/babel.config.js b/babel.config.js index f842b77fc..b52bd0473 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,3 +1,6 @@ module.exports = { presets: ['module:metro-react-native-babel-preset'], + plugins: [ + '@react-native/babel-plugin-codegen', + ] }; diff --git a/package.json b/package.json index 9e8456e9f..017a7ffaa 100644 --- a/package.json +++ b/package.json @@ -74,6 +74,7 @@ "@react-native-community/bob": "^0.9.7", "@react-native-community/eslint-config": "^3.0.2", "@react-native-community/eslint-plugin": "^1.2.0", + "@react-native/babel-plugin-codegen": "^0.0.6", "@types/css-tree": "^1.0.3", "@types/jest": "^27.5.2", "@types/node": "*", diff --git a/yarn.lock b/yarn.lock index d437d0c11..ac525250c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -43,6 +43,27 @@ json5 "^2.2.1" semver "^6.3.0" +"@babel/core@^7.13.16": + version "7.18.13" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.18.13.tgz#9be8c44512751b05094a4d3ab05fc53a47ce00ac" + integrity sha512-ZisbOvRRusFktksHSG6pjj1CSvkPkcZq/KHD45LAkVP/oiHJkNBZWfpvlLmX8OtHDG8IuzsFlVRWo08w7Qxn0A== + dependencies: + "@ampproject/remapping" "^2.1.0" + "@babel/code-frame" "^7.18.6" + "@babel/generator" "^7.18.13" + "@babel/helper-compilation-targets" "^7.18.9" + "@babel/helper-module-transforms" "^7.18.9" + "@babel/helpers" "^7.18.9" + "@babel/parser" "^7.18.13" + "@babel/template" "^7.18.10" + "@babel/traverse" "^7.18.13" + "@babel/types" "^7.18.13" + convert-source-map "^1.7.0" + debug "^4.1.0" + gensync "^1.0.0-beta.2" + json5 "^2.2.1" + semver "^6.3.0" + "@babel/eslint-parser@^7.18.2": version "7.18.9" resolved "https://registry.yarnpkg.com/@babel/eslint-parser/-/eslint-parser-7.18.9.tgz#255a63796819a97b7578751bb08ab9f2a375a031" @@ -52,6 +73,15 @@ eslint-visitor-keys "^2.1.0" semver "^6.3.0" +"@babel/generator@^7.18.13": + version "7.18.13" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.18.13.tgz#59550cbb9ae79b8def15587bdfbaa388c4abf212" + integrity sha512-CkPg8ySSPuHTYPJYo7IRALdqyjM9HCbt/3uOBEFbzyGVP6Mn8bwFPB0jX6982JVNBlYzM1nnPkfjuXSOPtQeEQ== + dependencies: + "@babel/types" "^7.18.13" + "@jridgewell/gen-mapping" "^0.3.2" + jsesc "^2.5.1" + "@babel/generator@^7.18.9", "@babel/generator@^7.5.0", "@babel/generator@^7.7.2": version "7.18.9" resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.18.9.tgz#68337e9ea8044d6ddc690fb29acae39359cca0a5" @@ -230,6 +260,11 @@ dependencies: "@babel/types" "^7.18.6" +"@babel/helper-string-parser@^7.18.10": + version "7.18.10" + resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.18.10.tgz#181f22d28ebe1b3857fa575f5c290b1aaf659b56" + integrity sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw== + "@babel/helper-validator-identifier@^7.18.6": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076" @@ -273,6 +308,11 @@ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.9.tgz#f2dde0c682ccc264a9a8595efd030a5cc8fd2539" integrity sha512-9uJveS9eY9DJ0t64YbIBZICtJy8a5QrDEVdiLCG97fVLpDTpGX7t8mMSb6OWw6Lrnjqj4O8zwjELX3dhoMgiBg== +"@babel/parser@^7.13.16", "@babel/parser@^7.14.0", "@babel/parser@^7.18.10", "@babel/parser@^7.18.13": + version "7.18.13" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.13.tgz#5b2dd21cae4a2c5145f1fbd8ca103f9313d3b7e4" + integrity sha512-dgXcIfMuQ0kgzLB2b9tRZs7TTFFaGM2AbtA4fJgUUYukzGH4jwsS7hzQHEGs67jdehpm22vkgKwvbU+aEflgwg== + "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz#da5b8f9a580acdfbe53494dba45ea389fb09a4d2" @@ -299,7 +339,7 @@ "@babel/helper-remap-async-to-generator" "^7.18.6" "@babel/plugin-syntax-async-generators" "^7.8.4" -"@babel/plugin-proposal-class-properties@^7.0.0", "@babel/plugin-proposal-class-properties@^7.1.0", "@babel/plugin-proposal-class-properties@^7.18.6", "@babel/plugin-proposal-class-properties@^7.8.3": +"@babel/plugin-proposal-class-properties@^7.0.0", "@babel/plugin-proposal-class-properties@^7.1.0", "@babel/plugin-proposal-class-properties@^7.13.0", "@babel/plugin-proposal-class-properties@^7.18.6", "@babel/plugin-proposal-class-properties@^7.8.3": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz#b110f59741895f7ec21a6fff696ec46265c446a3" integrity sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ== @@ -356,7 +396,7 @@ "@babel/helper-plugin-utils" "^7.18.9" "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4" -"@babel/plugin-proposal-nullish-coalescing-operator@^7.0.0", "@babel/plugin-proposal-nullish-coalescing-operator@^7.1.0", "@babel/plugin-proposal-nullish-coalescing-operator@^7.18.6": +"@babel/plugin-proposal-nullish-coalescing-operator@^7.0.0", "@babel/plugin-proposal-nullish-coalescing-operator@^7.1.0", "@babel/plugin-proposal-nullish-coalescing-operator@^7.13.8", "@babel/plugin-proposal-nullish-coalescing-operator@^7.18.6": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz#fdd940a99a740e577d6c753ab6fbb43fdb9467e1" integrity sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA== @@ -391,7 +431,7 @@ "@babel/helper-plugin-utils" "^7.18.6" "@babel/plugin-syntax-optional-catch-binding" "^7.8.3" -"@babel/plugin-proposal-optional-chaining@^7.0.0", "@babel/plugin-proposal-optional-chaining@^7.1.0", "@babel/plugin-proposal-optional-chaining@^7.18.9": +"@babel/plugin-proposal-optional-chaining@^7.0.0", "@babel/plugin-proposal-optional-chaining@^7.1.0", "@babel/plugin-proposal-optional-chaining@^7.13.12", "@babel/plugin-proposal-optional-chaining@^7.18.9": version "7.18.9" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.18.9.tgz#e8e8fe0723f2563960e4bf5e9690933691915993" integrity sha512-v5nwt4IqBXihxGsW2QmCWMDS3B3bzGIk/EQVZz2ei7f3NJl8NzAJVvUmpDW5q1CRNY+Beb/k58UAH1Km1N411w== @@ -701,7 +741,7 @@ "@babel/helper-plugin-utils" "^7.18.6" babel-plugin-dynamic-import-node "^2.3.3" -"@babel/plugin-transform-modules-commonjs@^7.0.0", "@babel/plugin-transform-modules-commonjs@^7.1.0", "@babel/plugin-transform-modules-commonjs@^7.18.6": +"@babel/plugin-transform-modules-commonjs@^7.0.0", "@babel/plugin-transform-modules-commonjs@^7.1.0", "@babel/plugin-transform-modules-commonjs@^7.13.8", "@babel/plugin-transform-modules-commonjs@^7.18.6": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.18.6.tgz#afd243afba166cca69892e24a8fd8c9f2ca87883" integrity sha512-Qfv2ZOWikpvmedXQJDSbxNqy7Xr/j2Y8/KfijM0iJyKkBTmWuvCA1yeH1yDM7NJhBW/2aXxeucLj6i80/LAJ/Q== @@ -989,7 +1029,7 @@ core-js-compat "^3.22.1" semver "^6.3.0" -"@babel/preset-flow@^7.0.0", "@babel/preset-flow@^7.8.3": +"@babel/preset-flow@^7.0.0", "@babel/preset-flow@^7.13.13", "@babel/preset-flow@^7.8.3": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/preset-flow/-/preset-flow-7.18.6.tgz#83f7602ba566e72a9918beefafef8ef16d2810cb" integrity sha512-E7BDhL64W6OUqpuyHnSroLnqyRTcG6ZdOBl1OKI/QK/HJfplqK/S3sq1Cckx7oTodJ5yOXyfw7rEADJ6UjoQDQ== @@ -1021,7 +1061,7 @@ "@babel/plugin-transform-react-jsx-development" "^7.18.6" "@babel/plugin-transform-react-pure-annotations" "^7.18.6" -"@babel/preset-typescript@^7.1.0", "@babel/preset-typescript@^7.8.3": +"@babel/preset-typescript@^7.1.0", "@babel/preset-typescript@^7.13.0", "@babel/preset-typescript@^7.8.3": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.18.6.tgz#ce64be3e63eddc44240c6358daefac17b3186399" integrity sha512-s9ik86kXBAnD760aybBucdpnLsAt0jK1xqJn2juOn9lkOvSHV60os5hxoVJsPzMQxvnUJFAlkont2DvvaYEBtQ== @@ -1030,7 +1070,7 @@ "@babel/helper-validator-option" "^7.18.6" "@babel/plugin-transform-typescript" "^7.18.6" -"@babel/register@^7.0.0": +"@babel/register@^7.0.0", "@babel/register@^7.13.16": version "7.18.9" resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.18.9.tgz#1888b24bc28d5cc41c412feb015e9ff6b96e439c" integrity sha512-ZlbnXDcNYHMR25ITwwNKT88JiaukkdVj/nG7r3wnuXkOTHc60Uy05PwMCPre0hSkY68E6zK3xz+vUJSP2jWmcw== @@ -1057,6 +1097,15 @@ "@babel/parser" "^7.18.6" "@babel/types" "^7.18.6" +"@babel/template@^7.18.10": + version "7.18.10" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71" + integrity sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA== + dependencies: + "@babel/code-frame" "^7.18.6" + "@babel/parser" "^7.18.10" + "@babel/types" "^7.18.10" + "@babel/traverse@^7.0.0", "@babel/traverse@^7.13.0", "@babel/traverse@^7.18.9", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.2", "@babel/traverse@^7.7.4": version "7.18.9" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.9.tgz#deeff3e8f1bad9786874cb2feda7a2d77a904f98" @@ -1073,6 +1122,22 @@ debug "^4.1.0" globals "^11.1.0" +"@babel/traverse@^7.18.13": + version "7.18.13" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.13.tgz#5ab59ef51a997b3f10c4587d648b9696b6cb1a68" + integrity sha512-N6kt9X1jRMLPxxxPYWi7tgvJRH/rtoU+dbKAPDM44RFHiMH8igdsaSBgFeskhSl/kLWLDUvIh1RXCrTmg0/zvA== + dependencies: + "@babel/code-frame" "^7.18.6" + "@babel/generator" "^7.18.13" + "@babel/helper-environment-visitor" "^7.18.9" + "@babel/helper-function-name" "^7.18.9" + "@babel/helper-hoist-variables" "^7.18.6" + "@babel/helper-split-export-declaration" "^7.18.6" + "@babel/parser" "^7.18.13" + "@babel/types" "^7.18.13" + debug "^4.1.0" + globals "^11.1.0" + "@babel/types@^7.0.0", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.0": version "7.18.9" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.9.tgz#7148d64ba133d8d73a41b3172ac4b83a1452205f" @@ -1081,6 +1146,15 @@ "@babel/helper-validator-identifier" "^7.18.6" to-fast-properties "^2.0.0" +"@babel/types@^7.18.10", "@babel/types@^7.18.13": + version "7.18.13" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.13.tgz#30aeb9e514f4100f7c1cb6e5ba472b30e48f519a" + integrity sha512-ePqfTihzW0W6XAU+aMw2ykilisStJfDnsejDCXRchCcMJ4O0+8DhPXf2YUbZ6wjBlsEmZwLK/sPweWtu8hcJYQ== + dependencies: + "@babel/helper-string-parser" "^7.18.10" + "@babel/helper-validator-identifier" "^7.18.6" + to-fast-properties "^2.0.0" + "@bcoe/v8-coverage@^0.2.3": version "0.2.3" resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" @@ -1770,6 +1844,13 @@ resolved "https://registry.yarnpkg.com/@react-native/assets/-/assets-1.0.0.tgz#c6f9bf63d274bafc8e970628de24986b30a55c8e" integrity sha512-KrwSpS1tKI70wuKl68DwJZYEvXktDHdZMG0k2AXD/rJVSlB23/X2CB2cutVR0HwNMJIal9HOUOBB2rVfa6UGtQ== +"@react-native/babel-plugin-codegen@^0.0.6": + version "0.0.6" + resolved "https://registry.yarnpkg.com/@react-native/babel-plugin-codegen/-/babel-plugin-codegen-0.0.6.tgz#a77ddba01d47e9246d0ff43a414a153b1017854d" + integrity sha512-fi4bEAUeBmNZju+i/ltD+3RXGMO2OaZEnFjK7ZeTGP5hqcAq81HiaKpy8Y2nxtJcanZ8DYKOLGr1Vh26aKLRuQ== + dependencies: + react-native-codegen "*" + "@react-native/normalize-color@1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@react-native/normalize-color/-/normalize-color-1.0.0.tgz#c52a99d4fe01049102d47dc45d40cbde4f720ab6" @@ -2912,7 +2993,7 @@ capture-exit@^2.0.0: dependencies: rsvp "^4.8.4" -chalk@4.1.2, chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.1: +chalk@4.1.2, chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.1, chalk@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01" integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA== @@ -6069,6 +6150,31 @@ jscodeshift@^0.11.0: temp "^0.8.1" write-file-atomic "^2.3.0" +jscodeshift@^0.13.1: + version "0.13.1" + resolved "https://registry.yarnpkg.com/jscodeshift/-/jscodeshift-0.13.1.tgz#69bfe51e54c831296380585c6d9e733512aecdef" + integrity sha512-lGyiEbGOvmMRKgWk4vf+lUrCWO/8YR8sUR3FKF1Cq5fovjZDlIcw3Hu5ppLHAnEXshVffvaM0eyuY/AbOeYpnQ== + dependencies: + "@babel/core" "^7.13.16" + "@babel/parser" "^7.13.16" + "@babel/plugin-proposal-class-properties" "^7.13.0" + "@babel/plugin-proposal-nullish-coalescing-operator" "^7.13.8" + "@babel/plugin-proposal-optional-chaining" "^7.13.12" + "@babel/plugin-transform-modules-commonjs" "^7.13.8" + "@babel/preset-flow" "^7.13.13" + "@babel/preset-typescript" "^7.13.0" + "@babel/register" "^7.13.16" + babel-core "^7.0.0-bridge.0" + chalk "^4.1.2" + flow-parser "0.*" + graceful-fs "^4.2.4" + micromatch "^3.1.10" + neo-async "^2.5.0" + node-dir "^0.1.17" + recast "^0.20.4" + temp "^0.8.4" + write-file-atomic "^2.3.0" + jsesc@^2.5.1: version "2.5.2" resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4" @@ -7738,6 +7844,16 @@ react-is@^18.0.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== +react-native-codegen@*: + version "0.69.2" + resolved "https://registry.yarnpkg.com/react-native-codegen/-/react-native-codegen-0.69.2.tgz#e33ac3b1486de59ddae687b731ddbfcef8af0e4e" + integrity sha512-yPcgMHD4mqLbckqnWjFBaxomDnBREfRjDi2G/WxNyPBQLD+PXUEmZTkDx6QoOXN+Bl2SkpnNOSsLE2+/RUHoPw== + dependencies: + "@babel/parser" "^7.14.0" + flow-parser "^0.121.0" + jscodeshift "^0.13.1" + nullthrows "^1.1.1" + react-native-codegen@^0.0.6: version "0.0.6" resolved "https://registry.yarnpkg.com/react-native-codegen/-/react-native-codegen-0.0.6.tgz#b3173faa879cf71bfade8d030f9c4698388f6909" @@ -7880,7 +7996,7 @@ readable-stream@~2.3.6: string_decoder "~1.1.1" util-deprecate "~1.0.1" -recast@^0.20.3: +recast@^0.20.3, recast@^0.20.4: version "0.20.5" resolved "https://registry.yarnpkg.com/recast/-/recast-0.20.5.tgz#8e2c6c96827a1b339c634dd232957d230553ceae" integrity sha512-E5qICoPoNL4yU0H0NoBDntNB0Q5oMSNh9usFctYniLBluTthi3RsQVBXIJNbApOlvSwW/RGxIuokPcAc59J5fQ== @@ -8892,7 +9008,7 @@ temp@0.8.3: os-tmpdir "^1.0.0" rimraf "~2.2.6" -temp@^0.8.1: +temp@^0.8.1, temp@^0.8.4: version "0.8.4" resolved "https://registry.yarnpkg.com/temp/-/temp-0.8.4.tgz#8c97a33a4770072e0a05f919396c7665a7dd59f2" integrity sha512-s0ZZzd0BzYv5tLSptZooSjK8oj6C+c19p7Vqta9+6NPOf7r+fxq0cJe6/oN4LTC79sy5NY8ucOJNgwsKCSbfqg== From bcb2bc8b9e3f7806ce51d2da78a76b62e7dd4b72 Mon Sep 17 00:00:00 2001 From: Wojciech Lewicki Date: Tue, 30 Aug 2022 14:16:17 +0200 Subject: [PATCH 11/79] feat: remove ts ignore --- src/fabric/EllipseNativeComponent.ts | 1 - src/fabric/ForeignObjectNativeComponent.ts | 1 - src/fabric/GroupNativeComponent.ts | 1 - src/fabric/ImageNativeComponent.ts | 1 - src/fabric/LineNativeComponent.ts | 1 - src/fabric/LinearGradientNativeComponent.ts | 1 - src/fabric/MarkerNativeComponent.ts | 1 - src/fabric/MaskNativeComponent.ts | 1 - src/fabric/PathNativeComponent.ts | 1 - src/fabric/PatternNativeComponent.ts | 1 - src/fabric/RadialGradientNativeComponent.ts | 1 - src/fabric/RectNativeComponent.ts | 1 - src/fabric/SvgViewNativeComponent.ts | 1 - src/fabric/SymbolNativeComponent.ts | 1 - src/fabric/TSpanNativeComponent.ts | 1 - src/fabric/TextNativeComponent.ts | 1 - src/fabric/TextPathNativeComponent.ts | 1 - src/fabric/UseNativeComponent.ts | 1 - 18 files changed, 18 deletions(-) diff --git a/src/fabric/EllipseNativeComponent.ts b/src/fabric/EllipseNativeComponent.ts index 1be971101..2da7e9a9a 100644 --- a/src/fabric/EllipseNativeComponent.ts +++ b/src/fabric/EllipseNativeComponent.ts @@ -4,7 +4,6 @@ import type { Float, Int32, WithDefault, - // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { diff --git a/src/fabric/ForeignObjectNativeComponent.ts b/src/fabric/ForeignObjectNativeComponent.ts index e785f3590..9a474054e 100644 --- a/src/fabric/ForeignObjectNativeComponent.ts +++ b/src/fabric/ForeignObjectNativeComponent.ts @@ -4,7 +4,6 @@ import type { Float, Int32, WithDefault, - // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { diff --git a/src/fabric/GroupNativeComponent.ts b/src/fabric/GroupNativeComponent.ts index b5925eb2e..efc19a925 100644 --- a/src/fabric/GroupNativeComponent.ts +++ b/src/fabric/GroupNativeComponent.ts @@ -4,7 +4,6 @@ import type { Float, Int32, WithDefault, - // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { diff --git a/src/fabric/ImageNativeComponent.ts b/src/fabric/ImageNativeComponent.ts index 38c2efe5e..32eff4513 100644 --- a/src/fabric/ImageNativeComponent.ts +++ b/src/fabric/ImageNativeComponent.ts @@ -4,7 +4,6 @@ import type { Float, Int32, WithDefault, - // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; // @ts-ignore TODO: remove once there is a .d.ts file with definitions import type { ImageSource } from 'react-native/Libraries/Image/ImageSource'; diff --git a/src/fabric/LineNativeComponent.ts b/src/fabric/LineNativeComponent.ts index 396ea11ca..c5c63c479 100644 --- a/src/fabric/LineNativeComponent.ts +++ b/src/fabric/LineNativeComponent.ts @@ -4,7 +4,6 @@ import type { Float, Int32, WithDefault, - // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { diff --git a/src/fabric/LinearGradientNativeComponent.ts b/src/fabric/LinearGradientNativeComponent.ts index 1506394ba..1dbd83f93 100644 --- a/src/fabric/LinearGradientNativeComponent.ts +++ b/src/fabric/LinearGradientNativeComponent.ts @@ -4,7 +4,6 @@ import type { Float, Int32, WithDefault, - // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { diff --git a/src/fabric/MarkerNativeComponent.ts b/src/fabric/MarkerNativeComponent.ts index 2150c79c2..143e71e24 100644 --- a/src/fabric/MarkerNativeComponent.ts +++ b/src/fabric/MarkerNativeComponent.ts @@ -4,7 +4,6 @@ import type { Float, Int32, WithDefault, - // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { diff --git a/src/fabric/MaskNativeComponent.ts b/src/fabric/MaskNativeComponent.ts index 912cf794d..f301491f6 100644 --- a/src/fabric/MaskNativeComponent.ts +++ b/src/fabric/MaskNativeComponent.ts @@ -4,7 +4,6 @@ import type { Float, Int32, WithDefault, - // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { diff --git a/src/fabric/PathNativeComponent.ts b/src/fabric/PathNativeComponent.ts index 5acbc7d49..fee3c297f 100644 --- a/src/fabric/PathNativeComponent.ts +++ b/src/fabric/PathNativeComponent.ts @@ -4,7 +4,6 @@ import type { Float, Int32, WithDefault, - // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { diff --git a/src/fabric/PatternNativeComponent.ts b/src/fabric/PatternNativeComponent.ts index f8730ad45..1b5eca59a 100644 --- a/src/fabric/PatternNativeComponent.ts +++ b/src/fabric/PatternNativeComponent.ts @@ -4,7 +4,6 @@ import type { Float, Int32, WithDefault, - // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { diff --git a/src/fabric/RadialGradientNativeComponent.ts b/src/fabric/RadialGradientNativeComponent.ts index 34f1ebb9c..33b3d92ac 100644 --- a/src/fabric/RadialGradientNativeComponent.ts +++ b/src/fabric/RadialGradientNativeComponent.ts @@ -4,7 +4,6 @@ import type { Float, Int32, WithDefault, - // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { diff --git a/src/fabric/RectNativeComponent.ts b/src/fabric/RectNativeComponent.ts index c120a3703..1def344c6 100644 --- a/src/fabric/RectNativeComponent.ts +++ b/src/fabric/RectNativeComponent.ts @@ -4,7 +4,6 @@ import type { Float, Int32, WithDefault, - // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { diff --git a/src/fabric/SvgViewNativeComponent.ts b/src/fabric/SvgViewNativeComponent.ts index 1c1192ab4..2e31e7f1c 100644 --- a/src/fabric/SvgViewNativeComponent.ts +++ b/src/fabric/SvgViewNativeComponent.ts @@ -1,6 +1,5 @@ import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; import type { ViewProps, ColorValue } from 'react-native'; -// @ts-ignore TODO: remove once there is a .d.ts file with definitions import type { Float, Int32 } from 'react-native/Libraries/Types/CodegenTypes'; interface NativeProps extends ViewProps { diff --git a/src/fabric/SymbolNativeComponent.ts b/src/fabric/SymbolNativeComponent.ts index c611ce2f0..9ad1fadbb 100644 --- a/src/fabric/SymbolNativeComponent.ts +++ b/src/fabric/SymbolNativeComponent.ts @@ -4,7 +4,6 @@ import type { Float, Int32, WithDefault, - // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { diff --git a/src/fabric/TSpanNativeComponent.ts b/src/fabric/TSpanNativeComponent.ts index 9e12f732e..e4469606e 100644 --- a/src/fabric/TSpanNativeComponent.ts +++ b/src/fabric/TSpanNativeComponent.ts @@ -4,7 +4,6 @@ import type { Float, Int32, WithDefault, - // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { diff --git a/src/fabric/TextNativeComponent.ts b/src/fabric/TextNativeComponent.ts index e1d241f62..e4f45cf34 100644 --- a/src/fabric/TextNativeComponent.ts +++ b/src/fabric/TextNativeComponent.ts @@ -4,7 +4,6 @@ import type { Float, Int32, WithDefault, - // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { diff --git a/src/fabric/TextPathNativeComponent.ts b/src/fabric/TextPathNativeComponent.ts index 034bf89bb..a2ae15489 100644 --- a/src/fabric/TextPathNativeComponent.ts +++ b/src/fabric/TextPathNativeComponent.ts @@ -4,7 +4,6 @@ import type { Float, Int32, WithDefault, - // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { diff --git a/src/fabric/UseNativeComponent.ts b/src/fabric/UseNativeComponent.ts index 81d3d4e50..48890ece6 100644 --- a/src/fabric/UseNativeComponent.ts +++ b/src/fabric/UseNativeComponent.ts @@ -4,7 +4,6 @@ import type { Float, Int32, WithDefault, - // @ts-ignore TODO: remove once there is a .d.ts file with definitions } from 'react-native/Libraries/Types/CodegenTypes'; interface SvgNodeCommonProps { From 761b29d23f62154f696fb595258f22cf8a53dd0d Mon Sep 17 00:00:00 2001 From: Wojciech Lewicki Date: Tue, 30 Aug 2022 17:38:29 +0200 Subject: [PATCH 12/79] feat: add missing props in ClipPath and Defs --- src/fabric/ClipPathNativeComponent.ts | 53 ++++++++++++++++++++++++++- src/fabric/DefsNativeComponent.ts | 22 ++++++++++- 2 files changed, 72 insertions(+), 3 deletions(-) diff --git a/src/fabric/ClipPathNativeComponent.ts b/src/fabric/ClipPathNativeComponent.ts index 4e91d40ed..7c47cf00b 100644 --- a/src/fabric/ClipPathNativeComponent.ts +++ b/src/fabric/ClipPathNativeComponent.ts @@ -1,5 +1,5 @@ import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; -import type { ViewProps } from 'react-native'; +import type { ColorValue, ViewProps } from 'react-native'; import type { Float, Int32, @@ -21,6 +21,55 @@ interface SvgNodeCommonProps { display?: string; } -interface NativeProps extends ViewProps, SvgNodeCommonProps {} +type ColorStruct = Readonly<{ + type?: WithDefault; + value?: ColorValue; + brushRef?: string; +}>; + +interface SvgRenderableCommonProps { + fill?: ColorStruct; + fillOpacity?: WithDefault; + fillRule?: WithDefault; + stroke?: ColorStruct; + strokeOpacity?: WithDefault; + strokeWidth?: WithDefault; + strokeLinecap?: WithDefault; + strokeLinejoin?: WithDefault; + strokeDasharray?: ReadonlyArray; + strokeDashoffset?: Float; + strokeMiterlimit?: Float; + vectorEffect?: WithDefault; + propList?: ReadonlyArray; +} + +type FontObject = Readonly<{ + fontStyle?: string; + fontVariant?: string; + fontWeight?: string; + fontStretch?: string; + fontSize?: string; + fontFamily?: string; + textAnchor?: string; + textDecoration?: string; + letterSpacing?: string; + wordSpacing?: string; + kerning?: string; + fontFeatureSettings?: string; + fontVariantLigatures?: string; + fontVariationSettings?: string; +}>; + +type SvgGroupCommonProps = Readonly<{ + fontSize?: string; + fontWeight?: string; + font?: FontObject; +}>; + +interface NativeProps + extends ViewProps, + SvgNodeCommonProps, + SvgRenderableCommonProps, + SvgGroupCommonProps {} export default codegenNativeComponent('RNSVGClipPath'); diff --git a/src/fabric/DefsNativeComponent.ts b/src/fabric/DefsNativeComponent.ts index 6b5cd51db..8a1a86963 100644 --- a/src/fabric/DefsNativeComponent.ts +++ b/src/fabric/DefsNativeComponent.ts @@ -1,6 +1,26 @@ import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; import type { ViewProps } from 'react-native'; +import { + Float, + Int32, + WithDefault, +} from 'react-native/Libraries/Types/CodegenTypes'; -interface NativeProps extends ViewProps {} +interface SvgNodeCommonProps { + name?: string; + opacity?: WithDefault; + matrix?: ReadonlyArray; + // transform?: ____TransformStyle_Internal, // CATransform3D, custom handling + mask?: string; + markerStart?: string; + markerMid?: string; + markerEnd?: string; + clipPath?: string; + clipRule?: WithDefault; + responsible?: boolean; + display?: string; +} + +interface NativeProps extends ViewProps, SvgNodeCommonProps {} export default codegenNativeComponent('RNSVGDefs'); From 6d0d89ab40371196eb9b6bf93a425cea0a29d377 Mon Sep 17 00:00:00 2001 From: Wojciech Lewicki Date: Tue, 30 Aug 2022 18:50:08 +0200 Subject: [PATCH 13/79] feat: align clipPath and defs on iOS --- apple/ViewManagers/RNSVGClipPathManager.h | 4 ++-- apple/ViewManagers/RNSVGDefsManager.h | 6 ++---- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/apple/ViewManagers/RNSVGClipPathManager.h b/apple/ViewManagers/RNSVGClipPathManager.h index 111c7e420..eb4dd9693 100644 --- a/apple/ViewManagers/RNSVGClipPathManager.h +++ b/apple/ViewManagers/RNSVGClipPathManager.h @@ -6,8 +6,8 @@ * LICENSE file in the root directory of this source tree. */ -#import "RNSVGNodeManager.h" +#import "RNSVGGroupManager.h" -@interface RNSVGClipPathManager : RNSVGNodeManager +@interface RNSVGClipPathManager : RNSVGGroupManager @end diff --git a/apple/ViewManagers/RNSVGDefsManager.h b/apple/ViewManagers/RNSVGDefsManager.h index 591ba6806..3f2ecaf86 100644 --- a/apple/ViewManagers/RNSVGDefsManager.h +++ b/apple/ViewManagers/RNSVGDefsManager.h @@ -6,10 +6,8 @@ * LICENSE file in the root directory of this source tree. */ -#import +#import "RNSVGNodeManager.h" -@interface RNSVGDefsManager : RCTViewManager +@interface RNSVGDefsManager : RNSVGNodeManager @end - -#import "RNSVGNode.h" From 04cb78ef52dd8e8d405c17d339ce54343aac47bf Mon Sep 17 00:00:00 2001 From: Wojciech Lewicki Date: Tue, 30 Aug 2022 18:57:49 +0200 Subject: [PATCH 14/79] feat: remove redundant foreignObject method --- .../java/com/horcrux/svg/RenderableViewManager.java | 10 ---------- apple/Elements/RNSVGForeignObject.mm | 6 ------ apple/ViewManagers/RNSVGForeignObjectManager.mm | 2 -- src/fabric/ForeignObjectNativeComponent.ts | 2 -- 4 files changed, 20 deletions(-) diff --git a/android/src/main/java/com/horcrux/svg/RenderableViewManager.java b/android/src/main/java/com/horcrux/svg/RenderableViewManager.java index 7abb7d653..49e9c13d8 100644 --- a/android/src/main/java/com/horcrux/svg/RenderableViewManager.java +++ b/android/src/main/java/com/horcrux/svg/RenderableViewManager.java @@ -1652,16 +1652,6 @@ public void setY(ForeignObjectView view, @Nullable String value) { view.setY(value); } - @Override - public void setForeignObjectheight(ForeignObjectView view, @Nullable String value) { - view.setHeight(value); - } - - @Override - public void setForeignObjectwidth(ForeignObjectView view, @Nullable String value) { - view.setWidth(value); - } - @Override public void setHeight(ForeignObjectView view, @Nullable String value) { view.setHeight(value); diff --git a/apple/Elements/RNSVGForeignObject.mm b/apple/Elements/RNSVGForeignObject.mm index 9a9580927..23166e0db 100644 --- a/apple/Elements/RNSVGForeignObject.mm +++ b/apple/Elements/RNSVGForeignObject.mm @@ -49,12 +49,6 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const & self.y = RCTNSStringFromStringNilIfEmpty(newProps.y) ? [RNSVGLength lengthWithString:RCTNSStringFromString(newProps.y)] : nil; - if (RCTNSStringFromStringNilIfEmpty(newProps.foreignObjectheight)) { - self.foreignObjectheight = [RNSVGLength lengthWithString:RCTNSStringFromString(newProps.foreignObjectheight)]; - } - if (RCTNSStringFromStringNilIfEmpty(newProps.foreignObjectwidth)) { - self.foreignObjectwidth = [RNSVGLength lengthWithString:RCTNSStringFromString(newProps.foreignObjectwidth)]; - } if (RCTNSStringFromStringNilIfEmpty(newProps.height)) { self.foreignObjectheight = [RNSVGLength lengthWithString:RCTNSStringFromString(newProps.height)]; } diff --git a/apple/ViewManagers/RNSVGForeignObjectManager.mm b/apple/ViewManagers/RNSVGForeignObjectManager.mm index 51c585f74..36d0803d1 100644 --- a/apple/ViewManagers/RNSVGForeignObjectManager.mm +++ b/apple/ViewManagers/RNSVGForeignObjectManager.mm @@ -20,8 +20,6 @@ - (RNSVGForeignObject *)node RCT_EXPORT_VIEW_PROPERTY(x, RNSVGLength *) RCT_EXPORT_VIEW_PROPERTY(y, RNSVGLength *) -RCT_EXPORT_VIEW_PROPERTY(foreignObjectheight, RNSVGLength *) -RCT_EXPORT_VIEW_PROPERTY(foreignObjectwidth, RNSVGLength *) RCT_CUSTOM_VIEW_PROPERTY(height, id, RNSVGForeignObject) { view.foreignObjectheight = [RCTConvert RNSVGLength:json]; diff --git a/src/fabric/ForeignObjectNativeComponent.ts b/src/fabric/ForeignObjectNativeComponent.ts index 9a474054e..1a12b64fb 100644 --- a/src/fabric/ForeignObjectNativeComponent.ts +++ b/src/fabric/ForeignObjectNativeComponent.ts @@ -73,8 +73,6 @@ interface NativeProps SvgGroupCommonProps { x?: string; y?: string; - foreignObjectheight?: string; - foreignObjectwidth?: string; height?: string; width?: string; } From e624edfe5b3d722894251b1666fe3fb49253a52b Mon Sep 17 00:00:00 2001 From: Wojciech Lewicki Date: Tue, 30 Aug 2022 20:42:52 +0200 Subject: [PATCH 15/79] feat: remove redundant image props --- .../java/com/horcrux/svg/RenderableViewManager.java | 10 ---------- apple/Elements/RNSVGImage.mm | 6 ------ apple/ViewManagers/RNSVGImageManager.mm | 2 -- src/fabric/ImageNativeComponent.ts | 2 -- 4 files changed, 20 deletions(-) diff --git a/android/src/main/java/com/horcrux/svg/RenderableViewManager.java b/android/src/main/java/com/horcrux/svg/RenderableViewManager.java index 49e9c13d8..17c4125b0 100644 --- a/android/src/main/java/com/horcrux/svg/RenderableViewManager.java +++ b/android/src/main/java/com/horcrux/svg/RenderableViewManager.java @@ -1004,16 +1004,6 @@ public void setY(ImageView view, @Nullable String value) { view.setY(value); } - @Override - public void setImagewidth(ImageView view, @Nullable String value) { - view.setWidth(value); - } - - @Override - public void setImageheight(ImageView view, @Nullable String value) { - view.setHeight(value); - } - @Override public void setWidth(ImageView view, @Nullable String value) { view.setWidth(value); diff --git a/apple/Elements/RNSVGImage.mm b/apple/Elements/RNSVGImage.mm index d02ff0cce..97a7d38ea 100644 --- a/apple/Elements/RNSVGImage.mm +++ b/apple/Elements/RNSVGImage.mm @@ -74,12 +74,6 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const & self.x = [RNSVGLength lengthWithString:RCTNSStringFromString(newProps.x)]; self.y = [RNSVGLength lengthWithString:RCTNSStringFromString(newProps.y)]; - if (RCTNSStringFromStringNilIfEmpty(newProps.imageheight)) { - self.imageheight = [RNSVGLength lengthWithString:RCTNSStringFromString(newProps.imageheight)]; - } - if (RCTNSStringFromStringNilIfEmpty(newProps.imagewidth)) { - self.imagewidth = [RNSVGLength lengthWithString:RCTNSStringFromString(newProps.imagewidth)]; - } if (RCTNSStringFromStringNilIfEmpty(newProps.height)) { self.imageheight = [RNSVGLength lengthWithString:RCTNSStringFromString(newProps.height)]; } diff --git a/apple/ViewManagers/RNSVGImageManager.mm b/apple/ViewManagers/RNSVGImageManager.mm index 4c03bac68..2a8fab735 100644 --- a/apple/ViewManagers/RNSVGImageManager.mm +++ b/apple/ViewManagers/RNSVGImageManager.mm @@ -25,8 +25,6 @@ - (RNSVGRenderable *)node RCT_EXPORT_VIEW_PROPERTY(x, RNSVGLength *) RCT_EXPORT_VIEW_PROPERTY(y, RNSVGLength *) -RCT_EXPORT_VIEW_PROPERTY(imagewidth, RNSVGLength *) -RCT_EXPORT_VIEW_PROPERTY(imageheight, RNSVGLength *) RCT_CUSTOM_VIEW_PROPERTY(width, id, RNSVGImage) { view.imagewidth = [RCTConvert RNSVGLength:json]; diff --git a/src/fabric/ImageNativeComponent.ts b/src/fabric/ImageNativeComponent.ts index 32eff4513..dae9ee8b1 100644 --- a/src/fabric/ImageNativeComponent.ts +++ b/src/fabric/ImageNativeComponent.ts @@ -51,8 +51,6 @@ interface NativeProps SvgRenderableCommonProps { x?: string; y?: string; - imagewidth?: string; - imageheight?: string; width?: string; height?: string; src?: ImageSource; From 5d4af814b06631d59913938e78510422776bbb5b Mon Sep 17 00:00:00 2001 From: Wojciech Lewicki Date: Tue, 30 Aug 2022 21:09:04 +0200 Subject: [PATCH 16/79] feat: remove redundant props in all components --- FabricExample/src/App.tsx | 253 ++++-------------- .../horcrux/svg/RenderableViewManager.java | 44 +-- apple/Elements/RNSVGMask.mm | 6 - apple/Elements/RNSVGPattern.mm | 6 - apple/Elements/RNSVGUse.mm | 6 - apple/Shapes/RNSVGRect.mm | 6 - apple/ViewManagers/RNSVGMaskManager.mm | 2 - apple/ViewManagers/RNSVGPatternManager.mm | 2 - apple/ViewManagers/RNSVGRectManager.mm | 2 - apple/ViewManagers/RNSVGUseManager.mm | 2 - src/fabric/MaskNativeComponent.ts | 2 - src/fabric/PatternNativeComponent.ts | 2 - src/fabric/RectNativeComponent.ts | 2 - src/fabric/UseNativeComponent.ts | 2 - 14 files changed, 49 insertions(+), 288 deletions(-) diff --git a/FabricExample/src/App.tsx b/FabricExample/src/App.tsx index 7ed84db50..630f66663 100644 --- a/FabricExample/src/App.tsx +++ b/FabricExample/src/App.tsx @@ -1,211 +1,52 @@ -/** - * Sample React Native App for react-native-svg library - * https://github.com/magicismight/react-native-svg/tree/master/Example - */ -'use strict'; - -import React, {Component} from 'react'; -import { - Dimensions, - StyleSheet, - Text, - View, - ScrollView, - TouchableHighlight, - TouchableOpacity, -} from 'react-native'; -import {Modal} from 'react-native'; -import {Svg, Circle, Line} from 'react-native-svg'; - -import * as examples from './examples'; - -const hairline = StyleSheet.hairlineWidth; - -const styles = StyleSheet.create({ - container: { - flex: 1, - paddingTop: 20, - alignItems: 'center', - overflow: 'hidden', - }, - contentContainer: { - alignSelf: 'stretch', - borderTopWidth: hairline, - borderTopColor: '#ccc', - borderBottomWidth: hairline, - borderBottomColor: '#ccc', - flexWrap: 'wrap', - flexDirection: 'row', - marginHorizontal: 10, - }, - welcome: { - padding: 10, - color: '#f60', - fontSize: 18, - fontWeight: 'bold', - }, - link: { - height: 40, - alignSelf: 'stretch', - width: Dimensions.get('window').width / 2 - 10, - }, - title: { - marginLeft: 10, - }, - cell: { - height: 40, - paddingHorizontal: 10, - alignSelf: 'stretch', - alignItems: 'center', - flexDirection: 'row', - borderTopWidth: hairline, - borderTopColor: '#ccc', - marginTop: -hairline, - backgroundColor: 'transparent', - }, - close: { - position: 'absolute', - right: 20, - top: 40, - }, - scroll: { - position: 'absolute', - top: 30, - right: 10, - bottom: 20, - left: 10, - backgroundColor: '#fff', - }, - scrollContent: { - borderTopWidth: hairline, - borderTopColor: '#ccc', - }, - example: { - paddingVertical: 25, - alignSelf: 'stretch', - alignItems: 'center', - borderBottomWidth: hairline, - borderBottomColor: '#ccc', - }, - sampleTitle: { - marginHorizontal: 15, - fontSize: 16, - color: '#666', - }, -}); - -const names = [ - 'Svg', - 'Stroking', - 'Path', - 'Line', - 'Rect', - 'Polygon', - 'Polyline', - 'Circle', - 'Ellipse', - 'G', - 'Text', - 'Gradients', - 'Clipping', - 'Image', - 'TouchEvents', - 'PanResponder', - 'Reusable', +import { Button, View } from 'react-native'; + +const components = [ + // [ 'RNSVGCircle', require('../../lib/module/fabric/CircleNativeComponent')], + // [ 'RNSVGClipPath' , require('../../lib/module/fabric/ClipPathNativeComponent')], + // [ 'RNSVGDefs', require('../../lib/module/fabric/DefsNativeComponent')], + // [ 'RNSVGEllipse', require('../../lib/module/fabric/EllipseNativeComponent')], + // [ 'RNSVGForeignObject', require('../../lib/module/fabric/ForeignObjectNativeComponent')], + // [ 'RNSVGGroup', require('../../lib/module/fabric/GroupNativeComponent')], + // [ 'RNSVGImage', require('../../lib/module/fabric/ImageNativeComponent')], + // [ 'RNSVGLine', require('../../lib/module/fabric/LineNativeComponent')], + // [ 'RNSVGLinearGradient', require('../../lib/module/fabric/LinearGradientNativeComponent')], + // [ 'RNSVGMarker', require('../../lib/module/fabric/MarkerNativeComponent')], + // [ 'RNSVGMask', require('../../lib/module/fabric/MaskNativeComponent')], + // [ 'RNSVGPath', require('../../lib/module/fabric/PathNativeComponent')], + // [ 'RNSVGPattern', require('../../lib/module/fabric/PatternNativeComponent')], + // [ 'RNSVGRadialGradient', require('../../lib/module/fabric/RadialGradientNativeComponent')], + // [ 'RNSVGRect', require('../../lib/module/fabric/RectNativeComponent')], + // [ 'RNSVGSvgView', require('../../lib/module/fabric/SvgViewNativeComponent')], + // [ 'RNSVGSymbol', require('../../lib/module/fabric/SymbolNativeComponent')], + // [ 'RNSVGTSpan', require('../../lib/module/fabric/TSpanNativeComponent')], + // [ 'RNSVGText', require('../../lib/module/fabric/TextNativeComponent')], + // [ 'RNSVGTextPath', require('../../lib/module/fabric/TextPathNativeComponent')], + [ 'RNSVGUse', require('../../lib/module/fabric/UseNativeComponent')], ]; -const initialState = { - modal: false, - content: null, -}; - -export default class SvgExample extends Component { - state: { - content: React.ReactNode; - modal: boolean; - scroll?: boolean; - } = initialState; +const StaticViewConfigValidator = require('react-native/Libraries/NativeComponent/StaticViewConfigValidator'); +const {createViewConfig} = require('react-native/Libraries/NativeComponent/ViewConfig'); +const getNativeComponentAttributes = require('react-native/Libraries/ReactNative/getNativeComponentAttributes'); + +function validate() { + for (const component of components) { + const [componentName, {__INTERNAL_VIEW_CONFIG: partialStaticViewConfig}] = component; + const staticViewConfig = createViewConfig(partialStaticViewConfig); + // console.log(staticViewConfig); + const nativeViewConfig = getNativeComponentAttributes(componentName); + // console.log(nativeViewConfig); + const result = StaticViewConfigValidator.validate(componentName, nativeViewConfig, staticViewConfig); + // console.log(result); + // if (result.invalid) { + console.log(StaticViewConfigValidator.stringifyValidationResult(componentName, result)); + // } - show = name => { - if (this.state.modal) { - return; - } - let example = examples[name]; - if (example) { - let samples = example.samples; - this.setState({ - modal: true, - content: ( - - {samples.map((Sample, i) => ( - - {Sample.title} - - - ))} - - ), - scroll: example.scroll !== false, - }); - } - }; - - hide = () => { - this.setState(initialState); - }; - - getExamples = () => { - return names.map(name => { - var icon; - let example = examples[name]; - if (example) { - icon = example.icon; - } - return ( - this.show(name)}> - - {icon} - {name} - - - ); - }); - }; - - modalContent = () => ( - <> - - {this.state.content} - - - - - - - - - - - - ); - - render() { - if (this.state.modal) { - return this.modalContent(); - } else { - return ( - - SVG library for React Apps - {this.getExamples()} - - ); - } } } + +export default function Playground() { + return ( + +