please select
  • UIKit
  • SDK
  • Server APIs
Chat/
SDK/
React Native/
SDK
  • Run Demo
  • SDK Integration
  • Initialization
  • Login and Logout
  • Message
    • Message Overview
    • Sending Message
    • Receiving Message
    • Historical Message
    • Forwarding Message
    • Modifying Message
    • Message Inserting
    • Deleting Message
    • Clearing Messages
    • Recalling Message
    • Online Message
    • Read Receipt
    • Querying Message
    • Group @ Message
    • Targeted Group Message
    • Notification Muting
    • Message Extension
  • Group
    • Overview
    • Group Management
    • Group Profile
    • Group Member Management
    • Group Member Profile
    • Custom Group Attribute
    • Community Management
  • User
    • User Profile
    • Friend Management
    • Friend List
    • Blocklist
  • Offline Push
    • Offline Push
  • Local Search
    • Searching for Message
    • Searching for Friend
    • Searching Group
    • Searching for Group Member
  • Signaling
    • Signaling Management
  • Changelog
  • Guideline for Beginners
  • Console Guide
    • Creating and Upgrading an Application
    • Basic Configuration
    • Feature Configuration
    • Account Management
    • Group Management
    • Webhook Configuration
  • Product Introduction
    • Message Management
      • One-to-One Message
      • Message Storage
      • Offline Push
      • Group Message
      • Message Formats
    • Account System
      • Login Authentication
      • Online Status Management
    • Group Related
      • Group System
      • Group Management
    • User Profile and Relationship Chain
      • Profile Management
      • Relationship Chain Management
  • Purchase Guide
    • Billing Overview
    • Pricing
  • Error Codes
Docs Overview/
Chat/
SDK/
React Native/
Run Demo/

Run Demo

This document describes how to quickly run the Tencent Cloud Chat demo for React Native.

Environment Requirements

Platform
Version
React Native
v0.63.4 or later
Android
Android Studio 3.5 or later; devices with Android 4.1 or later for apps
iOS
Xcode 11.0 or later. Ensure that your project has a valid developer signature.

Prerequisites

You have signed up for a Tencent Cloud account and completed identity verification.

Part 1. Creating Test Accounts

In the Chat console, select your application and click Auxiliary Tools > UserSig Generation & Verification on the left sidebar. Enter two UserIDs and generate UserSig values, and copy the UserID, Key, and UserSig for subsequent logins.
Note:
This account is for development and testing only. Before the application is launched, the correct UserSig distribution method is to use the server to generate UserSig and provide an application-oriented API. When UserSig is needed, your application can send a request to the business server for a dynamic UserSig. For more information, see Generating UserSig.





Part 2. Integrating the SDK for React Native

Prerequisites

You have created or already have a React Native project.

Directions

Installing the Chat SDK

Run the following command to install the latest version of the Chat SDK for React Native:
// npm
npm install react-native-tim-js

// yarn
yarn add react-native-tim-js

Initializing the SDK

Call initSDK to initialize the SDK and pass in your sdkAppID.
import { TencentImSDKPlugin, LogLevelEnum } from 'react-native-tim-js';

const sdkAppID = 0;  // Replace 0 with the SDKAppID of your Chat application when integrating
const loglevel = LogLevelEnum.V2TIM_LOG_DEBUG; // Log
const listener = {
    onConnecting: () => {
    },
    //...
}

TencentImSDKPlugin.v2TIMManager.initSDK(
    sdkAppID,
    loglevel,
    listener,
);
In this step, you can mount some listeners to the Chat SDK, mainly including those for network status and user information change. For more information, see Interface V2TimSDKListener.Log in with a test account initially generated in the console for verification.

Logging in with a test account

Call TencentImSDKPlugin.v2TIMManager.login to log in with one of the test accounts you created. If the returned `res.code` is 0, login is successful.
import { TencentImSDKPlugin } from 'react-native-tim-js';
 const res = await TencentImSDKPlugin.v2TIMManager.login(
 userID: userID,
 userSig: userSig,
  );
Note:
This account is for development and testing only. Before the application is launched, the correct UserSig distribution method is to integrate the calculation code of UserSig into your server and provide an application-oriented API. When UserSig is needed, your application can send a request to the business server for a dynamic UserSig. For more information, see Generating UserSig.

Sending messages

The following shows how to send a text message:
1. Call createTextMessage(String) to create a text message.
2. Get the message ID from the returned value.
3. Call sendMessage() and pass in the message ID. For receiver, you can pass in the ID of the other test account. groupID can be left empty.
Sample code:
import { TencentImSDKPlugin } from 'react-native-tim-js';

const createMessage =
      await TencentImSDKPlugin.v2TIMManager
          .getMessageManager()
          .createTextMessage("The text to create");

const id = createMessage.data!.id!; // The message creation ID

const res = await TencentImSDKPlugin.v2TIMManager
      .getMessageManager()
      .sendMessage({
          id: id, // Pass in the message creation ID
          receiver: "The userID of the destination user",
          groupID: "The groupID of the destination group",
      });
Note:
If sending fails, it may be that your sdkAppID doesn't support sending messages to strangers. In this case, you can disable the relationship check feature in the console.

Obtaining the conversation list

Log in with the other test account to pull the conversation list.
The conversation list can be obtained in two ways:
1. Listen for the persistent connection callback to update the conversation list in real time.
2. Call an API to get the conversation list at certain time points.
Common use cases include:
Get the conversation list upon application start and listen for the persistent connection to update the conversation list in real time.
Requesting the conversation at certain time points
To get the conversation list, you need to maintain nextSeq and record its current position.
import { useState } from "react";
import { TencentImSDKPlugin } from "react-native-tim-js";

const [nextSeq, setNextSeq] = useState<string>("0");

const getConversationList = async () => {
  const count = 10;
  const res = await TencentImSDKPlugin.v2TIMManager
    .getConversationManager()
    .getConversationList(count, nextSeq);
  setNextSeq(res.data?.nextSeq ?? "0");
};
At this point, you can see the message sent by the other test account in the previous step.
Listening for the persistent connection to get the conversation list in real time
Mount listeners to the SDK, process the callback event, and update the UI.
1. Mount listeners.
import { TencentImSDKPlugin } from "react-native-tim-js";

const addConversationListener = () => {
  TencentImSDKPlugin.v2TIMManager
 .getConversationManager()
 .addConversationListener({
   onNewConversation: (conversationList) => {
     // new conversation created callback
     _onConversationListChanged(conversationList);
   },
   onConversationChanged: (conversationList) => {
     // conversation changed callback
     _onConversationListChanged(conversationList);
   },
 });
};
2. Process the callback event and display the latest conversation list on the UI.
const _onConversationListChanged = (list) => {
  // you can use conversation list to update UI
};

Receiving messages

Messages can be received with the Chat SDK for React Native in two ways:
1. Listen for the persistent connection callback to get message changes and update and render the historical message list in real time.
2. Call an API to get the message history at certain time points.
Common use cases include:
1. After a new conversation is opened on the UI, request and display a certain number of historical messages.
2. Listen for the persistent connection callback to receive messages in real time and add them to the message list.
Requesting the historical message list at certain time points
To avoid affecting the pull speed, we recommend you limit the number of messages to be pulled per page to 20.
You need to dynamically record the current number of pages for the next request.
Sample code:
import { TencentImSDKPlugin } from "react-native-tim-js";

const getGroupHistoryMessageList = async () => {
  const groupID = "";
  const count = 20;
  const lastMsgID = "";
  const res = await TencentImSDKPlugin.v2TIMManager
    .getMessageManager()
    .getGroupHistoryMessageList(groupID, count, lastMsgID);
  const msgList = res.data ?? [];
  // here you can use msgList to render your message list
};
Listening for the persistent connection to get new messages in real time
After the historical message list is initialized, new messages are from the persistent connection V2TimAdvancedMsgListener.onRecvNewMessage.
After the onRecvNewMessage callback is triggered, you can add new messages to the historical message list as needed.
Sample code for binding a listener:
import { TencentImSDKPlugin } from "react-native-tim-js";

const adVancesMsgListener = {
  onRecvNewMessage: (newMsg) => {
    _onReceiveNewMsg(newMsg);
    /// ... other listeners related to message
  },
};

const addAdvancedMsgListener = () => {
  TencentImSDKPlugin.v2TIMManager
    .getMessageManager()
    .addAdvancedMsgListener(adVancesMsgListener);
};
At this point, you have completed the Chat module development, and now users can send and receive messages and enter different conversations. You can develop more features, such as group, user profile, relationship chain, offline push, and local search. For detailed directions, see here.

FAQs

What should I do if Undefined symbols for architecture x86_64 [duplicate] is reported during demo running?

See here.