how do i read data from firebase realtime database in react-native using hooks

Question

below is what I have done

useEffect(() => {
        database()
        .ref(`/User/`)
        .on('value', function(snapshot) {
          const list = [];
          snapshot.val(doc => {
            const { name, email} = snapshot.val();
            list.push({
              id: doc.id,
              name,
              email,
            });
          });                



          
          setUsers(list);
          setLoading(false);
    
          console.log('User data: ', snapshot.val());
        });
  
    
        
    }, [userId]);

it shows the information from the database on the console, but it doesn't show on the app, doing this for firebase firestore works fine, but its not loading any information to the app page

below is how I have used flatlist and list.item tags to show the data from the database in the app

<FlatList
data={users}
ItemSeparatorComponent={() => <Divider />}
keyExtractor={item => item.id}
renderItem={({ item }) => (
  <TouchableOpacity
    onPress={() => navigation.navigate('Room', { thread: item })}
  >
    <List.Item
      title={item.name}
      description={item.email}
      titleNumberOfLines={1}
      titleStyle={styles.listTitle}
      descriptionStyle={styles.listDescription}
      descriptionNumberOfLines={1}
    />
  </TouchableOpacity>
)}

/>

I am using the latest versions of react-native and firebase

rkouye · Accepted Answer · 2020-07-20 21:10:49Z

1

You are not supposed to pass a callback to snapshot.val() again.

It should be :

ref.once('value', function(snapshot) {
  snapshot.forEach(function(userSnapshot) {
    var userKey = userSnapshot.key;
    var userData = userSnapshot.val();
    // userData['id'] = userKey;
    users.push(userData); 
  });
});

You can also try this library https://github.com/CSFrequency/react-firebase-hooks.

answered Jul 20, 2020 at 21:10

rkouye

5433 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Frank van Puffelen Over a year ago

Good catch. 1) It's snapshot.forEach indeed, not snapshot.val and 2) you'll want to get the val() of the iterator, as otherwise you're getting /User/name and /User/email every time.

Raphael Inyang Over a year ago

users.push(id, userData); this is what worked, thanks for the clarification 😊😊

Raphael Inyang Over a year ago

anytime the list updates, it forms another array that adds to the previous array, how can i make it to reurn just one array with the updated information

rkouye Over a year ago

@RaphaelInyang you can empty the array before snapshot.forEach ; Something like users = []

Raphael Inyang · Accepted Answer · 2020-07-21 05:37:41Z

0

 database()
          .ref(`/User/`)
          .once('value', function(snapshot) {  snapshot.forEach(function(userSnapshot) {
const id = userSnapshot.key;
const userData = userSnapshot.val();
  userData['id'] = id;
users.push(id, userData);  });});

this is what worked, the flatlist requires an id to be passed, thanks so much, those who helped out 😊😊

answered Jul 21, 2020 at 5:37

Raphael Inyang

1971 gold badge4 silver badges14 bronze badges

Collectives™ on Stack Overflow

how do i read data from firebase realtime database in react-native using hooks

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related