react-native-svg: 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!

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 13
Comments: 35

Commits related to this issue

Revert #755 Attempt to fix issues with removeChildren and manageChildren bugs, causing exceptions from RCTUIManager Related to #258 and #848 https://github.com/facebook/react-native/issues/23350 htt... — committed to software-mansion/react-native-svg by msand 5 years ago
Revert Revert #755 and fix actual root cause instead. Fixed issues with removeChildren and manageChildren bugs, causing exceptions from RCTUIManager Related to #258 and #848 https://github.com/faceb... — committed to software-mansion/react-native-svg by msand 5 years ago

Most upvoted comments

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>

+16

burivuhster on Nov 15, 2018

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

wmonecke on Jan 26, 2019

@Galamon5 Did you ever resolve your issue? I’m seeing the same error using victory-native and while researching I landed on this issue, which is the exact error that you posted above.

krestaino on Dec 12, 2018

Weird, I’m using a chart library that use svg library, the thing that I’ve tried was change a state when a event happen and that state is used for build the chart soo looks like an animated chart, so the weird thing is when I did that this error appears me but I just dismiss it and, like magic, my app works property, but the error is annoying and I think that in production it will close the app. whatsapp image 2018-11-30 at 15 07 44

Galamon5 on Nov 30, 2018

@Galamon5 I was wrong, commenting out the components that used react-native-svg made the app no longer crash. So yeah, I’m seeing the same as you when I do a state change that causes the component to re-render. The same action in production (TestFlight) causes a crash instead of red screen.

niklassaers on Dec 6, 2018

@Galamon5 I’m seeing the exact same error after updating to RN 0.57.7, so since we’re so close in time and get the same error down to the letter, I expect this isn’t related to react-native-svg (although I also use this module) but to our use of RN. Now on to figure out why we get it 😃 Just thought I’d share, though

niklassaers on Dec 5, 2018