Crash: removedChildren count (0) was not what we expected (56)

I get the error above which results in a crash.

This error happens when I try to remove the view that contains lot’s of lines rendered like so:

const linesArray = [];
for (let i = 0, lineCnt = Math.ceil(realLineCnt); i <= lineCnt; i += 1) {
    // top left pivot
    linesArray.push(
      <Line
        key={i}
        x1={i * (props.strokeWidth * 2.83333333)}
        y1={-5}

        x2={(i * (props.strokeWidth * 2.83333333)) - ((props.width * props.height) / props.width)}
        y2={props.height + 5}

        stroke={props.strokeColor}
        strokeWidth={props.strokeWidth}
      />);
  }

which are later rendered like so:

<SvgRender
        height={props.height}
        width={props.width}
        style={styles.svgContainer}
      >
        {linesArray}
 </SvgRender>

I see the error in a react-native red box, but the error originates from this react-native line of code.

I assume that the number 56 is the number of my lines. Could it be that react-native-svg makes it hard for react-native to remove it’s children and deallocate their memory?

Please advise!

[burivuhster]

I finally figured out this issue. It was caused by rendering multiple svg components with map function without wrapping it. Here is the code that caused an error:

<Svg ... >
  <Line ... />
  <Line ... />
  <Rect ... />
  {// Horizontal grid
    ticksY.map((value, index) => (
      <Line key={value.toString()} ... />
    ))
  }
</Svg>

See, the resulting bunch of Lines returned my map() mixed with other Lines in parent component. During re-render my number of ticksY changed and I guess that was the cause of a mess.

The solution was to wrap the bunch of Lines with a parent component, <G> in my case:

<Svg ... >
  <Line ... />
  <Line ... />
  <Rect ... />
  <G>
    {// Horizontal grid
      ticksY.map((value, index) => (
        <Line key={value.toString()} ... />
      ))
    }
  </G>
</Svg>

[wmonecke]

This is happening to me specially with the LinearGradient component from react-native-svg. Removing it / using other types of graphs removes the error.

updated @msand

package.json:

    "react": "16.6.3",
    "react-native": "0.57.8",
    "react-native-svg": "^9.0.0",
    "react-native-svg-charts": "^5.2.0",

react-native info:

 React Native Environment Info:
    System:
      OS: macOS 10.14.2
      CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
      Memory: 223.66 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.9.4 - /usr/local/bin/node
      npm: 6.5.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 23, 25, 26, 27, 28
        Build Tools: 26.0.2, 26.0.3, 27.0.2, 27.0.3, 28.0.2, 28.0.3
        System Images: android-28 | Google Play Intel x86 Atom, android-P | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.3 => 16.6.3
      react-native: 0.57.8 => 0.57.8
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7