'I want to run my react native code synchronously

Im new to react native and Im working on a react native program, Im trying to run my code synchronously using useEffect, I tried to use await and promises but didn't work, this is how the code looks like

useEffect(() => {
    dashBoard();
    ret3();
  }, []);

  const [flag, setFlag] = useState(false);
  const [within, setWitin] = useState(0);
  const [above, setAbove] = useState(0);
  const [under, setUnder] = useState(0);
  const [bgArr, setBgArr] = useState([]);
  const [lastBG, setLastBG] = useState(0);
  const [lastBGtime, setLastBGtime] = useState('');
  const [addBGlevel, setAddBGlevel] = useState(0);
  const [startBG, setSBGP] = useState(0);
  const [reason, setReason] = useState('');

  //===========================Functions===============

  const addBG = () => {
    var time = new Date(); // Mon Jan 31 2022 23:07:59 GMT+0300 (+03)
    var timeString = time.toString();

    try {
      db.transaction(tx => {
        tx.executeSql(
          'INSERT INTO BGLevel (UserID, BGlevel, DateTime) VALUES (?,?,?)',
          [222, addBGlevel, timeString],
        );
        console.log('inserted!!');
      });
    } catch (error) {
      console.log(error);
    }

    if (addBGlevel <= 70) {
      navigation.navigate('hypo');
    } else if (addBGlevel > startBG) {
      //startbgcorr =150
      navigation.navigate('Calc');
    }else if (reason == '1'){
      navigation.navigate('Calc');
    }
  };

  const dashBoard = async () => {
    await retrieveDash2();

    var w = 0;
    var a = 0;
    var u = 0;

    for (let i = 0; i < bgArr.length; i++) {
      if (bgArr[i] >= fromBGHome && bgArr[i] <= toBGHome) {
        w++;
      } else if (bgArr[i] > toBGHome) {
        a++;
      } else if (bgArr[i] < fromBGHome) {
        u++;
      }
    }

    var total = w + a + u;
    var m = (a / total) * 100;
    if (m >= 50) {
      setFlag(true);
    } else {
      setFlag(false);
    }

    setWitin(w);
    setAbove(a);
    setUnder(u);
  };
  //==================================================
  //===========================RETRIVE================
  const retrieveDash = () => {
    // insulinPen table
    try {
      db.transaction(tx => {
        tx.executeSql(
          'SELECT UserID, fromBG, toBG FROM patientprofile',
          [],
          (tx, results) => {
            var rows = results.rows;

            for (let i = 0; i < rows.length; i++) {
              var userid = rows.item(i).UserID;

              if (userid == 222) {
                fromBGHome = rows.item(i).fromBG;
                toBGHome = rows.item(i).toBG;

                return;
              }
            }
          },
        );
      });
    } catch (error) {
      console.log(error);
    }
  };

  //==================================================
  const retrieveDash2 = async () => {
    await retrieveDash();
    var time = new Date(); // Mon Jan 31 2022 23:07:59 GMT+0300 (+03)
    var bgArr1 = [];
    // insulinPen table
    try {
      db.transaction(tx => {
        tx.executeSql(
          'SELECT UserID, BGlevel, DateTime FROM BGLevel',
          [],
          (tx, results) => {
            var rows = results.rows;
            var lastString = rows.item(rows.length - 1).DateTime;
            var d = new Date(lastString);
            var momFormat = moment(d).format('yyyy/MM/DD  hh:mm a');

            setLastBGtime(momFormat);
            setLastBG(rows.item(rows.length - 1).BGlevel);

            for (let i = 0; i < rows.length; i++) {
              var timeString = rows.item(i).DateTime;
              var toObj = new Date(timeString);
              var bgHome = rows.item(i).BGlevel;
              var userid = rows.item(i).UserID;
              console.log((time - toObj) / (1000 * 60 * 60));

              if ((time - toObj) / (1000 * 60 * 60) <= 168) {
                //168 is the last 7 days in hours

                bgArr1.push(bgHome);
              }
            }
            setBgArr(bgArr1);
            console.log(bgArr1 + '   This is bg array');
            console.log(
              fromBGHome + '  ' + toBGHome + '   This is from and to',
            );
          },
        );
      });
    } catch (error) {
      console.log(error);
    }
  };

  //==================================================
  const ret3 = () => {
    try {
      db.transaction(tx => {
        tx.executeSql(
          'SELECT UserID startBG_correct FROM patientprofile',
          [],
          (tx, results) => {
            var rows = results.rows;
            for (let i = 0; i < rows.length; i++) {
              var UID = rows.item(i).UserID;
              if (UID == 222) {
                

                var start = rows.item(i).startBG_correct;
                setSBGP(start);
              }
            }
          },
        );
      });
    } catch (error) {
      console.log(error);
    }
  };

and I want the functions to run before the interface is completely loaded so I used the following way

{bgArr.length > 0 && (within > 0 || above > 0 || under > 0) ? (
          <PieChart
            data={data}
            width={widthScreen}
            height={150}
            chartConfig={chartConfig}
            accessor={'population'}
            backgroundColor={'#ECECEC'}

            //absolute
          />
        ) : (
          <ActivityIndicator size="large" />
        )}

but it keeps loading and never show the interface until I run the program again I need the code to work directly when loading the page in the following order 1-retrieveDash 2-retrieveDash2 3-dashBoard



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source