Receive data from firebase in react native

Question

I connected react native with firebase and i can create a item in the database and receive it in the console log but not on screen. I think there is some latency from running the function and get everything done.

At this moment i created a function that's reading the item in the database and it's only getting fired when i click the button. In the console log i get the right data but i can't stored it to a variable and show it on screen, when i try this with this function the screen stays blank..

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image, Button, ScrollView} from 'react-native';
import firebase from 'react-native-firebase';

 let username;
class locationScreen extends Component {

  onTestClick = ()=>{
   const dbRef = firebase.database().ref("testdata")
    dbRef.set("hello worlf from app")
  }

  readUserData =() => {
    console.log('test oke');
    firebase.database().ref('/Users/1').on('value', function (snapshot) {
        test = snapshot.val();
        this.username = test.Gebruikersnaam;
        console.log(this.username);
    });
}

  render() {
      return (
        <ScrollView>

        <View style={styles.container}>
          <View>
            <Text style={styles.welcome}>{this.username}</Text>
            <Button title={"Create test record"} onPress={this.readUserData}></Button>
          </View>
        </View>
      </ScrollView>
      );
    }
  }

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
    },
    welcome: {
      marginTop: 300,
    },
    instructions: {
      textAlign: 'center',
      color: '#333333',
      marginBottom: 15,
    },
    button: {

    }
  });

  export default locationScreen;

What i should achieve is when i get to this screen 'locationScreen' the data from firebase gets loaded and visible on screen without pushing some button. I think it's a very easy question but i can get it fixed.. Currently i'm using react-native 0.59.2 and react-native-firebase 5.5.6

Answer 1

My database structure:

You can try:

var ref = firebase.database().ref(`${mValue}`)
ref
.limitToLast(20)
.on('child_added', snapshot => console.log(snapshot));

or

var ref = firebase.database().ref(`${mValue}`);
    ref.once("value")
    .then((snapshot) => {
        let Id = snapshot.child("ID").val()
        let Name = snapshot.child("name").val()
        let Avatar = snapshot.child("Avatar").val()
        let email = snapshot.child("email").val()

        let arr = this.state.arrUser
        arr.push({Id, Name, Avatar, email})
        this.setState({arrUser: arr})
    }).catch(err=> console.log(err));

link to refer

Answer 2

What you need to do is use the components state and store your value there so you can render it once received from Firebase, follow along:

class locationScreen extends Component {
state = {
       username: ""
};

//... rest of your code

Above you have initialized a state with an empty username String value. Change your readUserData function to reflect the following:

readUserData =() => {
    console.log('test oke');
    firebase.database().ref('/Users/1').on('value', function (snapshot) {
        test = snapshot.val();
        this.setState({ username: test });
        console.log(this.state.username);
    });

Above simply took the data and using the setState() function reassigned the state username value to reflect the value from data retrieved. Finally on your render, change the following:

<Text style={styles.welcome}>{this.state.username}</Text>

This will render the state value of username, after you fire the function and the data is retrieved, the state will change and reflect here.

Hope this helps!