Removing child elements causes crash (Android, 7.0.3)

I’m running into issues when I try to remove a child from an <Svg> element.

Platform: Android react-native: 0.57.0 react-native-svg: 7.0.3

Here’s a picture of the error:

It appears that React is trying to manage the removal of one of the native SVG components, but you’ve already removed it, but I’m not too familiar with React Native development.

Here’s the reproduction code. Click the button at the top to add the line, then click again to cause the crash.

import React from 'react';
import { Button, Dimensions, StyleSheet, View, } from 'react-native';
import Svg, { Polyline } from 'react-native-svg';

const { width, height } = Dimensions.get('window');

export default class SVGFail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showLine: false
    };
  }

  toggleLine = () => {
    this.setState({ showLine: !this.state.showLine });
  }

  render() {
    const { showLine } = this.state;
    return (
      <View
        style={styles.container}
      >
        <Button
          title="Toggle Line"
          onPress={this.toggleLine}
        />
        <Svg
          width={width}
          height={height}
        >
          {showLine ? (
            <Polyline
              points={'10,10 100,100 150,100 100,150'}
              fill="none"
              stroke="red"
              strokeWidth="1"
            />
          ) : (
            null
          )}
        </Svg>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'beige',
  },
});

UPDATE: After some debugging, the error occurs in NativeViewHierarchyManager.java when React tries to remove the child from the SvgView, but there isn’t a child in SvgView to remove. Well, SvgView overrides the addView method and only adds children if they are not instances of RenderableView, which means that somehow SvgView never ends up with children, despite displaying the content. I’m not familiar enough with the code base to be able to help more.

UPDATE 2: Everything works when I wrap my polylines with a <G> tag, which is great, but this is still a valid bug.

[ManAnRuck]

@IjzerenHein u can use the G Tag from react-native-svg

[msand]

I’ve published a proper fix for iOS in v9.2.4 If anyone has any issues in either iOS or Android with the latest version, please comment and / or provide a reproduction.