tencent cloud

React Native
Last updated: 2025-04-18 14:34:15
React Native
Last updated: 2025-04-18 14:34:15

Environment preparations

1. React Native 0.60+
2. Android 5.0+
3. iOS 12.0+
4. Node.js 14+
For more precautions on setting up a development environment, see Set Up a Development Environment。

Step 1. Import SDK

Install SDK via npm or yarn:
npm install trtc-react-native --save
# or
yarn add trtc-react-native

Step 2. Configure Project

Android
iOS
1. Open /android/app/src/main/AndroidManifest.xml file and add the following permissions in which:
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera.autofocus" />
2. Create the proguard-rules.pro file under the android/app directory of the project, and add the following code in the proguard-rules.pro file.
-keep class com.tencent.** { *; }
1. iOS needs to add permission applications for the camera and microphone under the first-level <dict> directory in Info.plist:
<key>NSCameraUsageDescription</key>
<string>Authorize camera permissions for a normal video cal</string>
<key>NSMicrophoneUsageDescription</key>
<string>Authorize microphone permissions for a normal voice call</string>
2. Execute pod install to install native dependencies (need to be executed under the ios directory).
Note：
If you encounter problems during the access process, please see sample project.

Step 3. Create a TRTC Instance

import TRTCCloud from 'trtc-react-native';

// Create a TRTC singleton instance.
const trtcCloud = TRTCCloud.sharedInstance();

Step 4. Enter a Room

import { TRTCParams, TRTCCloudDef } from 'trtc-react-native';

const params = new TRTCParams({
  sdkAppId: SDKAPPID,  // SDKAppID applied in the Tencent Cloud console
  userId: 'user123',   // user id
  userSig: 'xxxxxx',   // user signature (generated on the server side)
  roomId: 2366,        // room numb
});

// Enter the room in audio and video call scenarios
trtcCloud.enterRoom(params, TRTCCloudDef.TRTC_APP_SCENE_VIDEOCALL);
Note：
you can obtain the sdkAppId of your application in the TRTC console, and see user authentication to obtain userSig.

Step 5. Turn on Microphone

trtcCloud.startLocalAudio(); // Start local audio capture and uplink

Step 6. Play/Stop Video Stream

Play Local Video: 
import { TXVideoView } from 'trtc-react-native';

// Render local video in the component
<TXVideoView.LocalView style={{ width: 1080, height: 1080 }} />
Play Remote Video: 
<TXVideoView.RemoteView 
  userId={remoteUserId} 
  streamType={TRTCCloudDef.TRTC_VIDEO_STREAM_TYPE_BIG}
  style={{ width: 1080, height: 1080 }}
/>
Stop playback: 
trtcCloud.stopRemoteView(userId, TRTCCloudDef.TRTC_VIDEO_STREAM_TYPE_BIG);

Step 7. Play/Stop Audio Stream

Play Remote Audio: 
trtcCloud.muteRemoteAudio(userId, false); // `false` means unmute
Stop playback:
trtcCloud.muteRemoteAudio(userId, true);  // `true` means mute

Step 8. Leave the Room

trtcCloud.exitRoom(); // Exit the current room

FAQs

How to Handle Black Screen Issues?

• Check whether the camera permission is authorized.
• Ensure that the TXVideoView component is rendered correctly and its size is not zero.

How to Handle Unable to Enter Room?

• Check whether sdkAppId, userSig and roomId are valid.
• Ensure normal network connection.

Audio Anomaly Occurs. How to Handle It?

• Check whether the microphone permission is authorized.
• Confirm mic status after calling startLocalAudio().

Contact Us

If you have any suggestions or feedback, please contact info_rtc@tencent.com.
Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No

Feedback