memory leak when changing text

[yanush]

Bug

There is a memory leak when updating react-native-svg Text (it doesn't happen if I use Text from react-native)

Environment info

React native info output:

System:
    OS: macOS 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-6920HQ CPU @ 2.90GHz
    Memory: 1.42 GB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.7.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.10.2 - /usr/local/bin/npm
    Watchman: 4.7.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
    Android SDK:
      API Levels: 15, 23, 24, 25, 26, 27, 28
      Build Tools: 23.0.1, 23.0.2, 23.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.2, 27.0.3, 28.0.3
      System Images: android-22 | Google APIs Intel x86 Atom, android-23 | Intel x86 Atom, android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64, android-24 | Google Play Intel x86 Atom, android-25 | Google APIs Intel x86 Atom, android-25 | Google APIs Intel x86 Atom_64
      Android NDK: 19.0.5232133
  IDEs:
    Android Studio: 3.3 AI-182.5107.16.33.5199772
    Xcode: 10.3/10G8 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6
    react-native: 0.60.5 => 0.60.5
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-native-fbsdk: 0.7.0
    react-native-git-upgrade: 0.2.7

Library version: 9.6.4

Steps To Reproduce

1. create a component that renders Svg with Text
2. update the text frequently
3. observe RAM usage with Perf Monitor

Describe what you expected to happen:

1. expecting to see memory goes back after text is updated

Reproducible sample code

'use strict';

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

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      currentTimestamp: '',
    };

    this.interval = setInterval(() => {
      this.updateCurrentTimestamp();
    }, 100);
  }

  render() {
    return (
      <View>
        <Svg
          height={200}
          width={400}
          style={{
            backgroundColor: '#0000ff',
          }}>
          <Text fill={'#ff0000'} stroke={'#00ff00'} fontSize={50} x={0} y={100}>
            {this.state.currentTimestamp}
          </Text>
        </Svg>
      </View>
    );
  }

  updateCurrentTimestamp() {
    this.setState({
      currentTimestamp: Date.now(),
    });
  }
}

[yanush]

any ideas?
I'm using a stroked text to display a timer in my game, and I can't release the game with this memory leak, since it will crash given enough time and text updates

[msand]

Have you tried with the latest version? And others? The memory profiler in xcode and android studio should be able to find the cause of the leak, i don't have time to put into this atm, but if you could do that i might be able to fix the leak quickly

[msand]

🎉 This issue has been resolved in version 9.12.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[yanush]

Thanks! I can confirm the problem is solved