I am new to react, firebase and stack overflow so please bear with me. I'm trying to create a user registration form with firebase that includes a 'name' input. It does work to update the display name, but not fast enough to show the name when the user first logs in. I need to save the homescreen.js file and then the display name populates.
code from registerscreen.js
const [name, setName] = useState('')
const handleRegister = async () => {
if (confirmPass !== password){
alert('Passwords Do Not Match')
return false}
else{
}
try{
const user = await createUserWithEmailAndPassword(auth, email, password)
updateProfile(auth.currentUser, {displayName: name})
console.log('logged in with', user.email)
} catch (error) {
alert(error.message);
}
and here is the text on the homescreen.js to display the users name:
<Text style={styles.text}>Logged in as {auth.currentUser?.displayName}</Text>
I think you have two good options.
// registerscreen.js
await AsyncStorage.setItem('name', name);
// homescreen.js body
const name = await AsyncStorage.getItem('name');
// homescreen.js return
<Text style={styles.text}>Logged in as {auth.currentUser?.displayName || name}</Text>
Docs for AsyncStorage are here.
// homescreen.js body
// get auth object, however you are doing this already
const auth = await getAuth();
// homescreen.js return
return (
auth?.currentUser
? // your current component here
: <LoadingScreen />
);
LoadingScreen could be something like
<View style={[StyleSheet.absoluteFill, { justifyContent: 'center', alignItems: 'center'>
<LoadingIndicator />
</View>
Just like createUserWithEmailAndPassword, the call to `updateProfile is an asynchronous call, so you'll want to await until it's done:
await updateProfile(auth.currentUser, {displayName: name})