Fix font PropTypes

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

@@ -122,10 +122,11 @@ class TSpanShadowNode extends TextShadowNode {
         ReadableMap font = gc.getFont();
         applyTextPropertiesToPaint(paint, font);
 
-        double offset = 0;
         double distance = 0;
         double renderMethodScaling = 1;
         final double textMeasure = paint.measureText(line);
+        double offset = font.hasKey(TEXT_ANCHOR) ?
+            getTextAnchorShift(textMeasure, font.getString(TEXT_ANCHOR)) : 0;
 
         PathMeasure pm = null;
         if (textPath != null) {
@@ -133,7 +134,7 @@ class TSpanShadowNode extends TextShadowNode {
             distance = pm.getLength();
             final double size = gc.getFontSize();
             final String startOffset = textPath.getStartOffset();
-            offset = PropHelper.fromRelative(startOffset, distance, 0, mScale, size);
+            offset += PropHelper.fromRelative(startOffset, distance, 0, mScale, size);
             // String spacing = textPath.getSpacing(); // spacing = "auto | exact"
             final String method = textPath.getMethod(); // method = "align | stretch"
             if (STRETCH.equals(method)) {
@@ -141,10 +142,6 @@ class TSpanShadowNode extends TextShadowNode {
             }
         }
 
-        if (font.hasKey(TEXT_ANCHOR)) {
-            offset += getTextAnchorShift(textMeasure, font.getString(TEXT_ANCHOR));
-        }
-
         double x;
         double y;
         double r;
@@ -231,6 +228,11 @@ class TSpanShadowNode extends TextShadowNode {
 
                 assert pm != null;
                 pm.getMatrix((float) midpoint, matrix, POSITION_MATRIX_FLAG | TANGENT_MATRIX_FLAG);
+                // TODO In the calculation above, if either the startpoint-on-the-path
+                // or the endpoint-on-the-path is off the end of the path,
+                // then extend the path beyond its end points with a straight line
+                // that is parallel to the tangent at the path at its end point
+                // so that the midpoint-on-the-path can still be calculated.
 
                 matrix.preTranslate((float) -halfGlyphWidth, (float) dy);
                 matrix.preScale((float) renderMethodScaling, (float) renderMethodScaling);

elements/TSpan.js

@@ -14,8 +14,8 @@ export default class extends Shape {
     static propTypes = {
         ...pathProps,
         ...fontProps,
-        dx: numberProp,
-        dy: numberProp,
+        dx: PropTypes.string,
+        dy: PropTypes.string,
     };
 
     static childContextTypes = {

elements/Text.js

@@ -13,8 +13,8 @@ export default class extends Shape {
     static propTypes = {
         ...pathProps,
         ...fontProps,
-        dx: numberProp,
-        dy: numberProp,
+        dx: PropTypes.string,
+        dy: PropTypes.string,
     };
 
     static childContextTypes = {

elements/TextPath.js

@@ -19,7 +19,7 @@ export default class extends Shape {
         href: PropTypes.string.isRequired,
         method: PropTypes.oneOf(['align', 'stretch']),
         spacing: PropTypes.oneOf(['auto', 'exact']),
-        startOffset: numberProp
+        startOffset: PropTypes.string
     };
 
     render() {

lib/extract/extractText.js

@@ -44,33 +44,37 @@ function parseFontString(font) {
 
 export function extractFont(props) {
     const {
-        letterSpacing,
-        wordSpacing,
-        fontWeight,
         fontStyle,
-        kerning,
+        fontVariant,
+        fontWeight,
+        fontStretch,
         textAnchor,
         textDecoration,
+        letterSpacing,
+        wordSpacing,
+        kerning,
     } = props;
     let {
-        font,
         fontSize,
         fontFamily,
+        font,
     } = props;
 
     fontFamily = extractSingleFontFamily(fontFamily);
     fontSize = fontSize ?  '' + fontSize : null;
 
     const ownedFont = _.pickBy({
-        fontFamily,
-        letterSpacing,
-        wordSpacing,
-        fontWeight,
         fontStyle,
+        fontVariant,
+        fontWeight,
+        fontStretch,
         fontSize,
-        kerning,
+        fontFamily,
         textAnchor,
         textDecoration,
+        letterSpacing,
+        wordSpacing,
+        kerning,
     }, prop => !_.isNil(prop));
 
     if (typeof font === 'string') {

lib/props.js

@@ -48,17 +48,83 @@ const strokeProps = {
     strokeMiterlimit: numberProp
 };
 
+// normal | italic | oblique | inherit
+// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-style
+const fontStyle = PropTypes.oneOf(['normal', 'italic', 'oblique']);
+
+// normal | small-caps | inherit
+// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-variant
+const fontVariant = PropTypes.oneOf(['normal', 'small-caps']);
+
+// normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
+// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-weight
+const fontWeight = PropTypes.oneOf(['normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900']);
+
+// normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit
+// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-stretch
+const fontStretch = PropTypes.oneOf(['normal', 'wider', 'narrower', 'ultra-condensed', 'extra-condensed', 'condensed', 'semi-condensed', 'semi-expanded', 'expanded', 'extra-expanded', 'ultra-expanded']);
+
+// <absolute-size> | <relative-size> | <length> | <percentage> | inherit
+// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-size
+const fontSize = PropTypes.string;
+
+// [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>] | inherit
+// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-family
+const fontFamily = PropTypes.string;
+
+/*
+    font syntax [ [ <'font-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar
+    where <font-variant-css21> = [ normal | small-caps ]
+
+    Shorthand property for setting ‘font-style’, ‘font-variant’,
+    ‘font-weight’, ‘font-size’, ‘line-height’ and ‘font-family’.
+
+    The ‘line-height’ property has no effect on text layout in SVG.
+
+    Note: for the purposes of processing the ‘font’ property in SVG,
+    'line-height' is assumed to be equal the value for property ‘font-size’
+
+    https://www.w3.org/TR/SVG11/text.html#FontProperty
+    https://developer.mozilla.org/en-US/docs/Web/CSS/font
+    https://drafts.csswg.org/css-fonts-3/#font-prop
+    https://www.w3.org/TR/CSS2/fonts.html#font-shorthand
+    https://www.w3.org/TR/CSS1/#font
+*/
+const font = PropTypes.object;
+
+// start | middle | end | inherit
+// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor
+const textAnchor = PropTypes.oneOf(['start', 'middle', 'end', 'inherit']);
+
+// none | underline | overline | line-through | blink | inherit
+// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-decoration
+const textDecoration = PropTypes.oneOf(['none', 'underline', 'overline', 'line-through', 'blink']);
+
+// normal | <length> | inherit
+// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/letter-spacing
+const letterSpacing = PropTypes.string;
+
+// normal | <length> | inherit
+// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/word-spacing
+const wordSpacing = PropTypes.string;
+
+// auto | <length> | inherit
+// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/kerning
+const kerning = PropTypes.string;
+
 const fontProps = {
-    fontFamily: PropTypes.string,
-    fontSize: numberProp,
-    fontWeight: numberProp,
-    fontStyle: PropTypes.string,
-    textAnchor: PropTypes.string,
-    textDecoration: PropTypes.string,
-    letterSpacing: PropTypes.string,
-    wordSpacing: PropTypes.string,
-    kerning: PropTypes.string,
-    font: PropTypes.object
+    fontStyle,
+    fontVariant,
+    fontWeight,
+    fontStretch,
+    fontSize,
+    fontFamily,
+    textAnchor,
+    textDecoration,
+    letterSpacing,
+    wordSpacing,
+    kerning,
+    font
 };
 
 const transformProps = {