Platform | Version |
React Native | v0.75.0 or later. |
Android | Android Studio 3.5 or later. The app requires Android 4.1 or later devices. |
iOS | Xcode 11.0 or later. For testing with a real device, make sure that your project has a valid developer signature. |
Node | Version 18.0 or later. |
npx react-native doctor
for environment diagnostics.npx react-native@latest init chatExample
npm react-native
creates projects with Android gradle version 8.8. If your Android gradle version is lower than 8.8, please open Android Studio to sync the gradle version.npm install @tencentcloud/chat tim-upload-plugin @react-native-community/netinfo --save
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`let chat = TencentCloudChat.create(options); // The SDK instance is usually referred to as chatchat.setLogLevel(0); // Normal level, with a lot of logs; it's recommended for integration// Register the Tencent Cloud Instant Messaging rich media resource upload pluginchat.registerPlugin({'tim-upload-plugin': TIMUploadPlugin});// Register the network monitoring pluginchat.registerPlugin({'chat-network-monitor': NetInfo});
let onSdkReady = function(event) {// After listening to the SDK ready event, you can make API calls};chat.on(TencentCloudChat.EVENT.SDK_READY, onSdkReady);
let onSdkNotReady = function(event) {// chat.login({userID: 'your userID', userSig: 'your userSig'});};chat.on(TencentCloudChat.EVENT.SDK_NOT_READY, onSdkNotReady);
let onMessageReceived = function(event) {// event.data - An array that stores `Message` objects - [Message]};chat.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, onMessageReceived);
let onConversationListUpdated = function(event) {console.log(event.data); // Array that stores Conversation instances};chat.on(TencentCloudChat.EVENT.CONVERSATION_LIST_UPDATED, onConversationListUpdated);
chat.destroy();
let promise = chat.login({userID: 'your userID',userSig: 'your userSig',});promise.then(function(imResponse) {if (imResponse.data.repeatLogin === true) {// This indicates that the account is already logged in. This login attempt is a duplicate login.console.log(imResponse.data.errorInfo);}}).catch(function(imError) {// Information related to login failureconsole.warn('login error:', imError);});
npm run android
to compile and run the project.npm run android
cd iospod install
npm run ios
to compile and run the project.cd ../npm run ios
npm install react-native-image-picker --save
import {launchImageLibrary} from 'react-native-image-picker';// 1. Select an ImagelaunchImageLibrary({mediaType: 'photo',selectionLimit: 1,}).then((result) => {const file = result.assets[0];// 2. Create a message instance. The instance returned by the interface can be displayed on the screenlet message = chat.createImageMessage({to: 'user1',conversationType: TencentCloudChat.TYPES.CONV_C2C,payload: { file: file },// React Native does not support upload progress callback// onProgress: function(event) { console.log('file uploading:', event) }});// 3. Send Imagelet promise = chat.sendMessage(message);promise.then(function(imResponse) {// The message was successfully sentconsole.log(imResponse);}).catch(function(imError) {// The message failed to be sentconsole.warn('sendMessage error:', imError);});});
import {launchCamera} from 'react-native-image-picker';// 1. Take PhotolaunchCamera({mediaType: 'photo',cameraType: 'back',}).then((result) => {const file = result.assets[0];// 2. Create a message instance. The instance returned by the interface can be displayed on the screenlet message = chat.createImageMessage({to: 'user1',conversationType: TencentCloudChat.TYPES.CONV_C2C,payload: { file: file },// React Native does not support upload progress callback// onProgress: function(event) { console.log('file uploading:', event) }});// 3. Send Imagelet promise = chat.sendMessage(message);promise.then(function(imResponse) {// The message was successfully sentconsole.log(imResponse);}).catch(function(imError) {// The message failed to be sentconsole.warn('sendMessage error:', imError);});});
import {launchImageLibrary} from 'react-native-image-picker';// 1. Select a VideolaunchImageLibrary({mediaType: 'video',selectionLimit: 1,}).then((result) => {const file = result.assets[0];// 2. Create a message instance. The instance returned by the interface can be displayed on the screenlet message = chat.createVideoMessage({to: 'user1',conversationType: TencentCloudChat.TYPES.CONV_C2C,payload: { file: file },// React Native does not support upload progress callback// onProgress: function(event) { console.log('file uploading:', event) }});// 3. Send Videolet promise = chat.sendMessage(message);promise.then(function(imResponse) {// The message was successfully sentconsole.log(imResponse);}).catch(function(imError) {// The message failed to be sentconsole.warn('sendMessage error:', imError);});});
import {launchCamera} from 'react-native-image-picker';// 1. Record VideolaunchCamera({mediaType: 'video',cameraType: 'back',}).then((result) => {const file = result.assets[0];// 2. Create a message instance. The instance returned by the interface can be displayed on the screenlet message = chat.createVideoMessage({to: 'user1',conversationType: TencentCloudChat.TYPES.CONV_C2C,payload: { file: file },// React Native does not support upload progress callback// onProgress: function(event) { console.log('file uploading:', event) }});// 3. Send Videolet promise = chat.sendMessage(message);promise.then(function(imResponse) {// The message was successfully sentconsole.log(imResponse);}).catch(function(imError) {// The message failed to be sentconsole.warn('sendMessage error:', imError);});});
npm install react-native-document-picker --save
import DocumentPicker from 'react-native-document-picker';// 1. Select FileDocumentPicker.pick({type: [DocumentPicker.types.allFiles],}).then((result) => {const file = result[0];// 2. Create a message instance. The instance returned by the interface can be displayed on the screenlet message = chat.createFileMessage({to: 'user1',conversationType: TencentCloudChat.TYPES.CONV_C2C,payload: { file: file },// React Native does not support upload progress callback// onProgress: function(event) { console.log('file uploading:', event) }});// 3. Send Filelet promise = chat.sendMessage(message);promise.then(function(imResponse) {// The message was successfully sentconsole.log(imResponse);}).catch(function(imError) {// The message failed to be sentconsole.warn('sendMessage error:', imError);});});
npm install react-native-audio-recorder-player --save
import AudioRecorderPlayer, {AVEncodingOption} from 'react-native-audio-recorder-player';// Record recording durationlet duration = 0;// Record recording file pathlet uri = '';// 1. Start recordingconst onStartRecord = async () => {await audioRecorderPlayer.startRecorder('test.aac',{VFormatIDKeyIOS: AVEncodingOption.aac,});audioRecorderPlayer.addRecordBackListener((e: any) => {duration = e.currentPosition;});};// 2. Stop recordingconst onStopRecord = async () => {uri = await audioRecorderPlayer.stopRecorder();audioRecorderPlayer.removeRecordBackListener();};// 3. Send voiceconst file = {uri: uri,duration: duration,};let message = chat.createAudioMessage({to: 'user1',conversationType: 'C2C',payload: {file: file,},// React Native does not support upload progress callback// onProgress: function(event) { console.log('file uploading:', event) }});let promise = chat.sendMessage(message);promise.then(function(imResponse) {// The message was successfully sentconsole.log(imResponse);}).catch(function(imError) {// The message failed to be sentconsole.warn('sendMessage error:', imError);});
VoiceMessage
to play across all platforms, packaging the iOS app requires specifying VFormatIDKeyIOS as AVEncodingOption.aac for voice recording.<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /><uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /><uses-permission android:name="android.permission.RECORD_AUDIO" />
<key>NSCameraUsageDescription</key><string>We need access to your camera to take photos</string><key>NSPhotoLibraryUsageDescription</key><string>We need access to your album to select photos</string><key>NSMicrophoneUsageDescription</key><string>We need access to your microphone to record audio</string>
const file = {uri: 'xxx',fileName: 'xxx',fileSize: 1,type: 'xxx',width: 1,height: 1,};
const file = {uri: 'xxx',fileName: 'xxx',fileSize: 1,type: 'xxx',duration: 0,};
const file = {uri: 'xxx',name: 'xxx',size: 1,};
const file = {uri: 'xxx',fileName: 'xxx',fileSize: 1,duration: 0,};
export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/platform-tools
cd iosecho export NODE_BINARY=$(command -v node) > .xcode.env
Was this page helpful?