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>
)
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:If the above is not working for you, please add a
console.log()
screenshot of the result ofhandleBarData()
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()
. Thenconsole.log
that data and make sure that data IS available (i.e. thatx > 0
) . This issue happened to me and was very frustrating.