SVG Error: error while updating property of 'd'

Question

Before i start i just want to mention that i tried some ways of solving this problem when i search the site for answer, couldn't make this work :(

As the title suggested i have a problem while i'm using React Native Victory graphs. To be clear: it works fine untill i press the button to display the graph again.

for example this is the onPress im calling the graph with useState method:

<TouchableOpacity
      onPress={() => {
        setBarChecked(true);
        setLineIsChecked(false);
        setLineChecked(false);
        setPieChecked(false);
      }}
    >
      <FontAwesome5 name="chart-bar" size={36} color="#0000FF" style={{ padding: 9 }} />
    </TouchableOpacity>

This is the graph code:

    <VictoryBar
      barRatio={0.8}
      style={{
        data: { fill: "#c43a31" }
      }}
      data={handleBarData()} //This function calculate data and return array
    />

After a graph icon is pressed its working [![Working][1]][1]

After im pressing another graph, and then returning to graph i already pressed before, the app freeze and i get this error:

[![error][2]][2]

using "react-native-svg": "^12.1.0",

Edit start here:

HandleBarData():

  const handleBarData = () => {
    //Predicion Part Start here -----> Bar Graph!!//
    const arrayIncome = months.splice(0, 6);
    const fictionalIncome = [560, 150, 3870, 4000, 7860, 7840]; // Past Values
    const size = fictionalIncome.length;

    let i = 0;
    const diffrence = [];
    for (i; i < size; i++) {
      diffrence[i] = arrayIncome[i] - fictionalIncome[i];
    }
    //console.log("Diffrenec => ", diffrence);
    ///////////////////////////////////////////

    let j = 0;
    const difWithPower = [];
    for (j; j < size; j++) {
      difWithPower[j] = Math.pow(diffrence[j], 1 / 2);
    }
    //console.log("Power => ", difWithPower);
    ///////////////////////////////////////////

    let k = 0;
    const substract = [];
    for (k; k < size; k++) {
      substract[k] = difWithPower[k] - 1;
    }
    //console.log("Substract => ", substract);
    ///////////////////////////////////////////

    let h = 0;
    const growthRate = [];
    for (h; h < size; h++) {
      growthRate[h] = substract[h] / 100;
    }
    //console.log("Growth Rate => ", growthRate);
    ///////////////////////////////////////////

    let a = 0;
    const resultIncome = [];
    for (a; a < size; a++) {
      resultIncome[a] = parseInt(
        diffrence[a] * growthRate[a] + diffrence[a],
        10
      );
    }

    //console.log("Difference X Gr Rate => ", resultIncome);

    //Graph of Future Income Start here ----->//
    let nextYearMonths = [
      "Jan 21",
      "Feb 21",
      "Mar 21",
      "Apr 21",
      "May 21",
      "Jun 21",
    ]; //Present first 6 Months of the year.
    const futureIncome = resultIncome; //[348,53,1291,226,1306,424];

    const result = {};

    nextYearMonths.forEach((key, i) => (result[key] = futureIncome[i]));
    const barData = { ...result };

    const arr4 = new Array();
    for (const [key, value] of Object.entries(barData)) {
      arr4.push({ x: key, y: value });
    }
    console.log("Arr 4 ", arr4); //Fetch to Graph?

    return arr4;
  };

Console Log:

Arr 4  Array [
  Object {
    "x": "Jan 21",
    "y": 348,
  },
  Object {
    "x": "Feb 21",
    "y": 53,
  },
  Object {
    "x": "Mar 21",
    "y": 1291,
  },
  Object {
    "x": "Apr 21",
    "y": 226,
  },
  Object {
    "x": "May 21",
    "y": 1306,
  },
  Object {
    "x": "Jun 21",
    "y": 424,
  },
]

Another edit

 return (
    <View style={styles.container}>
      <Text style={styles.sectionTitle}>גרפים לניתוחים כלכליים וסטטיסטים:</Text>
      <View style={styles.textRow}>
        <Text style={styles.explainBlue}>כחול</Text>
        <Text style={styles.explainGraph}>- תחזית הכנסות לשנת 2021</Text>
      </View>
      {/********************************* */}
      <View style={styles.textRow}>
        <Text style={styles.explainRed}>אדום</Text>
        <Text style={styles.explainGraph}>- ניתוח הכנסות שנת 2020</Text>
      </View>
      {/********************************* */}
      <View style={styles.textRow}>
        <Text style={styles.explainPink}>ורוד</Text>
        <Text style={styles.explainGraph}>- ניתוח סטטיסטי של שירותי העסק</Text>
      </View>
      {/********************************* */}
      <View style={styles.textRow}>
        <Text style={styles.explainGreen}>ירוק</Text>
        <Text style={styles.explainGraph}>- ייצא דוח הכנסות שנתי לאקסל</Text>
      </View>
      {/********************************* */}
      <View style={styles.chooseContainer}>
        <View style={{ flexDirection: "row" }}>
          <TouchableOpacity
            onPress={() => {
              setPieChecked(true);
              setBarChecked(false);
              setLineChecked(false);
              setLineIsChecked(false);
            }}
          >
            <FontAwesome5
              name="chart-pie"
              size={36}
              color="#FF3399"
              style={{ padding: 9 }}
            />
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => {
              setLineChecked(true);
              setPieChecked(false);
              setLineIsChecked(false);
              setBarChecked(false);
            }}
          >
            <FontAwesome5
              name="chart-line"
              size={36}
              color="red"
              style={{ padding: 9 }}
            />
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => {
              setBarChecked(true);
              setLineIsChecked(false);
              setLineChecked(false);
              setPieChecked(false);
            }}
          >
            <FontAwesome5
              name="chart-bar"
              size={36}
              color="#0000FF"
              style={{ padding: 9 }}
            />
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => {
              handleExcel();
            }}
          >
            <FontAwesome5
              name="file-excel"
              size={36}
              color="#1D6F42"
              style={{ padding: 9 }}
            />
          </TouchableOpacity>
        </View>
      </View>
      <View style={styles.graphsPart}>
        {pieChecked ? (
          <VictoryPie //Graph that holds the most used service on the business.
            height={250}
            width={350}
            colorScale={["#FDB927", "#552583", "#ED174C", "cyan"]}
            data={handlePie()}
          />
        ) : lineChecked ? (
          <VictoryChart
            width={370}
            height={300}
            theme={VictoryTheme.grayscale}
            padding={{ left: 52, top: 20, bottom: 40, right: 26 }}
            domainPadding={{ x: 7 }}
          >
            <VictoryBar
              barRatio={0.8}
              style={{
                data: { fill: "#c43a31" },
              }}
              labelComponent={<VictoryLabel dy={30} />}
              data={handleFirstLine()}
            />
          </VictoryChart>
        ) : barChecked ? (
          <VictoryChart
            theme={VictoryTheme.material}
            domainPadding={{ x: 15 }}
            width={350}
          >
            <VictoryBar
              barRatio={0.8}
              style={{
                data: { fill: "#c43a31" },
              }}
              data={handleBarData()}
            />
          </VictoryChart>
        ) : null}
      </View>
    </View>
)

Answer 1

I think this happens when you pass no data to your SVG graphs in Android. iOS does not have this issue.

Please make sure handleBarData() is always returning data to display on Android. If no data is present don't show your graph or it will crash. Something like this:

// Assuming your data looks like this
const data = [
  {
    month: 'Jan',
    count: 200
  },
  ....
]

const data = handleBarData()
const isDataAvailable = !!data.find(el => el.count > 0)
if (!isDataAvailable) {
  return <NoData/>
}

return <MyGraph/>

If the above is not working for you, please add a console.log() screenshot of the result of handleBarData() here so I can see what is going on.

---

Edit: Ok I have still the same hunch and I would do the following. Instead of passing data as a function like so data={handleFirstLine()}, assign every data function to a variable: const firstLineData = handleFirstLine(). Then console.logthat data and make sure that data IS available (i.e. that x > 0) . This issue happened to me and was very frustrating.