'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 |
|---|
