Firebase database and react native

Question

The below is a sample structure of the database.

root: {
  users: {
    user_uid_0: {
      name: 'AJ',
      age: 20,
      gender: 'male'
    }
  }
}

The below is how I am fetching data from Firebase:

getData(myValue) {

  // direct ref to a key of 'name' from user_uid_0
  const name = firebase.database().ref('/users/user_uid_0/name');

  // name will go through a listener
  name.on('value', (snapshot) => {
    // define myValue to the snapshot
    myValue = snapshot.val()
    // this.myValue = snapshot.val() tried this...
  });

  // spit out myValue which we defined
  // myValue should be 'AJ'
  // but its not... its undefined
  return myValue;
  // im guessing because myValue is actually not defined...
  // then how do I define it with my snapshot.val()?
}

The below is a react native component that is displaying what the function is returning.

// this should return the string 'AJ' from myValue
// this returns nothing
<Text>{this.getData()}</Text>

The below is what I get when I console log.

// undefined is what I get
console.log(this.getData());

So since this wont work, what will? How can I fetch a data through ref and display it? Please help. I have been struggling with this for days.

Answer 1

Try something like this -

getData = async () => {
  const name = firebase.database().ref('/users/user_uid_0/name');

  var data = await name.once('value')
    .then(snapshot => {
      console.log("value", snapshot.val());
      return snapshot.val();
    })
    .catch(e => {
      console.log("firebase error", e);
      return null;
    });

  return data;
}