tencent cloud

$0 14-Day TrialExperience EdgeOne for acceleration and security protection!

Feedback

Chat

ReactNative

Last updated: 2023-08-23 17:25:23
By default, TUIKit implements the sending and display of basic message types such as text, pictures, voice, video, and files. If these message types cannot meet your needs, you can add custom message types.

Message Type

Message Type
Rendering
Text Message



Image Message



Sound Message



Video Message



File Message




Custom Message

If the basic message types cannot meet your needs, you can customize messages based on actual business needs.
Custom class messages are received in the same way as other common types of messages, and all types of messages are obtained by listening to the onRecvNewMessage event.
The received custom messages are displayed in the message list in different forms according to the corresponding specific type fields.
Let's explain how to display custom messages.

Create a custom message display structure

You can add the custom message display structure style you need under the path src/TUUIKit/components/TUIMessage/element/custom_element.tsx file.
import React from 'react';
import {Text} from 'react-native';
import type {V2TimMessage} from 'react-native-tim-js/lib/typescript/src/interface';

export const CustomElement = (props: {message: V2TimMessage}) => {
const {message} = props; //message contains all the properties of the current custom message, and you can change the rendering result according to your custom requirements.
console.log(message);
return <Text>["custom message"]</Text>;
};


Send Custom Message

You can send a custom message by calling the createCustomMessage method. You can send different types of custom messages by building different data items.
The sample code for sending a custom message is as follows:
import { TencentImSDKPlugin } from 'react-native-tim-js';

// create custom message
const createCustomMessageRes = await TencentImSDKPlugin.v2TIMManager
.getMessageManager()
.createCustomMessage({
data: '自定义data',
desc: '自定义desc',
extension: '自定义extension',
});
if (createCustomMessageRes.code === 0) {
const id = createCustomMessageRes.data?.id;
// send custom message
// When sendingMessage, if you only fill in the receiver, you will send a single chat message for individual users
// If only the groupID is filled in, you will send a group message
// If you fill in the receiver and groupID, it will be sent to individual users in the group, and the message will be displayed in the group chat, and only the specified receiver can see it
const sendMessageRes = await TencentImSDKPlugin.v2TIMManager
.getMessageManager()
.sendMessage({ id: id!, receiver: 'userID', groupID: 'groupID' });
if (sendMessageRes.code === 0) {
// success
sendMessageRes.data?.customElem?.data; //custom data
sendMessageRes.data?.customElem?.desc; //custom desc
sendMessageRes.data?.customElem?.extension; //custom extension
}
}


Contact Us

Contact our sales team or business advisors to help your business.

Technical Support

Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

7x24 Phone Support
Hong Kong, China
+852 800 906 020 (Toll Free)
United States
+1 844 606 0804 (Toll Free)
United Kingdom
+44 808 196 4551 (Toll Free)
Canada
+1 888 605 7930 (Toll Free)
Australia
+61 1300 986 386 (Toll Free)
EdgeOne hotline
+852 300 80699
More local hotlines coming soon