ReactNative : voice record and send voice message, hearing voice message can implement?

I am using react native ui kit.
there is a voice message icon in cometchat ui kit. but there is no voice message function in the code.

Hey @ministar1126
We currently don’t have an option to send a voice message in react native UI kit. You can add this on your own as CometChat does provide an option to send audio files by using the sendMediaMessage method.
So first you need to add an option to record audio messages. You add this in the Messages/CometChatMessageComposer/index.js file. we do have a function that sends media messages and append it to the message list in CometChatMessageComposer called sendMediaMessage.
sendMediaMessage accepts two parameters one is the file object and the second is the file type.
You can refer to the code below.

let audioFile = await AudioRecord.stop();
const file = {
name: ‘filename.wav’,//file name
type: ‘audio/wav’,//mime type
uri: audioFile //file path
};
this.sendMediaMessage(file, CometChat.MESSAGE_TYPE.AUDIO);

React-native-UI-kit already has audio message bubbles to display the audio message in the message list. You can customize them according to your own need. In order to customize them, you can edit the Messages/CometChatSenderAudioMessageBubble/index.js for sender message bubble and Messages/CometChatReceiverAudioMessageBubble/index.js for receiver message bubble.

Note: if you face any issue in the message list with the audio message bubble not rendering properly then add you need to make a change in the Messages/CometChatMessageList/index.js file. in this file search for renderItem function. Inside renderItem function, we are calling getComponent function and passing only the message object inside it. You need to add one more parameter that is the message ID to fix this issue and this will be added in our next release.
{this.getComponent(message, message?.id)}

2 Likes

Hi @ministar1126,

I hope the information shared by Tirath was helpful. I am closing out this ticket due to inactivity. Please feel free to write to us at help@cometchat.com if you require any further assistance.

Regards,
Rahul

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.