React-native-svg: Crash: removedChildren count (0) was not what we expected (56)

[SudoPlz]

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!

[edo1493]

I am getting the same error. : (

[tutoring]

I have traced a similar error in my code down to updating text components in an SVG.

[sslash]

+1

[vadermemo]

Same issue here, when I will try to update the method "render" with a new array of objects : Line(react-native-svg)

[Ghost2016]

+1

[marianrick]

Receiving the same error even with just a single line to be removed.

[Loxrie]

I have a theory about this. I was getting the exact same error and noticed that because I had a mix of components (react-native, and react-native-svg) in my render() call I was actually trying to render the Text object from the react-native package and not the Text object from react-native-svg. I modified my imports like so:

import { Text, View, ScrollView } from 'react-native'; import { Text as SvgText } from 'react-native-svg';

Then my react-native <Text> tags could remain as is and my SVG ones became <SvgText>. The issues went away.

[huynguyen1509]

+1

[acis]

same here

[msand]

Please provide a full replication if you want progress on this.

[pehlert]

For me this started to occur after an upgrade to 8.0.4 (from 6.4.0), but I couldn't really pinpoint the code that has caused it.

It seems to be related to this error though, which I also saw:

ExceptionsManager.js:84 Exception '*** -[__NSArrayM insertObject:atIndex:]: index 26 beyond bounds [0 .. 24]' was thrown while invoking manageChildren on target UIManager with params (
    1557,
        (
    ),
        (
    ),
        (
        2153
    ),
        (
        26
    ),
        (
    )
)
callstack: (
    0   CoreFoundation                      0x000000010502f29b __exceptionPreprocess + 331
    1   libobjc.A.dylib                     0x00000001067ce735 objc_exception_throw + 48
    2   CoreFoundation                      0x0000000104f798fc _CFThrowFormattedException + 194
    3   CoreFoundation                      0x0000000104f55ba4 -[__NSArrayM insertObject:atIndex:] + 1300
    4   myapp                            0x000000010406305f -[RCTShadowView insertReactSubview:atIndex:] + 399
    5   myapp                            0x0000000104091616 -[RCTUIManager _manageChildren:moveFromIndices:moveToIndices:addChildReactTags:addAtIndices:removeAtIndices:registry:] + 2966
    6   myapp                            0x0000000104090576 -[RCTUIManager manageChildren:moveFromIndices:moveToIndices:addChildReactTags:addAtIndices:removeAtIndices:] + 342
    7   CoreFoundation                      0x000000010503611c __invoking___ + 140
    8   CoreFoundation                      0x00000001050335b5 -[NSInvocation invoke] + 325
    9   CoreFoundation                      0x0000000105033a06 -[NSInvocation invokeWithTarget:] + 54
    10  myapp                            0x0000000103fe54ca -[RCTModuleMethod invokeWithBridge:module:arguments:] + 2810
    11  myapp                            0x000000010409cc46 _ZN8facebook5reactL11invokeInnerEP9RCTBridgeP13RCTModuleDatajRKN5folly7dynamicE + 790
    12  myapp                            0x000000010409c75f _ZZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEiENK3$_0clEv + 127
    13  myapp                            0x000000010409c6d9 ___ZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEi_block_invoke + 25
    14  libdispatch.dylib                   0x000000010a52851d _dispatch_call_block_and_release + 12
    15  libdispatch.dylib                   0x000000010a529587 _dispatch_client_callout + 8
    16  libdispatch.dylib                   0x000000010a530058 _dispatch_lane_serial_drain + 720
    17  libdispatch.dylib                   0x000000010a530b9b _dispatch_lane_invoke + 401
    18  libdispatch.dylib                   0x000000010a5399c6 _dispatch_workloop_worker_thread + 645
    19  libsystem_pthread.dylib             0x000000010a91261c _pthread_wqthread + 409
    20  libsystem_pthread.dylib             0x000000010a912415 start_wqthread + 13

After downgrading back to 6.4.0 the errors both disappeared. Any idea what might be wrong here?

[msand]

@pehlert Hmm, I can't really figure anything out from that stacktrace, as it doesn't even mention any code from this library. Could try to make a reproducible scenario?

[tarunmehta-quovantis]

I also having the same error .

1. I have parent component
2. Multiple "Same Child components" in horizontal Scroll view

eg .
state = {selectedIndex: 0}

onClick={this.onClicked.bind(this)}
indexValue={0}
isSelected {this.state.selectedIndex=== 0}
/>
onClick={this.onClicked.bind(this)}
indexValue={1}
isSelected {this.state.selectedIndex=== 1}
/>
.
.
.

onClicked(indexValue) {
this.setState({selectedIndex: indexValue})
}

1. When I pass data back to parent component from Abc to change state in onClicked().
   eg. for now first child component is selected and now when I click on 2nd child as it give callback to parent for changing state value it gives me same error.

[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, in my case:

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

[Galamon5]

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.

[niklassaers]

@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

[rogueturnip]

I just did an update from 0.56 to 0.57.7 and also to RNSVG 8.0.8 and I"m getting this too in my bar and line graphs. I've tried some of the suggestions of wrapping mapped items with but still getting the same error. Tested it with a component I have that has no maps and I still get the error.

[niklassaers]

@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.

[rogueturnip]

I found that wrapping things with did stop my crashes. I had to really make sure that no component had more than one svg component inside it without being wrapped.

[msand]

This might be of interest to you: https://github.com/react-native-community/react-native-svg/issues/848#issuecomment-445501856

[mbm-code]

Same issue,
Has anyone fixed this issue yet?

[msand]

@ankha0109 Seems it's mostly fixed by wrapping any parts where you have both static children and some dynamic number of children in the same component. Try wrapping the dynamic part in a G element. I'm not sure if this is a bug in react, react-native or this library yet. If you can provide a small reproduction that would be great!

[krestaino]

@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.

[SudoPlz]

That's such an ooold issue. If I remember correctly I managed to resolve that by turning a stateless react object to stateful?
But my memory is super fade right now, sorry for not posting anything earlier.

[vishalTechnoFreek]

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, in my case:

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

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, in my case:

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

Thanks, @burivuhster this solution worked for me, It was really a great help for me.

[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

[msand]

I suspect this might be a bug in react-native. What versions are you using @wmonecke can you paste the output from running react-native info here?

[msand]

Or possibly, colliding / the same key on several children within a single parent, might be the cause as well.

[msand]

@vishalTechnoFreek can you also provide the output from react-native info?

[msand]

@pehlert @rogueturnip (or anyone else) Do you have a set of versions and an example where this reliably doesn't happen but does happen reliably with some other set of versions? Would be great to have a bit more to go on to isolate this.

[msand]

I've isolated this to between v6.5.2 and v7.0.0 with the code in https://snack.expo.io/@msand/groaning-chocolate
https://github.com/msand/ReproRCTUIManagerBug

[msand]

I've isolated it to the removal of this method returning null for the shadowView: https://github.com/react-native-community/react-native-svg/commit/257a98cecba4f5594f9d29b996c14902a3a02d37
Merged just before releasing v7
This change allows using native animation of the opacity, but I'm not sure if it's actually needed for animating other things, and opacity might be possible to animate with the same logic as for the other properties now.

[msand]

The merged PR can be found here: https://github.com/react-native-community/react-native-svg/pull/755

[msand]

I've opened an issue over at the react-native repo, perhaps someone there has deeper insight into this. https://github.com/facebook/react-native/issues/23350

[msand]

Published v9.2.4 with a fix. Can you please test it?