LineChart data not updating and crashing app

Question

I am new to coding and this is my first full app build.

I trying to get the Line Chart component to update with the data that I am passing from another component. But, when I have <LineChart /> commented in it is crashing my app without an error message. I think the issue has something to do with the LineChartData not updating at the right time?

Does anyone have suggestions of how to get the LineChart to render correctly?

import AsyncStorage from "@react-native-async-storage/async-storage";
import { BarChart, LineChart } from "react-native-chart-kit";
import { useState, useEffect } from "react";
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  Dimensions,
  ScrollView,
} from "react-native";

import Colors from "../constants/Colors";
import NavBar from "../../NavBar";

const HealthData = () => {
  const [barChartData, setBarChartData] = useState(null);
  const [lineChartData, setLineChartData] = useState([]);
  const [savedHealthData, setSavedHealthData] = useState([]);
  const [triggerReload, setTriggerReload] = useState(false);

  const [energyData, setEnergyData] = useState([]);
  const [fatigueData, setFatigueData] = useState([]);
  const [motivationData, setMotivationData] = useState([]);

  // console.log("++++++++++  saved health data", savedHealthData);

  const dayOfWeekCounts = {
    Monday: 0,
    Tuesday: 0,
    Wednesday: 0,
    Thursday: 0,
    Friday: 0,
    Saturday: 0,
    Sunday: 0,
  };

  ///////////////////////////////////////////////////////

  useEffect(() => {
    if (triggerReload === true) {
      setTriggerReload(false);
    }

    const getSavedHealthData = async () => {
      try {
        const healthDataKeys = await AsyncStorage.getAllKeys();
        const filteredKeys = healthDataKeys.filter((key) =>
          key.includes("HealthData")
        );
        const savedHealthDataArray = await AsyncStorage.multiGet(filteredKeys);
        // console.log("health data pulled down");

        const parsedData = savedHealthDataArray.map((data) =>
          JSON.parse(data[1])
        );
        console.log("parsed data===========", parsedData);

        setSavedHealthData(parsedData);
      } catch (error) {
        console.error("Error retrieving saved data:", error);
      }
    };

    getSavedHealthData();
  }, []);

  useEffect(() => {
    calculateBarChart();

    const createLineChartData = () => {
      console.log("!!!!!!!!!!!!! createLineChartData triggered");
      const newEnergyData = [];
      const newMotivationData = [];
      const newFatigueData = [];

      const energyDataPoint = [];
      const motivationDataPoint = [];
      const fatigueDataPoint = [];

      console.log("saved health data", savedHealthData);

      for (let i = 0; i < savedHealthData.length; i++) {
        let insideSavedHealthData = savedHealthData[i];
        for (let j = 0; j < insideSavedHealthData.length; j++) {
          const energyInfo = insideSavedHealthData[j].energyState;
          const motivationInfo = insideSavedHealthData[j].motivationState;
          const fatigueInfo = insideSavedHealthData[j].tirednessState;
          const dataKeyInfo = insideSavedHealthData[j].dataKey;

          newEnergyData.push([dataKeyInfo, energyInfo]);
          newMotivationData.push([dataKeyInfo, motivationInfo]);
          newFatigueData.push([dataKeyInfo, fatigueInfo]);

          // console.log("new energy data", newEnergyData);
          // console.log("new motivation data", newMotivationData);
          // console.log("new fatigue data", newFatigueData);
        }
      }

      newEnergyData.forEach((data) => {
        if (data[1] === false) {
          energyDataPoint.push([1, energyDataPoint.length + 1]);
          // 1 = yes
        } else {
          energyDataPoint.push([2, energyDataPoint.length + 1]);
          // -1 = no
        }
      });

      console.log("energy data point for loop", energyDataPoint);

      newMotivationData.forEach((data, i) => {
        if (data[1] === false) {
          motivationDataPoint.push([1, motivationDataPoint.length + 1]);
          // 1 = yes
        } else {
          motivationDataPoint.push([2, motivationDataPoint.length + 1]);
          // -1 = no
        }
      });

      console.log("motivation data point for loop", motivationDataPoint);

      newFatigueData.forEach((data, i) => {
        if (data[1] === false) {
          fatigueDataPoint.push([1, fatigueDataPoint.length + 1]);
        } else {
          fatigueDataPoint.push([2, fatigueDataPoint.length + 1]);
        }
      });

      console.log("fatigue data point for loop", fatigueDataPoint);

      setEnergyData(energyDataPoint);
      setMotivationData(motivationDataPoint);
      setFatigueData(fatigueDataPoint);
      console.log("after setting state in createLineChartData");

      //its breaking somewhere in this function
      // Update lineChartData state variable asynchronousl
    };

    createLineChartData();
  }, [savedHealthData]);

  // console.log("energy", energyData);
  // console.log("motivation", motivationData);
  // console.log("fatigue", fatigueData);

  const calculateBarChart = () => {
    console.log("~~~~~~~~~~~~ barchart triggered");
    for (let i = 0; i < savedHealthData.length; i++) {
      let insideSavedHealthData = savedHealthData[i];
      for (let j = 0; j < insideSavedHealthData.length; j++) {
        const dayOfWeek = insideSavedHealthData[j].dayOfWeek;
        dayOfWeekCounts[dayOfWeek] += 1;
      }
    }

    // Convert dayOfWeekCounts object to an array
    const countsArray = Object.values(dayOfWeekCounts);
    // console.log("COUNTTTTTS ARRRRRAAAYYYYY", countsArray);

    // Replace NaN values with null
    const sanitizedCountsArray = countsArray.map((count) =>
      isNaN(count) ? null : count
    );

    // Create the bar chart data using the counts array
    const chartData = {
      labels: ["Mon", "Tues", "Wed", "Thurs", "Fri", "Sat", "Sun"],
      datasets: [
        {
          data: sanitizedCountsArray,
        },
      ],
    };

    setBarChartData(chartData);
  };

  useEffect(() => {
    const takeDataMakeLineChart = () => {
      console.log("+++++++++++++++ entering takeDataMakeLineChart!");
      console.log("energyData:", energyData);
      console.log("motivationData:", motivationData);
      console.log("fatigueData:", fatigueData);
      try {
        console.log("entering try in takeDataMakeLineChart");
        const data = {
          labels: energyData.map((data) => data[1]),
          datasets: [
            {
              data: energyData.map((data) => data[2]),
              color: (opacity = 1) => `rgba(255, 0, 0, ${opacity})`,
              label: "Energy",
            },
            {
              data: motivationData.map((data) => data[2]),
              color: (opacity = 1) => `rgba(0, 255, 0, ${opacity})`,
              label: "Motivation",
            },
            {
              data: fatigueData.map((data) => data[0]),
              color: (opacity = 1) => `rgba(0, 0, 255, ${opacity})`,
              label: "Fatigue",
            },
          ],
        };

        console.log("data:", data);
        setLineChartData(data);
      } catch (error) {
        console.error("Error in takeDataMakeLineChart:", error);
      }
    };

    takeDataMakeLineChart();
  }, [fatigueData]);

  console.log("************************************************");
  console.log(lineChartData);
  console.log("************************************************");

  ///////////////////////////////////////////////////////

  return (
    <View style={styles.container}>
      <ScrollView>
        <View style={styles.daysOfWeekChart}>
          <Text style={styles.text}>Days of the week you workout</Text>
          {barChartData && (
            <BarChart
              data={barChartData}
              width={380}
              height={400}
              yAxisLabel=""
              chartConfig={{
                backgroundColor: "#F7F2FE",
                backgroundGradientFrom: "#F7F2FE",
                backgroundGradientTo: "#F7F2FE",
                decimalPlaces: 0,
                color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
                style: {
                  borderRadius: 16,
                },
              }}
              style={{
                marginVertical: 8,
                borderRadius: 16,
              }}
            />
          )}
        </View>

        <View style={styles.correlationChart}>
          <Text style={styles.text}>Correlation equals causation?</Text>

          {lineChartData && (
            <LineChart
              data={lineChartData}
              width={380}
              height={400}
              chartConfig={{
                backgroundGradientFrom: "#fff",
                backgroundGradientTo: "#fff",
                color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
                strokeWidth: 2,
                barPercentage: 0.5,
                useShadowColorFromDataset: false,
                decimalPlaces: 0,
              }}
              style={{
                marginVertical: 8,
                borderRadius: 16,
              }}
            />
          )}

          <View style={styles.keyContainer}>
            <Text style={styles.keyTitle}>Key</Text>

            <View styles={styles.energyContainer}>
              <Text style={styles.energyKey}>Energy</Text>
            </View>

            <View styles={styles.motivationContainer}>
              <Text style={styles.motivationKey}>Motivation</Text>
            </View>

            <View styles={styles.tirednessContainer}>
              <Text style={styles.tirednessKey}>Tiredness</Text>
            </View>
          </View>
        </View>
      </ScrollView>
      <View style={styles.navBar}>
        <NavBar />
      </View>
    </View>
  );
};

export default HealthData;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 60,
    backgroundColor: "#F7F2FE",
    justifyContent: "center",
    alignItems: "center",
  },
  text: {
    fontSize: 20,
    fontWeight: "bold",
    color: "#333",
    textAlign: "center",
    marginBottom: 15,
  },
  daysOfWeekChart: {
    paddingTop: 20,
  },
  correlationChart: {
    paddingTop: 20,
  },
  keyContainer: {
    borderColor: "#333",
    borderWidth: 2,
    alignItems: "center",
    width: 151,
    flexDirection: "column",
    justifyContent: "space-evenly",
    height: 170,
  },
  keyTitle: {
    fontSize: 20,
    fontWeight: "bold",
    color: "#333",
    textAlign: "center",
    marginBottom: 15,
  },
  energyContainer: {
    flexDirection: "row",
  },
  energyKey: {
    backgroundColor: "#C8BFD4",
    borderRadius: 5,
    lineHeight: 30,
    width: 101,
    textAlign: "center",
  },
  motivationContainer: {
    flexDirection: "row",
  },
  motivationKey: {
    backgroundColor: "#C8BFD4",
    borderRadius: 5,
    lineHeight: 30,
    width: 100,
    textAlign: "center",
  },
  tirednessContainer: {
    flexDirection: "row",
  },
  tirednessKey: {
    backgroundColor: "#C8BFD4",
    borderRadius: 5,
    lineHeight: 30,
    width: 100,
    textAlign: "center",
    marginBottom: 15,
  },
  navBar: {
    position: "absolute",
    bottom: 0,
    width: "100%",

    backgroundColor: "#f2f2f2",
  },
});