Single TSpan misplaced after forced rerender

Using TSpans, the position of the text does not match the expected position after rerendering. In this example, we force the “!” to be rerendered by changing its color, which unexpectedly changes its position on screen, too, while the other TSpans remain (not rerendered) remain at their original position. Interestingly, if we force every TSpan to rerender (by giving them the prop fillOpacity={this.state.fop}) the positioning is correct.

import React, { Component } from 'react';
import Svg, { TSpan, Text } from 'react-native-svg'

export default class App extends Component {
  constructor(props) {
    super();
    this.state = { fop: 1 };
    setInterval(this.tick, 500)
  }

  tick = () => {
    this.setState({ fop: 1 - this.state.fop });
  }

  render() {
    return (
      <Svg
        height="100%"
        width="100%"
      >
        <Text y={100} fontSize={100}>
          <TSpan >1</TSpan>
          <TSpan >2</TSpan>
          <TSpan stroke="black" fillOpacity={this.state.fop}>!</TSpan>
          <TSpan >3</TSpan>
        </Text>
      </Svg>
    );
  }
}

react-native info:

info 
  React Native Environment Info:
    System:
      OS: Linux 4.15 Ubuntu 16.04.5 LTS (Xenial Xerus)
      CPU: (4) x64 Intel(R) Core(TM) i5-2520M CPU @ 2.50GHz
      Memory: 1.40 GB / 7.67 GB
      Shell: 4.3.48 - /bin/bash
    Binaries:
      Node: 10.15.1 - /usr/bin/node
      npm: 6.4.1 - /usr/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      Android SDK:
        API Levels: 19, 24, 25, 26, 27, 28
        Build Tools: 27.0.3, 28.0.3
        System Images: android-28 | Intel x86 Atom_64
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: 0.59.1 => 0.59.1 
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-svg: 9.2.4

[msand]

@ankardon Can you try with the latest commit from the develop branch?

[ankardon]

@msand, thank you for the quick reply once again. Your fix solved the problem! The TSpans now behave as expected.