Text TSpan dy behaves differently on Android and iOS

Notice the relative size difference between the text and the <Rect/> on iOS and Android:

import React from 'react';
import { View } from 'react-native';
import Svg, { Rect, Text, TSpan } from "react-native-svg";

export default class App extends React.Component {
  render() {
    return (
      <View>
      <Svg
          height="160"
          width="200"
      >
          <Rect fill="blue" x="0" y="25" width="5" height="42" />
          <Text y="20" dx="5 5">
              <TSpan x="10" >tspan line 1</TSpan>
              <TSpan x="10" dy="15">tspan line 2</TSpan>
              <TSpan x="10" dx="10" dy="15">tspan line 3</TSpan>
          </Text>
      </Svg>
      </View>
    );
  }
}

[msand]

@chrisbolin I have letter-spacing and kerning implemented now as well (even chrome doesn’t support the kerning attribute in svg yet). I’ve removed all magical constant and other strange things.

It is now possible to make it render similar output in both chrome and react-native in android, but native sometimes needs different font-size, letter-spacing, and start-offset values, seemingly depending on the length of the path referenced in the href attribute of the textpath element.

Except for that, it now seems at least possible to get essentially pixel perfect results for text, tspan and textpath, merely requiring scaling of some values for the native rendering.

[msand]

@chrisbolin @gpeal @OzoTek There is now a new version and pull request, with some of the fixes from android ported to ios: https://github.com/react-native-community/react-native-svg/pull/430