fix: add support for 'verticalAlign' prop

.eslintignore

@@ -9,3 +9,4 @@ android/
 apple/
 windows/
 src/lib/extract/transform.js
+src/lib/extract/verticalAlign.js

android/src/main/java/com/horcrux/svg/RenderableViewManager.java

@@ -687,11 +687,6 @@ public void setBaselineShift(K node, Dynamic baselineShift) {
       node.setBaselineShift(baselineShift);
     }
 
-    @ReactProp(name = "verticalAlign")
-    public void setVerticalAlign(K node, @Nullable Dynamic verticalAlign) {
-      node.setVerticalAlign(verticalAlign);
-    }
-
     @ReactProp(name = "rotate")
     public void setRotate(K node, Dynamic rotate) {
       node.setRotate(rotate);

android/src/main/java/com/horcrux/svg/TextView.java

@@ -80,28 +80,6 @@ public void setBaselineShift(Dynamic baselineShift) {
     invalidate();
   }
 
-  public void setVerticalAlign(Dynamic dynamicVerticalAlign) {
-    String verticalAlign = SVGLength.toString(dynamicVerticalAlign);
-    if (verticalAlign != null) {
-      verticalAlign = verticalAlign.trim();
-      int i = verticalAlign.lastIndexOf(' ');
-      try {
-        mAlignmentBaseline = AlignmentBaseline.getEnum(verticalAlign.substring(i));
-      } catch (IllegalArgumentException e) {
-        mAlignmentBaseline = AlignmentBaseline.baseline;
-      }
-      try {
-        mBaselineShift = verticalAlign.substring(0, i);
-      } catch (IndexOutOfBoundsException e) {
-        mBaselineShift = null;
-      }
-    } else {
-      mAlignmentBaseline = AlignmentBaseline.baseline;
-      mBaselineShift = null;
-    }
-    invalidate();
-  }
-
   public void setRotate(Dynamic rotate) {
     mRotate = SVGLength.arrayFrom(rotate);
     invalidate();

android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTSpanManagerDelegate.java

@@ -145,9 +145,6 @@ public void setProperty(T view, String propName, @Nullable Object value) {
       case "alignmentBaseline":
         mViewManager.setAlignmentBaseline(view, value == null ? null : (String) value);
         break;
-      case "verticalAlign":
-        mViewManager.setVerticalAlign(view, new DynamicFromObject(value));
-        break;
       case "content":
         mViewManager.setContent(view, value == null ? null : (String) value);
         break;

android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTSpanManagerInterface.java

@@ -55,6 +55,5 @@ public interface RNSVGTSpanManagerInterface<T extends View> {
   void setBaselineShift(T view, Dynamic value);
   void setLengthAdjust(T view, @Nullable String value);
   void setAlignmentBaseline(T view, @Nullable String value);
-  void setVerticalAlign(T view, Dynamic value);
   void setContent(T view, @Nullable String value);
 }

android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTextManagerDelegate.java

@@ -145,9 +145,6 @@ public void setProperty(T view, String propName, @Nullable Object value) {
       case "alignmentBaseline":
         mViewManager.setAlignmentBaseline(view, value == null ? null : (String) value);
         break;
-      case "verticalAlign":
-        mViewManager.setVerticalAlign(view, new DynamicFromObject(value));
-        break;
       default:
         super.setProperty(view, propName, value);
     }

android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTextManagerInterface.java

@@ -55,5 +55,4 @@ public interface RNSVGTextManagerInterface<T extends View> {
   void setBaselineShift(T view, Dynamic value);
   void setLengthAdjust(T view, @Nullable String value);
   void setAlignmentBaseline(T view, @Nullable String value);
-  void setVerticalAlign(T view, Dynamic value);
 }

android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTextPathManagerDelegate.java

@@ -145,9 +145,6 @@ public void setProperty(T view, String propName, @Nullable Object value) {
       case "alignmentBaseline":
         mViewManager.setAlignmentBaseline(view, value == null ? null : (String) value);
         break;
-      case "verticalAlign":
-        mViewManager.setVerticalAlign(view, new DynamicFromObject(value));
-        break;
       case "href":
         mViewManager.setHref(view, value == null ? null : (String) value);
         break;

android/src/paper/java/com/facebook/react/viewmanagers/RNSVGTextPathManagerInterface.java

@@ -55,7 +55,6 @@ public interface RNSVGTextPathManagerInterface<T extends View> {
   void setBaselineShift(T view, Dynamic value);
   void setLengthAdjust(T view, @Nullable String value);
   void setAlignmentBaseline(T view, @Nullable String value);
-  void setVerticalAlign(T view, Dynamic value);
   void setHref(T view, @Nullable String value);
   void setSide(T view, @Nullable String value);
   void setMethod(T view, @Nullable String value);

apple/ViewManagers/RNSVGTextManager.mm

@@ -60,7 +60,6 @@ - (RNSVGRenderable *)node
 }
 RCT_EXPORT_VIEW_PROPERTY(lengthAdjust, NSString)
 RCT_EXPORT_VIEW_PROPERTY(alignmentBaseline, NSString)
-RCT_EXPORT_VIEW_PROPERTY(verticalAlign, NSString) // unused on iOS
 
 RCT_CUSTOM_VIEW_PROPERTY(fontSize, id, RNSVGText)
 {

apps/common/test/Test2475.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import Svg, {Line, Text} from 'react-native-svg';
+
+const testCases = [
+  {
+    label: 'baseline',
+    alignmentBaseline: 'baseline',
+    baselineShift: '0',
+  },
+  {label: 'middle', alignmentBaseline: 'middle', baselineShift: '0'},
+  {label: 'central', alignmentBaseline: 'central', baselineShift: '0'},
+  {
+    label: 'text-top',
+    alignmentBaseline: 'text-top',
+    baselineShift: '0',
+  },
+  {
+    label: 'text-bottom',
+    alignmentBaseline: 'text-bottom',
+    baselineShift: '0',
+  },
+  {label: 'sub', alignmentBaseline: 'baseline', baselineShift: 'sub'},
+  {label: 'super', alignmentBaseline: 'baseline', baselineShift: 'super'},
+  {label: '15px shift', alignmentBaseline: 'baseline', baselineShift: '15px'},
+  {
+    label: '-15px shift',
+    alignmentBaseline: 'baseline',
+    baselineShift: '-15px',
+  },
+];
+
+export default () => {
+  return (
+    <Svg height="500" width="200">
+      {testCases.map((t, i) => {
+        const y = 50 + i * 50;
+        const verticalAlign = `${t.alignmentBaseline} ${t.baselineShift}`;
+
+        return (
+          <React.Fragment key={i}>
+            <Line
+              x1="0"
+              y1={y}
+              x2="600"
+              y2={y}
+              stroke="darkgray"
+              strokeDasharray="4,4"
+            />
+            <Text
+              x="50"
+              y={y}
+              fontSize="20"
+              verticalAlign={verticalAlign}
+              transform="translate(20)"
+              fill="black">
+              {t.label}
+            </Text>
+          </React.Fragment>
+        );
+      })}
+    </Svg>
+  );
+};

package.json

@@ -54,7 +54,7 @@
     "format-js": "prettier --write README.md CONTRIBUTING.md CODE_OF_CONDUCT.md USAGE.md ./src/**/*.{ts,tsx} ./apps/**/*.{ts,tsx}",
     "jest": "jest",
     "lint": "eslint --ext .ts,.tsx src",
-    "peg": "pegjs -o src/lib/extract/transform.js ./src/lib/extract/transform.peg && peggy -o src/filter-image/extract/extractFiltersString.js src/filter-image/extract/extractFiltersString.pegjs && peggy -o src/lib/extract/transformToRn.js src/lib/extract/transformToRn.pegjs",
+    "peg": "pegjs -o src/lib/extract/transform.js ./src/lib/extract/transform.peg && peggy -o src/filter-image/extract/extractFiltersString.js src/filter-image/extract/extractFiltersString.pegjs && peggy -o src/lib/extract/transformToRn.js src/lib/extract/transformToRn.pegjs && peggy -o src/lib/extract/verticalAlign.js src/lib/extract/verticalAlign.pegjs",
     "prepare": "npm run bob && husky install",
     "release": "npm login && release-it",
     "test": "npm run lint && npm run tsc",

src/fabric/TSpanNativeComponent.ts

@@ -66,7 +66,6 @@ interface SvgTextCommonProps {
   baselineShift?: UnsafeMixed<NumberProp>;
   lengthAdjust?: string;
   alignmentBaseline?: string;
-  verticalAlign?: UnsafeMixed<NumberProp>;
 }
 
 interface NativeProps

src/fabric/TextNativeComponent.ts

@@ -66,7 +66,6 @@ interface SvgTextCommonProps {
   baselineShift?: UnsafeMixed<NumberProp>;
   lengthAdjust?: string;
   alignmentBaseline?: string;
-  verticalAlign?: UnsafeMixed<NumberProp>;
 }
 
 interface NativeProps

src/fabric/TextPathNativeComponent.ts

@@ -66,7 +66,6 @@ interface SvgTextCommonProps {
   baselineShift?: UnsafeMixed<NumberProp>;
   lengthAdjust?: string;
   alignmentBaseline?: string;
-  verticalAlign?: UnsafeMixed<NumberProp>;
 }
 interface NativeProps
   extends ViewProps,

src/lib/extract/extractText.tsx

@@ -4,6 +4,7 @@ import { Children } from 'react';
 import extractLengthList from './extractLengthList';
 import { pickNotNil } from '../util';
 import type { NumberArray, NumberProp } from './types';
+import { parse as parseVerticalAlign } from './verticalAlign';
 
 const fontRegExp =
   /^\s*((?:(?:normal|bold|italic)\s+)*)(?:(\d+(?:\.\d+)?(?:%|px|em|pt|pc|mm|cm|in]))*(?:\s*\/.*?)?\s+)?\s*"?([^"]*)/i;
@@ -146,18 +147,18 @@ export type TextProps = {
 } & fontProps;
 
 export default function extractText(props: TextProps, container: boolean) {
-  const {
-    x,
-    y,
-    dx,
-    dy,
-    rotate,
-    children,
-    inlineSize,
-    baselineShift,
-    verticalAlign,
-    alignmentBaseline,
-  } = props;
+  const { x, y, dx, dy, rotate, children, inlineSize, verticalAlign } = props;
+  let baselineShift, alignmentBaseline;
+
+  if (verticalAlign) {
+    const { baselineShift: parsedShift, alignmentBaseline: parsedAlign } =
+      parseVerticalAlign(String(verticalAlign));
+    baselineShift = parsedShift;
+    alignmentBaseline = parsedAlign;
+  }
+
+  baselineShift = props.baselineShift ?? baselineShift;
+  alignmentBaseline = props.alignmentBaseline ?? alignmentBaseline;
 
   const textChildren =
     typeof children === 'string' || typeof children === 'number' ? (
@@ -175,7 +176,6 @@ export default function extractText(props: TextProps, container: boolean) {
     children: textChildren,
     inlineSize,
     baselineShift,
-    verticalAlign,
     alignmentBaseline,
     font: extractFont(props),
     x: extractLengthList(x),

src/lib/extract/verticalAlign.d.ts

@@ -0,0 +1,9 @@
+import { AlignmentBaseline } from './types';
+
+export function parse(
+  verticalAlign: string,
+  options?: object
+): {
+  alignmentBaseline: AlignmentBaseline | null;
+  baselineShift: string | null;
+};