'React native not inserting into SQLite

I'm working on a passion project to improve my skills and I'm trying to store data in sqlite. Everything else functions as expected until I get to the registration page, the database is created on startup but when I try to insert some data into the table I'm getting an error that says undefined or {"db": {"dbname": "note_ify", "openError": [Function errorcb], "openSuccess": [Function errorcb], "openargs": {"dblocation": "nosync", "location": "default", "name": "note_ify"}}, "error": undefined, "executes": [], "fn": [Function anonymous], "readOnly": false, "success": undefined, "txlock": true} which I have no idea how to fix, been stuck on this issue the past couple of days, any help would be appreciated.

import React, {useState} from 'react';
import {
  Text,
  View,
  Image,
  TouchableOpacity,
  StatusBar,
  TextInput,
  Easing,
} from 'react-native';
import styles from '../Styling/RegisterStyling';
import Back from '../Img/left_arrow.png';
import LinearGradient from 'react-native-linear-gradient';
import {openDatabase} from 'react-native-sqlite-storage';

const db = openDatabase({
  name: 'note_ify',
  location: 'default'
});

function makeid(length) {
  var result           = '';
  var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  var charactersLength = characters.length;
  for ( var i = 0; i < length; i++ ) {
    result += characters.charAt(Math.floor(Math.random() * 
  charactersLength));
 }
 return result;
}

function Register({navigation}) {
  const [UserID, setID] = useState('');
  const [FullName, setFullName] = useState('');
  const [Email, setEmail] = useState('');
  const [Password, setPassword] = useState('');
  const [Confirm_Pass, setConfirmPass] = useState('');

  const RegisterUser = async () => {
    if (
      FullName.length === 0 ||
      Email.length === 0 ||
      Password.length === 0 ||
      Confirm_Pass.length === 0
    ) {
      alert('1 or more fields are empty, please fill in all fields');
    } else if (Password !== Confirm_Pass) {
      alert('Passwords do not match');
    } else if (Password === Confirm_Pass){
      setID(makeid(16));
      console.log(UserID);
      db.transaction(tx => {
        tx.executeSql(
          'INSERT INTO users (ID, FullName, Email, Password) VALUES (?, ?, ?, ?)',
          (tx , result) => {
            console.log(`Account ${FullName} has been created`);
          },
          err => {
            console.log(err);
          }
        )
      })
    }
  };

  return (
    <View style={styles.parent}>
      <View style={styles.container}>
        <TouchableOpacity
          title="Backbtn"
          style={styles.btnBack}
          onPress={() => navigation.navigate('Welcome')}>
          <Image source={Back} style={styles.backImg} />
          <Text style={styles.Title}>Sign Up</Text>
        </TouchableOpacity>
      </View>

      <View style={styles.root}>
        <Text style={styles.label}>Full Name</Text>
        <TextInput
          placeholder="Enter your full name"
          placeholderTextColor="#C0C0C0"
          style={styles.Inputs}
          onChangeText={text => setFullName(text)}
          value={FullName}
        />

        <Text style={styles.label}>Email</Text>
        <TextInput
          placeholder="[email protected]"
          placeholderTextColor="#C0C0C0"
          style={styles.Inputs}
          onChangeText={text => setEmail(text)}
          value={Email}
        />

        <Text style={styles.label}>Password</Text>
        <TextInput
          placeholder="Enter your password"
          placeholderTextColor="#C0C0C0"
          style={styles.Inputs}
          secureTextEntry={true}
          onChangeText={text => setPassword(text)}
          value={Password}
        />

        <Text style={styles.label}>Confirm Password</Text>
        <TextInput
          placeholder="Confirm your password"
          placeholderTextColor="#C0C0C0"
          style={styles.Inputs}
          secureTextEntry={true}
          onChangeText={text => setConfirmPass(text)}
          value={Confirm_Pass}
        />

        <TouchableOpacity
          title="Register"
          style={styles.btnRegister}
          onPress={RegisterUser}>
          <LinearGradient
            colors={['#b816db', '#d126ad']}
            style={styles.btnRegisterBkg}
          />
          <Text style={styles.btnRegisterText}>Register</Text>
        </TouchableOpacity>

        <View style={styles.inlineContent}>
          <View style={styles.lineLeft} />
          <Text style={{fontSize: 16, color: '#fff'}}>Or</Text>
          <View style={styles.lineRight} />
        </View>

        <View style={{flexDirection: 'row', justifyContent: 'center'}}>
          <Text style={{color: '#fff'}}>Already own an account? </Text>
          <Text
            style={{color: '#fff', fontWeight: 'bold'}}
            onPress={() => navigation.navigate('Login')}>
            Sign in
          </Text>
        </View>
      </View>

      <StatusBar hidden={true} />
    </View>
  );
}

export default Register;


Sources

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

Source: Stack Overflow

Solution Source