Home > Net >  firebase realtime database is not getting fetched with onPress in react native, have to refresh the
firebase realtime database is not getting fetched with onPress in react native, have to refresh the

Time:04-11

I have a realtime database with main node 'user' and then inside it i have 3 child nodes and those 3 child nodes have 4 more child nodes, each of them. One of the 4 nodes is a recording, one is image and 2 of them are strings. I am trying to fetch them dynamically with Next and Back button where on pressing next, next node's data is displayed on screen.

I am using a useState for dynamically changing the path of database (ref), but on pressing the next/back button, my data on screen does not get updated. Also later I found out that after pressing next/back button when I refresh/rewrite the ref().on function, my data gets updated, but I have to do this for every press.

Here's my App.js code:

import Sound from 'react-native-sound';
import database from '@react-native-firebase/database';
import storage from '@react-native-firebase/storage';
import React , {useEffect, useState} from 'react';
import {
  ScrollView,
  StyleSheet,
  Alert,
  Text,
  View,
  Image,
  Button
} from 'react-native';

const App = () => {
 
  const [myData,setData] = useState({
    letter:'',
    pronun:'',
    word:'',
    image:''
  });
  const [img,setimg] = useState(null);
  const [pronunn,setpronun] = useState(null);
  const [hey,sethey] = useState(1);


  useEffect(() => {
    getDatabase();   
}, []);
  
  function getDatabase() {
    
database().ref('users/' hey '/').on('value' , (snapshot) => {
  Sound.setCategory('Playback', true);
  var poo=new Sound(snapshot.val().pronun);
  setData({
    letter: snapshot.val().letter,
    word: snapshot.val().word,
    image: setimg(snapshot.val().image),
    pronun: setpronun(poo)
  });
  console.log(snapshot.val());
});
 }

  return (

<View style={{flex:1, backgroundColor:'#000000', alignContent:'center', alignItems:'center', justifyContent:'center'}}>
  

      <ScrollView>
      <Text style={{color:'#ffff'}}>
    Letter: {myData ? myData.letter : 'loading...' }
  </Text>

  <Text style={{color:'#ffff'}}>
    Word: {myData ? myData.word : 'loading...' }
  </Text>
  <Image style={{width:200, height:200}} 
  source={{uri: img}} 
    />

   <View>
     <Button
     title='Pronunciation'
     onPress={() => {
       return pronunn.play();
     }}
     >

     </Button>

     <Button title='Next' onPress={
       
       () => {
         if (hey>2) {
          Alert.alert('no more records');
         }
         else {

       return sethey(hey 1);
  
         }
       }
      }
       >

       </Button>

       <Button title='back' onPress={
       
       () => {
         if (hey<2) {
          Alert.alert('no more records to go back');
         }
         else {
       return sethey(hey-1);
         }
       }
      }
       >

       </Button>
       </View>
      </ScrollView>

    </View>
);
};

export default App;

CodePudding user response:

Since your setData hook/effect depends on the hey state, you need to specify the latter as a dependency in useEffect for the data loading.

useEffect(() => {
  getDatabase();   
}, [hey]);

Also see:

  • Related