Removed child count (0) was not what we expected (1)

I’m getting the following error on iOS only (specifically an iPhone SE running iOS 12) while rendering an area chart with a line and a gradient in React Native. I’ve been able to isolate the issue down to the <Line /> component which renders a <Path />, but I’m not sure how to stop the error from popping up each time I render the chart.

I also tested on Android, and there are no errors there.

These are the versions I’m using:

“react-native”: “0.57.1”, “react-native-svg”: “^8.0.8”, “react-native-svg-charts”: “^5.2.0”,

And here is my code:

import React from "react";
import { View } from "react-native";
import {
  Defs,
  LinearGradient,
  Path,
  Stop
} from "react-native-svg";
import { AreaChart, XAxis, YAxis } from "react-native-svg-charts";
import * as scale from "d3-scale";
import * as shape from "d3-shape";
import moment from "moment";

const SpeciesChart = ( { data } ) => {
  const formatXAxis = ( index ) => {
    const allMonths = moment.monthsShort();
    if ( index === 0 || index % 2 === 0 ) {
      return "      " + allMonths[index];
    }
  };

  const Line = ( { line } ) => (
    <Path
      key="line"
      d={line}
      stroke="rgb(255, 255, 255)"
      strokeWidth="3"
      fill="none"
    />
  );

  const Gradient = ( { index } ) => (
    <Defs key={index}>
      <LinearGradient id="gradient" x1="0%" y="0%" x2="0%" y2="100%">
        <Stop offset="0%" stopColor="rgb(255, 255, 255)" stopOpacity={0.8} />
        <Stop offset="100%" stopColor="rgb(255, 255, 255)" stopOpacity={0.2} />
      </LinearGradient>
    </Defs>
  );

  return (
    <View>
      <YAxis
        data={data}
        yAccessor={ ( { item } ) => item.count }
        contentInset={styles.contentInset}
        svg={{ fontSize: 10, fill: "white" }}
        min={0}
        numberOfTicks={8}
      />
      <View style={styles.chartRow}>
        <AreaChart
          data={data}
          yAccessor={ ( { item } ) => item.count }
          xAccessor={( { item } ) => item.month }
          xScale={scale.scaleTime}
          yScale={scale.scaleLinear}
          contentInset={styles.contentInset}
          curve={shape.curveNatural}
          svg={{ fill: "url(#gradient)" }}
        >
          <Line />
          <Gradient />
        </AreaChart>
        <XAxis
          data={data}
          xAccessor={( { item } ) => item.month }
          formatLabel={ value => formatXAxis( value - 1 ) }
          svg={{
            fontSize: 10,
            fill: "white"
          }}
        />
      </View>
    </View>
  );
};

export default SpeciesChart;

[bhavik13]

const Gradient = ({ index }) => ( <G> <Defs key={index}> <LinearGradient id="gradient" x1="0%" y="0%" x2="0%" y2="100%"> <Stop offset="0%" stopColor="rgb(255, 255, 255)" stopOpacity={0.8} /> <Stop offset="100%" stopColor="rgb(255, 255, 255)" stopOpacity={0.2} /> </LinearGradient> </Defs> </G> );

Add <G> tag

[springroll12]

Tested this on android today and all seems well. I think it’s safe to say this is fixed!

Thanks @msand !