CODEWITHSUNDEEP
firebasereact-nativegoogle-cloud-firestore
lwisi
lwisi

Reputation: 303

Displaying user data from Firebase Firestore in React Native within a Text tag

Background Hey! I'm trying to build a header for the home page of my app. I have succesfully implemented email/password auth with Firebase and also persistent credentials. However, I am unable to fetch data from the firestore collection which stores my users. Basically, what I need is to have my header display "Hello {userName}", but I have absolutely no clue on how to do that. My Home Screen is a function component, not a class component, so as far as I know I can't go the "componentDidMount()" way.

Question

Which is the best way to fetch the current user's data and display a specific field of information, such as their first name?

How would I go about rendering that within a <Text> tag? Is it something like <Text> Hello {this.user.firstName}</Text> or am I absolutely wrong?

What I've tried

I know this has something to do with this line of code: const usersRef = firebase.firestore().collection('users') but I've no idea what to follow it up with. Also have tried with this method:

    var user = firebase.auth().currentUser;
    var firstName, email, photoUrl, uid, emailVerified;

    if (user != null) {
    firstName = user.firstName;
    email = user.email;
    photoUrl = user.photoURL;
    emailVerified = user.emailVerified;
    uid = user.uid; 
    }

But that doesn't seem to work. On the last example I'm calling firstName like this: <Text>Hello {firstName}</Text>

Upvotes: 1

Views: 3617

Answers (1)

Perniferous
Perniferous

Reputation: 611

You are confusing auth with firestore. Firebase auth only provides credentials and the ability to login and does not enter any data into a database (firestore). What you want to do is when a user is registering you want to set a corresponding document in firestore with the users uid (identification) and all of the users custom data (First name, etc).

Here is an example:

  const onRegister = async () => {
    try {
      const credential = await auth.createUserWithEmailAndPassword(
        '[email protected]',
        'password',
      );
      const {uid} = credential;
      // your data here (dont forget to store the uid on the document)
      const user = {
        firstName: 'whatever',
        lastName: 'whatever',
        user_id: uid,
      };
      await firestore().collection('users').doc(uid).set(user);
    } catch {
      //do whatever
    }
  };

and then when you wanna get their data you can access their document and display it:

  const [user, setUser] = useState();
  const {uid} = auth().currentUser;

  const getUser = async () => {
    try {
      const documentSnapshot = await firestore()
        .collection('users')
        .doc(uid)
        .get();

      const userData = documentSnapshot.data();
      setUser(userData);
    } catch {
      //do whatever
    }
  };

  // Get user on mount
  useEffect(() => {
    getUser();
  }, []);

  // return info if user is set
    return (
      <Text>{user && user?.firstName}</Text>
    );

Upvotes: 6

Related Questions