tencent cloud

Chat

News and Announcements
Release Notes
Announcements
Product Introduction
Overview
Basic Concepts
Scenarios
Features
Account System
User Profile and Relationship Chain
Message Management
Group Related
Official Account
Audio/Video Call
Use Limits
Purchase Guide
Billing Overview
Pricing
Purchase Instructions
Renewal Guide
Service Suspension Explanation
Refund Policy
Development Guidelines
Demo Zone
Activate Service
Free Demos
Quick Run
Download
SDK and Demo Source Code
Update Log
Chat Interaction (UI Included)
TUIKit Introduction
Getting Started
Full-feature Integration
Single-function Integration
Build with AI
Build Basic Interfaces
More Features
Customizing Appearance
Internationalization
Push Service
Overview
Noun explanation
Activate the Service
Quick Start
Manufacturer Channel
Statistics
Troubleshooting Tool
Client APIs
REST API
Push Callback
Advanced Features
Release Notes
Error Codes
FAQS
Desk
Overview
Quick Start
Integration Guide
Admin Operation Manual
Agent Manual
More Practices
Live Streaming Setup Guide
AI Chatbot
Super Large Entertainment and Collaboration Community
Discord Implementation Guide
How to Integrate Chat into Games
WhatsApp Channel-style Official Account Integration Solution
Send Red Packet
Firewall Restrictions
No UI Integration
Quick Start
SDK Integration
Initialization
Login and Logout
Message
Conversation
Group
Community Topic
User Profile and Relationship Chain
Offline Push
Cloud Search
Local Search
Official Channel Management
Client APIs
JavaScript
Android
iOS & macOS
Swift
Flutter
Electron
Unity
React Native
C APIs
C++
Server APIs
Secure authentication with UserSig
RESTful APIs
Webhooks
Console Guide
New Console Introduction
Creating and Upgrading an Application
Basic Configuration
Feature Configuration
Account Management
Group Management
Official Channel Management
Webhook Configuration
Usage
Viewing Guide for Resource Packages
Real-Time Monitor
Auxiliary Development Tools
Access Management
Advanced Features
FAQs
uni-app FAQs
Purchase
SDK
Account Authentication
User Profile and Relationship Chain
Message
Group
Audio-Video Group
Nickname and Profile Photo
Security Compliance Certification
Service Level Agreement
Security Compliance Certification
Chat Policies
Privacy Policy
Data Privacy and Security Agreement
Migration
Migration Solutions
Migration Solutions Lite
Error Codes
Contact Us

React Native

PDF
Focus Mode
Font Size
Last updated: 2025-01-07 16:23:55
The React Native SDK is an npm package, which is designed for seamless integration of chat functionality into your application. It provides an easy way to interact with chat APIs, allowing you to perform actions such as sending messages, creating groups, pinning conversations, and updating personal avatars. Written in vanilla JavaScript, it is framework-agnostic, meaning it can be used with any frontend framework like Vue, React, React Native, uni-app, Angular, and more.

Prior to reviewing the Chat API documentation, we suggest taking a look at the tutorials and sample apps available.
This guide provides a quick introduction to the TencentCloudChat API, enabling you to quickly grasp its functionality. The API is highly flexible and empowers you to create various types of chat or messaging applications.

Initialize

Let’s get started by initializing the chat instance and listening on events.
import TencentCloudChat from '@tencentcloud/chat';
import TIMUploadPlugin from 'tim-upload-plugin';
import NetInfo from '@react-native-community/netinfo';

let options = {
SDKAppID: 0 // Replace 0 with the SDKAppID of your Chat application when connecting.
};
// Create an SDK instance.
// The `TencentCloudChat.create()` method returns the same instance for the same `SDKAppID`.
// The SDK instance is usually represented by chat.
let chat = TencentCloudChat.create(options);

// Set the SDK log level.
// 0: Common level. You are advised to use this level during access as it covers more logs.
// 1: Release level. You are advised to use this level for key information in a production environment.
chat.setLogLevel(0);
// chat.setLogLevel(1);

// Register the Tencent Cloud Chat upload plugin.
chat.registerPlugin({'tim-upload-plugin': TIMUploadPlugin});
// Register the network monitoring plugin
chat.registerPlugin({'chat-network-monitor': NetInfo});

let onMessageReceived = function(event) {
// event.name - TencentCloudChat.EVENT.MESSAGE_RECEIVED
// event.data - An array to store Messages - [Message]
};
chat.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, onMessageReceived);
And then, Log in to Chat.
await chat.login({userID: 'your userID', userSig: 'your userSig'});

Messages

Let’s continue by sending your first message to "userB"(Assuming "userB" has already logged into the chat).

let message = chat.createTextMessage({
to: 'userB',
conversationType: TencentCloudChat.TYPES.CONV_C2C,
payload: {
text: 'Hello World!'
},
});

await chat.sendMessage(message);

Conversations

If the chat with "userB" is important to you and you need to place it at the top of the conversation list, you can use pinConversation.
await chat.pinConversation({ conversationID: 'C2CuserB', isPinned: true });

Profiles

If you want to change your avatar, you can use updateMyProfile.
await chat.updateMyProfile({
avatar: 'http(s)://url/to/image.jpg',
});

Groups

If you want to create a group chat, for example, to discuss the sales plan for the next quarter with subordinates and colleagues, you can use createGroup.
await chat.createGroup({
type: TencentCloudChat.TYPES.GRP_WORK,
name: 'Sales Plan For The Next Quarter',
memberList: [{
userID: 'lindal',
}, {
userID: 'denny',
}] // If `memberList` is specified, `userID` must also be specified.
});

Following & Followers


Now live streaming and short videos are very popular. If you want to follow a certain celebrity, you can use followUser.
await chat.followUser(['celebrity1', 'celebrity2', 'celebrity3']);

// Get my follower list
await chat.getMyFollowersList();
Want to watch the live streaming and post some interesting comments? You can use joinGroup to join a live group and then use createTextMessage to create a message and then use sendMessage to post it.
await chat.joinGroup({ groupID: 'group1' });

let message = chat.createTextMessage({
to: 'group1',
conversationType: TencentCloudChat.TYPES.CONV_GROUP,
payload: {
text: 'AMAZING!!!'
},
});

await chat.sendMessage(message);

Conclusion

Since you now have a grasp of the fundamental components required for a fully operational chat integration, let's proceed to the subsequent sections of the documentation. In these parts, we will explore the specifics of each API endpoint in greater depth.

Help and Support

Was this page helpful?

Help us improve! Rate your documentation experience in 5 mins.

Feedback