cannot insert in SQLite database in react native expo

Question

I am new in react native expo. I am trying to create water reminder app, with react native expo and SQLite. I am constantly getting this error message when adding inserting data into table. ChatGPT and Google Gemini both not being able to solve.

LOG

Table created successfully ERROR Error checking date in database: {"_complete": false, "_error": null, "_running": true, "_runningTimeout": false, "_sqlQueue": {"first": undefined, "last": undefined, "length": 0}, "_websqlDatabase": {"_currentTask": {"errorCallback": [Function anonymous], "readOnly": false, "successCallback": [Function anonymous], "txnCallback": [Function anonymous]}, "_db": {"_closed": false, "_name": "waterTracker.db", "close": [Function closeAsync]}, "_running": true, "_txnQueue": {"first": undefined, "last": undefined, "length": 0}, "closeAsync": [Function bound closeAsync], "closeSync": [Function bound closeSync], "deleteAsync": [Function bound deleteAsync], "exec": [Function bound exec], "execAsync": [Function bound execAsync], "execRawQuery": [Function bound execRawQuery], "transactionAsync": [Function bound transactionAsync], "version": "1.0"}}

import React, { useState, useEffect } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import * as SQLite from 'expo-sqlite';
import { format } from 'date-fns';

const db = SQLite.openDatabase('waterTracker.db');

const App = () => {
  const [dailyIntake, setDailyIntake] = useState(0);
  const [currentDate, setCurrentDate] = useState('');
  const [isDbInitialized, setIsDbInitialized] = useState(false);

  useEffect(() => {
    const initializeDatabase = () => {
      db.transaction(tx => {
        tx.executeSql(
          'CREATE TABLE IF NOT EXISTS waterIntake (id INTEGER PRIMARY KEY AUTOINCREMENT, date DATE, intakeChange INTEGER, totalIntake INTEGER)',
          [],
          () => {
            console.log('Table created successfully');
            setIsDbInitialized(true);
          },
          error => {
            console.error('Error creating table: ', error);
          }
        );
      });
    };

    initializeDatabase();

    const date = format(new Date(), 'yyyy-MM-dd');
    setCurrentDate(date);

    db.transaction(tx => {
      tx.executeSql(
        'SELECT * FROM waterIntake WHERE date = ?',
        [date],
        (_, { rows }) => {
          if (rows.length === 0) {
            db.transaction(tx => {
              tx.executeSql(
                'INSERT INTO waterIntake (date, totalIntake) VALUES (?, ?)',
                [date, 0], // Set totalIntake to initial value
                () => {
                  console.log('Today\'s date inserted into the database');
                },
                error => {
                  console.error('Error inserting date into the database: ', error);
                }
              );
            });
          } else {
            // Fetch and set daily intake if date exists in the database
            setDailyIntake(rows.item(0).totalIntake);
          }
        },
        error => {
          console.error('Error checking date in database: ', error);
        }
      );
    });
  }, []);

  const addWater = () => {
    const intakeChange = 1;
    if (isDbInitialized) {
      updateIntakeAndSaveHistory(intakeChange);
    } else {
      console.error('Database is not initialized yet.');
    }
  };

  const deleteWater = () => {
    if (dailyIntake > 0) {
      const intakeChange = -1;
      if (isDbInitialized) {
        updateIntakeAndSaveHistory(intakeChange);
      } else {
        console.error('Database is not initialized yet.');
      }
    }
  };

  const updateIntakeAndSaveHistory = (intakeChange) => {
    const newIntake = dailyIntake + intakeChange;
    setDailyIntake(newIntake);

    db.transaction(tx => {
      tx.executeSql(
        'INSERT INTO waterIntake (date, intakeChange, totalIntake) VALUES (?, ?, ?)',
        [currentDate, intakeChange, newIntake],
        (_, results) => {
          if (results.rowsAffected > 0) {
            console.log('Water intake history saved successfully');
          } else {
            console.log('Failed to save water intake history');
          }
        },
        error => {
          console.error('Error saving water intake history: ', error);
        }
      );
    });
  };

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Water Tracker</Text>
      <Button title="Add Glass" onPress={addWater} />
      <Text style={styles.text}>Daily Intake: {dailyIntake} glasses</Text>
      <Button onPress={deleteWater} title="Delete Glass" />
      <Text style={styles.text}>Today's Date: {currentDate}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  text: {
    fontSize: 18,
    marginBottom: 10,
  },
});

export default App;