Having a problem with loading audios from Realtime database and playing with touchableopacity in react native

Question

I have some pronunciations stored in firebase storage and then from there with the help of access token, they're stored in realtime database. In UI, I've touchable opacity (in react native) to play those pronunciations one after the other. But pronunciations don't get played immediately, they take a good 2 or 3 seconds to load and if I don't wait for 2-3 seconds and press the button immediately and consecutively more than once like 2,3 or 4 times, I've noticed that then none of my pronunciations are playing (current one,previous one, next one,none by the way I have next and back buttons to show my data in order from database) as long as I refresh my app. But my other data (Text and images) is displayed correctly and normally, there's only a problem with audios. Can someone help me how to solve this problem? Also I have the same problem whether I use ref().on or ref().once.

HERE'S App.js:

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,
  TouchabelOpacity,
  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);
function inchey(){
   sethey(hey + 1);
 }

  function decchey(){
  sethey(hey - 1);
}


  useEffect(() => {
    getDatabase();    
  }, [hey]);
  
  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)
      });
     
     
    });
  
  }


  return (

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

          
          <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>
         <TouchableOpacity onPress={() => {
           return pronunn.play();
         }}
        >
            <Text>Pronunciation</Text>
        </TouchableOpacity>

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

           inchey();
     
           }
         
          }
        }
           >

           </Button>

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

           </Button>
           </View>
         
  
        </View>
  );
};
export default App;

Answer 1

I couldn't understand if taking too long is the problem or you want your app to handle that waiting moment. If you want your app to handle the issue, I would suggest creating a boolean useState that keeps the status between the start and end of the database request. In your case, setting this boolean to true in your useEffect right before getDatabase(); and setting it to false right after you set your data. This way, you are able to provide a boolean to your button components disable prop. If your boolean is true it should be disabled and when you get data it will become enabled.