React Native how to read Real Time Database Firebase

Question

So I got one Screen with the Firebase configuration and one which should call the data. I'd like to have up to date Information. As of now I have the following code:

export const firebaseFetchProfileItem = (category) => {
  var snap;
  database
    .ref("users/" + authentification.currentUser.uid + "/profile/" + category)
    .on("value", function (snapshot) {
      snapshot.val() ? (snap = snapshot.val()) : undefined;
    }),
    function (error) {
      log.error(error);
    };
  return snap;
};

It works "okayish", since it doesnt update the Values the first time I enter a screen, but only after the second time I open the certain screen which should show the values.

The values are called like this in the other screen:

 componentDidMount() {
    this.state.item.bday = firebaseFetchProfileItem("bday");
  }

I tried doing the following:

export const firebaseFetchProfileItem = (category) => {
  return (
  database
    .ref("users/" + authentification.currentUser.uid + "/profile/" + category)
    .on("value", function (snapshot) {
      return snapshot.val() ? (snapshot.val()) : undefined;
    }),
    function (error) {
      log.error(error);
    };
  )
};

But no luck, it returns [Function anonymous] and thus giving the error that components can't be functions etc. When I log snapshot.val(), I get the correct birthday. So I know the mistake lies somewhere in getting the value.

I also tried the following:

export const firebaseFetchProfileItem = (category, item) => {
  database
    .ref("users/" + authentification.currentUser.uid + "/profile/" + category)
    .on("value", function (snapshot) {
      snapshot.val() ? (item = snapshot.val()) : undefined;
    }),
    function (error) {
      log.error(error);
    };
};

and

componentDidMount() {
    firebaseFetchProfileItem("bday", this.state.item.bday);
  }

But no luck either.. where am I going wrong? How can I show the updated value at all times? I also tried some working with promises and async calls, but when I did that it didnt work as planned and the fetch fucntion returned a promise. I also tried using the functions in the same screen but it didn't show any differences.. kinda hopeless atm :D

Thank you very much in advance!

I imagine you'll want to provide a callback to `firebaseFetchProfileItem` so it knows what to do whenever a new value is found. You can't return more than one value from a funcxtion, so doing anything with return values is not going to work. Promises won't help you at all either, because they don't handle ongoing changes. — Doug Stevenson, May 23 '20 at 16:18

score 0 · Accepted Answer · answered May 23 '20 at 16:31

Data is loaded form Firebase asynchronously, which means you can't return it from firebaseFetchProfileItem. Instead what you'd do is have firebaseFetchProfileItem put the data into the state once it's loaded, which then ensures that React repaints the UI based on the new data (including when that data is updated in the database).

export const firebaseFetchProfileItem = (category, item) => {
  database
    .ref("users/" + authentification.currentUser.uid + "/profile/" + category)
    .on("value", function (snapshot) {
      setState({ [category]: snapshot.val() });
    }),
    function (error) {
      log.error(error);
    };
};

Also see:

Thank you very much for your answer, gave me some valuable insight! — Andi Ademi, May 23 '20 at 16:48

React Native how to read Real Time Database Firebase

1 Answers1

Linked