React Native Firebase Authentication Displayname null

Question

I have created an authentication with firebase in my mobile app. While the user is registering, I need to give the displayName with the updateProfile method. When the user registers, it automatically goes to the homepage. I want the name I call with displayName on the Main Page, but it is null. Whenever I refresh the page, then the information comes.

Register Method

 register: async (email, password, name, imageUri) => {
      try {
       return await auth()
          .createUserWithEmailAndPassword(email, password)
          .then( async (res) => {
            const update = {
              displayName: name,
              photoURL:
                imageUri,
            };
            await res.user.updateProfile(update)
          })
      } catch (e) {
        console.log(e);
      }
    }

My Navigation

  const Routes = () => {
  const {user, setUser} = useContext(AuthContext);
 

  return (
      <NavigationContainer>
     {user ?  <Tabs.Navigator>
        <Tabs.Screen
          name="Homepage"
          component={Home}
          options={{
            title: 'Home Page',
            headerShown: false,
            tabBarIcon: props => <IconFeather name="home" {...props} />,
            tabBarIconStyle: {fontWeight: '900'},
          }}
        />
        <Tabs.Screen
          name="SecondPage"
          component={SecondPage}
          options={{
            headerShown: false,
            tabBarIcon: props => <IconFeather name="grid" {...props} />,
            title: 'Second Page',
          }}
        />
      </Tabs.Navigator> : <AuthStack />}
    </NavigationContainer>
  );
};

export default Routes;

This is how I pull the data.

const Header = () => {

  const {user} = useContext(AuthContext);

  return (
    <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems:'center'}}>
      <View style={{maxWidth:'80%'}}>
        <Text style={{fontSize: 24, fontWeight: '500'}}>Selam,</Text>
        <Text style={{fontSize: 18, fontWeight: '500'}}>{user.displayName}</Text>
      </View>
      <View>
        <Image
          style={styles.tinyLogo}
          source={{
            uri: user.photoURL,
          }}
        />
      </View>
    </View>
  );
};

Data comes when I refresh

Answer 1

The recommended way is to keep user account-related information in the database.

async (email, password, name, imageUri) => {
  try {
    return await auth()
      .createUserWithEmailAndPassword(email, password)
      .then(async (res) => {
        const userInfo = {
          displayName: name,
          photoURL: imageUri,
        };
        // Add user account information in Firestore to be retrieved later.
        await firestore().collection("users").doc(res.user.uid).set(userInfo);
      });
  } catch (e) {
    console.log(e);
  }
};