How to record audio in react-native using recorderService from usePlatformService

Sendbird Chat UIKit React Native
, , ,
1

I’m trying to record audio in a React Native project using recorderService from usePlatformService in Sendbird UIKit. The goal is to start recording, stop it, and then access the URI of the recorded audio to send it as a voice note in the chat. However, the recorderService.uri returns undefined after stopping the recording.

Here’s some sample code

// Recording start and stop logic
const startRecording = async () => {
  try {
    addStateListener();
    await recorderService.record();
    setIsRecording(true);
    console.log('Recording started');
  } catch (error) {
    console.error('Failed to start recording:', error);
  }
};

const stopRecording = async () => {
  try {
    await recorderService.stop();
    setIsRecording(false);
    console.log('Recording stopped');
  } catch (error) {
    console.error('Failed to stop recording:', error);
  }
};

const addStateListener = () => {
  return recorderService.addStateListener((state) => {
    if (state === 'completed') {
      const uri = recorderService.options?.uri; // Tried accessing URI here
      if (uri) {
        setRecordedUri(uri);
        console.log('Recording completed, URI:', uri);
       // send message in chat
      } else {
        console.warn('Recording completed but no URI available');
      }
    }
  });
};
2

Hello, @James_O_Connor !
Welcome to the Sendbird community.

We already offer voice messages as a feature.

Is there a specific reason you would need to implement the same functionality using a lower-level API? If so, you can either use the hook useVoiceMessageInput.ts or refer to its logic for guidance.

1 Like
3

Thanks @Airen_Kang, I’ll look into that!

I’m using my own custom Input

const GroupChannelFragment = createGroupChannelFragment({
  Header: GroupChannelHeader,
  Input: GroupChannelInput,
});

So this completely removes everything (as you know) including the functionality of voice notes, sending files etc… so I’m basically re-creating it

4

Ah, I see! Here’s some additional code that might be helpful.

1 Like
5

Thank you for the information! Just one last question:

Is there any way to import or use the VoiceMessageInput component or leverage useVoiceMessageInput directly? I haven’t been able to find a method to do so, any insights would be greatly appreciated.

6

You can import it directly via the path.

import VoiceMessageInput from "@sendbird/uikit-react-native/src/components/ChannelInput/VoiceMessageInput";
import useVoiceMessageInput from "@sendbird/uikit-react-native/src/hooks/useVoiceMessageInput";
1 Like