Hello all currently my problem is that I am trying to make a onRegisterPress function in the useAuth class. I keep getting a bug saying Render Error: onRegisterPress is not defined
My onLoginPress function works completely fine so I am trying to figure out what the issue is.
useAuth.js
import React, { createContext, useContext } from "react";
import { auth } from "../model/config"; //this is my firebase auth settings
import {
signInWithEmailAndPassword,
createUserWithEmailAndPassword,
} from "firebase/auth";
const AuthContext = createContext({});
export const AuthProvider = ({ children }) => {
const onLoginPress = (email, password) => {
//Takes in two arguments, email and password used in LoginScreen class
signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
console.warn("signed in");
console.warn(user);
//Navigate after sign in
// ...
})
.catch((error) => {
//If any error we will catch
const errorCode = error.code;
if (errorCode === "auth/user-not-found") {
console.warn("User not found");
}
if (errorCode === "auth/wrong-password") {
console.warn("Wrong password");
} else {
console.warn(error);
}
});
const onRegisterPress = (email, password) => {
if (password !== confirmPassword) {
alert("Passwords don't match.");
}
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
const user = userCredential.user;
alert("Welcome");
})
.catch((error) => {
alert(error);
});
};
};
return (
<AuthContext.Provider value={{ user: null, onLoginPress, onRegisterPress }}>
{children}
</AuthContext.Provider>
);
};
export default function useAuth() {
return useContext(AuthContext);
}
I am using this class to interact with my LoginScreen and my RegistrationScreen.
Am I exporting this class incorrectly?
RegistrationScreen.js
import { Image, Text, TextInput, TouchableOpacity, View } from "react-native";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import styles from "./styles";
import { auth } from "../../model/config";
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
import useAuth from "../../hooks/useAuth";
export default function RegistrationScreen({ navigation }) {
const [fullName, setFullName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const { registerUser } = useAuth();
const onFooterLinkPress = () => {
navigation.navigate("Login");
};
return (
<View style={styles.container}>
<KeyboardAwareScrollView
style={{ flex: 1, width: "100%" }}
keyboardShouldPersistTaps="always"
>
<Image
style={styles.logo}
source={require("../../../assets/icon.png")}
/>
<TextInput
style={styles.input}
placeholder="Full Name"
placeholderTextColor="#aaaaaa"
onChangeText={(text) => setFullName(text)}
value={fullName}
underlineColorAndroid="transparent"
autoCapitalize="none"
/>
<TextInput
style={styles.input}
placeholder="E-mail"
placeholderTextColor="#aaaaaa"
onChangeText={(text) => setEmail(text)}
value={email}
underlineColorAndroid="transparent"
autoCapitalize="none"
/>
<TextInput
style={styles.input}
placeholderTextColor="#aaaaaa"
secureTextEntry
placeholder="Password"
onChangeText={(text) => setPassword(text)}
value={password}
underlineColorAndroid="transparent"
autoCapitalize="none"
/>
<TextInput
style={styles.input}
placeholderTextColor="#aaaaaa"
secureTextEntry
placeholder="Confirm Password"
onChangeText={(text) => setConfirmPassword(text)}
value={confirmPassword}
underlineColorAndroid="transparent"
autoCapitalize="none"
/>
<TouchableOpacity
style={styles.button}
onPress={() => registerUser(email, password)}
>
<Text style={styles.buttonTitle}>Create account</Text>
</TouchableOpacity>
<View style={styles.footerView}>
<Text style={styles.footerText}>
Already got an account?{" "}
<Text onPress={onFooterLinkPress} style={styles.footerLink}>
Log in
</Text>
</Text>
</View>
</KeyboardAwareScrollView>
</View>
);
}