letterSpacing (and kerning) making text go off-centred

I’m trying to space out my text a bit because it looks a little crunched when tying to render it in a circular arc shape. However, it seems that any calculations regarding the origin point to start drawing text is computed without taking letterSpacing or kerning into account.

For example, here is my component:

import React from 'react';
import Svg, { Circle, Defs, G, Path, Text, TextPath } from 'react-native-svg';

const Medallion = props => {
  const upperArc  = 'M-40.97502384803651,-1.4308810757150652A41,41,0,0,1,40.97502384803651,-1.4308810757150694A41,41,0,0,0,-40.97502384803651,-1.4308810757150652Z'
  const upperPath = 'M-40.97502384803651,-1.4308810757150652A41,41,0,0,1,40.97502384803651,-1.4308810757150694';

  const lowerArc  = 'M-48.97015053189642,1.7100751104568743A49,49,0,0,0,48.97015037316634,1.7100796558864861A49,49,0,0,1,-48.97015053189642,1.7100751104568743Z';
  const lowerPath = 'M-48.97015053189642,1.7100751104568743A49,49,0,0,0,48.97015037316634,1.7100796558864861';

  return (
    <Svg width={114} height={114}>
      <Defs>
        <Path id="upperPath" d={upperPath} />
        <Path id="lowerPath" d={lowerPath} />
      </Defs>
      <Circle cx={57} cy={57} r={57} fill="blue" />
      <Text
        x={57}
        y={57 + 10}
        textAnchor="middle"
        fill="white"
        fontWeight="bold"
        fontSize={10}
        letterSpacing="2"
      >
        This is a test
      </Text>
      <G x={57} y={57}>
        <Path d={upperArc} stroke="pink" />
        <Path d={lowerArc} stroke="pink" />
        <Text fill="white" stroke="white" fontSize={12} textAnchor="middle">
          <TextPath href="#upperPath" startOffset="50%">
            No letterSpacing
          </TextPath>
        </Text>
        <Text
          fill="white"
          stroke="white"
          fontSize={12}
          textAnchor="middle"
          letterSpacing="2"
        >
          <TextPath href="#lowerPath" startOffset="50%">
            This is a test
          </TextPath>
        </Text>
      </G>
    </Svg>
  );
};

export default Medallion;

I draw upperArc and lowerArc paths so that you can see the path I’m using to draw my text. I’ve removed the inner arc (equal to outer arc) to actually draw the text so that I don’t get wrap around. This is the result:

You can see from the output that the text drawn with Text in the middle of the circle is off-centred as well as the text on the lower arc. Both of these have letterSpacing="2" (which, if I remove, would make the text centred again).

I’ve tried something similar with JS + D3 + SVG in a browser environment and it works as expected, staying centred. Any idea what is going on here and how I can work around it?

[oleksandr-dziuban]

Thank you

[oleksandr-dziuban]

@msand Checked, it works fine for my case! Text alignment works perfectly on iOS/Android, checked with <Text> + few <TSpan> inside with letterSpacing + textAnchor=“middle”. Please merge these changes to master and publish new npm package version. Thank you