Integration

Feature Overview
TUILiveKit is a full-featured live streaming solution designed for seamless integration. It provides the following core modules:
Host Preview Page
Host Live Stream Page
Co-host Management Page
Audience Viewing Page
﻿
﻿
﻿
﻿
Preparations
Activate the Service
Before using TUILiveKit, please refer to Activate Service to get the TUILiveKit Trial Edition or activate the Pro Edition.
Environmental Requirements
Node.js: >= 20.0.0 (recommended to use the official LTS version).
React Native:>= 0.82.1.
Yarn:>= 4.11.0.
Android Studio (Android only).
Xcode 15+ (iOS only.
CocoaPods installed (iOS only). If not, follow the CocoaPods installation guide or run:
sudo gem install cocoapods in your terminal.
Note:
During installation, you may be prompted for your computer password. Enter your administrator password as instructed.
Devices: Two smartphones with working cameras and microphones
Code Integration
Download the Source Code
1. Clone the repository
git clone https://github.com/Tencent-RTC/TUIKit_ReactNative.git
2. Import source code into your project
Copy the tuikit-atomic-x folder into your project’s root directory.
Copy the live folder into your project’s root directory.
3. Configure your package.json file
{
 // Your project configuration
  "workspaces": [
    "tuikit-atomic-x",
    "live",
  ],
}
4. Install dependencies
yarn install
5. Configure your App.tsx file
TUILiveKit’s internationalization and related logic depend on your project’s root node. Mount the component in your App.tsx file.
Note:
The following sample code is an incremental update to your existing project code.
import { CustomToastContainer, i18n, I18nextProvider } from 'react-native-tuikit-atomic-x';
﻿
function App() {
  const renderPage = () => {
    // Your business logic
  };
﻿
  return (
    <I18nextProvider i18n={i18n}>
      ......
      {renderPage()}
      <CustomToastContainer />
    </I18nextProvider>
  );
}
Project Configuration
iOS Platform Setup
Android Platform Setup
1. Add SVGAPlayer to your Podfile
  target 'YourProjectTarget' do  
    # Other existing Pod dependencies...  
    # Add pod 'SVGAPlayer' dependency, the gift playback module uses this capacity
    pod 'SVGAPlayer', '~> 2.5.0'
    
  end
2. Install pods
In your terminal, navigate to the directory containing your Podfile and run:
pod install
3. Configure audio/video permissions in ios/YourApp/Info.plist
<dict>
    camera permission
    <key>NSCameraUsageDescription</key>
    <string>Require the use of camera to perform video call</string>
    
    mic permission
    <key>NSMicrophoneUsageDescription</key>
    <string>Require the use of microphone to perform audio call</string>
    
    android.permission.INTERNET
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>
</dict>
Configure audio/video permissions in android/app/src/main/AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    android.permission.BASE
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    android.permission.RECORD_AUDIO
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <application>
        android.permission.INTERNET
    </application>
</manifest>
Complete Login
import { useLoginState } from 'react-native-tuikit-atomic-x';
﻿
const { login } = useLoginState();
﻿
async function Login() {
  try {
    await login({
      sdkAppID: 0,        // SDKAppID, refer to Activate the Service to obtain
      userID: '',         // UserID, refer to Activate the Service to obtain
      userSig: '',        // userSig, refer to Activate the Service to obtain
    });
  } catch (error) {
    console.error('login error:', error);
  }
}
﻿
Note:
For security, it is strongly recommended to implement the userSig generation logic on your server to avoid exposing your SecretKey in front-end code. 
You can use the console assistant tool to generate a temporary userSig for debugging. For more details, see How to calculate and use UserSig. 
The sample code on GitHub uses the genTestUserSig function to generate userSig locally for quick integration. However, this exposes your SecretKey in the code and is not recommended for production or future upgrades. Parameter descriptions are provided below:
Parameter
Type
Description
SDKAppID
Int
Obtained from TRTC console > Application management.
UserID
String
The current user's unique ID, containing only English letters, digits, hyphens, and underscores.
userSig
String
A ticket for TRTC authentication. Please note:
Development Environment: You can use the local GenerateTestUserSig.genTestSig function to generate a UserSig or generate a temporary UserSig via the UserSig Generation Tool.
Production Environment: To prevent key leakage, you must use a server-side method to generate UserSig. For details, see Server-side Generation of UserSig.
For more information, see how to calculate and use UserSig.
Next Steps
You’re all set! After integrating the live streaming component and completing login, you can start hosting streams, enable audience viewing, and use other live streaming features. See the table below for details.
Feature
Description
Experience Link
Live Stream Publishing
The complete workflow for a host to start a stream, including pre-stream setup and various in-stream interactions.
﻿Live Stream Publishing﻿
Audience viewing
Audience can watch live streaming after entering the anchor's live streaming room, with features like audience mic connection, live room information, online audience, and bullet screen display.
﻿Audience viewing﻿
Live Stream List
Display the live stream list interface and features, including the live stream list and room information display.
﻿Live Stream List﻿
FAQs
iOS Compilation Issues
React Native 0.60+ supports automatic linking. However, if you encounter problems, run the following command:
# Clean up and rebuild
npx react-native clean
Android Compilation Issues
Verify your Gradle configuration:
// android/build.gradle
buildscript {
    ext {
        minSdkVersion = 24
        compileSdkVersion = 36
        targetSdkVersion = 36
        ndkVersion = "27.1.12297006"
        kotlinVersion = "2.1.20"
    }
}

Host Preview Page	Host Live Stream Page	Co-host Management Page	Audience Viewing Page

Parameter	Type	Description
SDKAppID	Int	Obtained from TRTC console > Application management.
UserID	String	The current user's unique ID, containing only English letters, digits, hyphens, and underscores.
userSig	String	A ticket for TRTC authentication. Please note: Development Environment: You can use the local `GenerateTestUserSig.genTestSig` function to generate a UserSig or generate a temporary UserSig via the UserSig Generation Tool. Production Environment: To prevent key leakage, you must use a server-side method to generate UserSig. For details, see Server-side Generation of UserSig. For more information, see how to calculate and use UserSig.

Feature	Description	Experience Link
Live Stream Publishing	The complete workflow for a host to start a stream, including pre-stream setup and various in-stream interactions.	Live Stream Publishing
Audience viewing	Audience can watch live streaming after entering the anchor's live streaming room, with features like audience mic connection, live room information, online audience, and bullet screen display.	Audience viewing
Live Stream List	Display the live stream list interface and features, including the live stream list and room information display.	Live Stream List