stopRecorder() is not working - react-native-audio-recorder-player

Question

I'm trying to record audio in react native app using package react-native-audio-recorder-player. Audio recording starts successfully but keep recording even after calling stopRecorder().

Tried number of solutions from gitHub 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';

export const Recorder = () => {
 const audioRecorderPlayer = new AudioRecorderPlayer();

 const onStartRecord = async () => {
  await audioRecorderPlayer.startRecorder();
  audioRecorderPlayer.addRecordBackListener(e => {
    console.log('Recording . . . ', e.current_position);
     return;
    });
  };

 const onStopRecord = async () => {
  const audio = await audioRecorderPlayer.stopRecorder();
  audioRecorderPlayer.removeRecordBackListener();
  };

 return (
  <View style={{flex: 1, justifyContent: 'center', alignItems: 'space-between'}}>
   <TouchableOpacity onPress={onStartRecord}>
     <Text>Start</Text>
   </TouchableOpacity>

   <TouchableOpacity onPress={onStopRecord}>
     <Text>Stop</Text>
   </TouchableOpacity>
  </View>
 );
};

Even after pressing Stop, console is still getting Recording . . ., following is my console.

Answer 1

For this work, need to add const audioRecorderPlayer = new AudioRecorderPlayer(); outside the component. So, component will look like this.

import React from 'react';
import { View, TouchableOpacity, Text} from 'react-native';
import AudioRecorderPlayer from 'react-native-audio-recorder-player';

const audioRecorderPlayer = new AudioRecorderPlayer();

export const Recorder = () => {
 const onStartRecord = async () => {
  await audioRecorderPlayer.startRecorder();
  audioRecorderPlayer.addRecordBackListener(e => {
    console.log('Recording . . . ', e.current_position);
     return;
    });
  };

 const onStopRecord = async () => {
  const audio = await audioRecorderPlayer.stopRecorder();
  audioRecorderPlayer.removeRecordBackListener();
  };

 return (
  <View style={{flex: 1, justifyContent: 'center', alignItems: 'space-between'}}>
   <TouchableOpacity onPress={onStartRecord}>
     <Text>Start</Text>
   </TouchableOpacity>

   <TouchableOpacity onPress={onStopRecord}>
     <Text>Stop</Text>
   </TouchableOpacity>
  </View>
 );
};

After this change, my stopRecorder is working like charm.