want to show the number of the seconds of audio recorded by using react-native-audio-recorder-player

Question

I'm trying to show the number of seconds when recording started but after starting the recording i'm updating the state but this is not working after clicking stop button state is updated also function is calling but recording is not stopping.

I tried all the possible things but nothing helping. Here is my code

import React from 'react';
import { View, TouchableOpacity, Text} from 'react-native';
import AudioRecorderPlayer from 'react-native-audio-recorder-player';
const [rectime, setrectime] = useState(0)

export default function ChatScreen({ navigation, user, route }) {

const audioRecorderPlayer = new AudioRecorderPlayer();
const dirs = RNFetchBlob.fs.dirs;
const path = Platform.select({
      ios: 'hello.m4a',
      android: `${dirs.CacheDir}/hello.mp3`,
});

const onStartRecord = async () => {

await audioRecorderPlayer.startRecorder(path);
audioRecorderPlayer.addRecordBackListener(e => {
  console.log('Recording . . . ', e);
   setrectime(e.currentPosition / 1000)
});

};


const onStopRecord = async () => {

const audio = await audioRecorderPlayer.stopRecorder().then(() => {
 
})

   return (() => {
   alert('stop')
   audioRecorderPlayer.removeRecordBackListener()
   setrectime(0)
   })
   sendmp3(path)

   };

   return(
      <View style={[styles.footer]}>
      
      <TouchableOpacity activeOpacity={0.5} onPress={() => onStartRecord()} style= 
           {styles.btnSendd}>
        <Ionicons name={'mic-circle-outline'} size={24} color={'#000'} />
      </TouchableOpacity>
      
      <TouchableOpacity activeOpacity={0.5} onPress={() => onStopRecord()} style= 
        {styles.btnSendd}>
        <Ionicons name={'mic-circle-outline'} size={24} color={'#efc100'} />
      </TouchableOpacity>

      {
        rectime > 0
          ?
          <View style={styles.rectime}>
            <Text style={{ fontSize: 15 }}>{rectime.toFixed(0)}</Text>
          </View>
          :
          <>
            <TouchableOpacity activeOpacity={0.5} onPress={handleVideoPicker} style= 
             {styles.btnSendd}>
              <Ionicons name={'videocam-outline'} size={24} color={'black'} />
            </TouchableOpacity>
            <TouchableOpacity style={styles.btnSendd} activeOpacity={0.5} onPress= 
             {handlePhotoPicker}>
              <Ionicons name={'camera-outline'} size={24} color={'black'} />
            </TouchableOpacity>
          </>
      }

   )

   }

Answer 1

Please try to define your audioRecorderPlayer object creation outside the function component. Like

const audioRecorderPlayer = new AudioRecorderPlayer();
export default function ChatScreen({ navigation, user, route }) {

}