LiveCoreView from the AtomicXCore SDK to quickly build a basic live streaming app with host broadcasting and audience viewing features.LiveCoreView is a lightweight UI component designed specifically for live streaming. It acts as the foundation of your live streaming interface, handling all the underlying technologies—including streaming, co-hosting, and audio/video rendering. Think of LiveCoreView as the “canvas” for your live broadcast, so you can focus on building your custom UI and interactive features.LiveCoreView fits within the live streaming interface:
# 1. Install live streaming core and native build tools (required)npx expo install react-native-tuikit-atomic-x expo-dev-client expo-build-properties# 2. Install UI adaptation and utility libraries (recommended)npx expo install react-native-safe-area-context react-native-toast-message react-native-localize
app.json file in your project root and set the required system permissions for live streaming (camera, microphone, background audio):{"expo": {"name": "ExpoLive","slug": "ExpoLive",// ... Other Configurations"ios": {// ... Other Configurations"bundleIdentifier": "com.anonymous.ExpoLive","infoPlist": {"NSMicrophoneUsageDescription": "This app requires access to your microphone for live streaming.","NSCameraUsageDescription": "This app requires access to your camera for live streaming.","UIBackgroundModes": ["audio"]}},"plugins": ["react-native-localize",["expo-build-properties",{"ios": {"useFrameworks": "static"}}]]}}
AtomicXCore native code library, recompile your native app in the project root to package the new C++/Java/Swift code. This step is required only for initial integration or SDK upgrades; for daily development, proceed directly to step 4.# If you have local Android and iOS development environments, run:npx expo run:ios # Make sure CocoaPods is installednpx expo run:android# Or use cloud build to regenerate the development installation packagenpx eas build --profile development --platform all
npx expo start
login method from LoginState in your project to log in. This step is required before you can use any features of AtomicXCore.login method in LoginState only after your app's own user account login is successful.import { useLoginState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/LoginState';const { login } = useLoginState();const handleLogin = () => {login({sdkAppID: 1400000001, // Replace with your SDKAppIDuserID: "test_001", // Replace with your UserIDuserSig: "xxxxxxxxxx" // Replace with your UserSig});}
Parameter | Type | Description |
SDKAppID | Int | |
UserID | String | The unique ID for the current user. Must contain only English letters, numbers, hyphens, and underscores. |
userSig | String | A ticket for Tencent Cloud 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 Generating UserSig on the Server. For more information, see How to Calculate and Use UserSig. |

LiveCoreView component, set coreViewType to pushView, and bind the current live ID to the component.import { LiveCoreView } from 'react-native-tuikit-atomic-x/lib/module/components/LiveCoreView';export default function YourAnchorScreen({ route, navigation }) {// Define live room ID (must match the liveID used in createLive)// liveID is set by the developer; use a unique identifier (such as UUID or timestamp)// Format: Only English letters, numbers, and underscores, max 64 charactersconst liveID = 'your_live_room_id'; // Replace with your live room IDreturn (<View style={styles.container}><LiveCoreView liveId={liveID} coreViewType="pushView" style={styles.pushView} /></View>);}
openLocalCamera and openLocalMicrophone methods from DeviceState to enable the camera and microphone. No extra steps are needed—LiveCoreView** will automatically preview the current camera video stream.** Example:import { useEffect } from 'react';import { useDeviceState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/DeviceState';const { openLocalCamera, openLocalMicrophone } = useDeviceState();useEffect(() => {openLocalMicrophone({onSuccess: () => { console.log('Microphone enabled successfully'); },onError: (error) => { console.log('Failed to enable microphone', error); },});openLocalCamera({isFront: true,onSuccess: () => { console.log('Camera enabled successfully'); },onError: (error) => { console.log('Failed to enable camera', error); },});}, []);
createLive method from LiveListState to start video live streaming. Example:import { useLiveListState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/LiveListState';const { createLive } = useLiveListState();const startLive = () => {createLive({liveInfo: {liveID: liveID, // Set the live room IDliveName: 'live name', // Set the live room nameseatLayoutTemplateID: 600, // Layout template, default: 600 (dynamic grid)keepOwnerOnSeat: true, // Keep host always on seat},onSuccess: () => { console.log('Live room created successfully'); },onError: (error) => { console.log('Failed to create live room', error); },});};
Parameter Name | Type | Required | Description |
liveID | string | Yes | Unique identifier for the live room. |
liveName | string | No | Title of the live room. |
notice | string | No | Announcement message for the live room. |
isMessageDisable | boolean | No | Disable chat ( true = yes, false = no). |
isPublicVisible | boolean | No | Room is publicly visible ( true = yes, false = no). |
seatMode | string | No | Seat mode ( FREE: free to take seat, APPLY: apply to take seat). |
seatLayoutTemplateID | number | Yes | Seat layout template ID. |
coverURL | string | No | Cover image URL for the live room. |
backgroundURL | string | No | Background image URL for the live room. |
activityStatus | number | No | Live activity status. |
isGiftEnabled | boolean | No | Whether to enable gift functionality ( true: yes, false: no). |
endLive method from LiveListState to stop the stream and close the room.import { useLiveListState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/LiveListState';const { endLive } = useLiveListState();const handleEndLive = () => {endLive({onSuccess: () => { console.log('Live ended successfully'); },onError: (error) => { console.log('Failed to end live', error); },});};

LiveCoreView component, set coreViewType to playView, and bind the current live ID to the component.import { LiveCoreView } from 'react-native-tuikit-atomic-x/lib/module/components/LiveCoreView';export default function YourAudienceScreen({ route, navigation }) {const { liveID } = route.params || {};return (<View style={styles.container}><LiveCoreView liveId={liveID} coreViewType="playView" style={styles.playView} /></View>);}
joinLive method from LiveListState to join the live room. No extra steps are needed—LiveCoreView** will automatically play the room's video stream.** Example:import { useEffect } from 'react';import { useLiveListState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/LiveListState';export default function YourAudienceScreen({ route, navigation }) {const { liveID } = route.params || {};const { joinLive } = useLiveListState();useEffect(() => {joinLive({liveID: liveID,onSuccess: () => { console.log('Joined live room successfully'); },onError: (error) => { console.log('Failed to join live room', error); },});}, []);}
leaveLive method from LiveListState to leave the live stream. The SDK will automatically stop playback and exit the room.import { useLiveListState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/LiveListState';const { leaveLive } = useLiveListState();// Leave live roomconst handleLeaveLive = () => {leaveLive({onSuccess: () => { console.log('Left live room successfully'); },onError: (error) => { console.log('Failed to leave live room', error); },});};
addLiveListListener from LiveListState:import { useEffect } from 'react';import { useLiveListState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/LiveListState';export default function LiveAudienceScreen({ route, navigation }) {const { addLiveListListener, removeLiveListListener } = useLiveListState();useEffect(() => {const onLiveEnded = (event) => {console.log('Live ended', event);// Handle logic after live ends, e.g., close current page};const onKickedOutOfLive = (event) => {console.log('Kicked out of room', event.reason);// Show a popup based on the reason for being removed from the room};addLiveListListener('onLiveEnded', onLiveEnded);addLiveListListener('onKickedOutOfLive', onKickedOutOfLive);return () => {removeLiveListListener('onLiveEnded', onLiveEnded);removeLiveListListener('onKickedOutOfLive', onKickedOutOfLive);};}, []);}
LiveCoreView, you'll have a clean video rendering view with full live streaming capabilities, but no interactive UI. To enhance your live streaming experience, see the next section Enrich Live Streaming Scenarios.
Live Feature | Feature Description | Feature States | Implementation Guide |
Enable audience audio/video connection | Audience can apply to join the stream and interact with the host in real-time video. | ||
Enable host cross-room connection | Hosts from different rooms can connect and interact. | ||
Add live comments chat feature | Audience can send and receive real-time text messages in the live room. | ||
Build a gift system | Audience can send virtual gifts to the host, increasing interaction and fun. |
State | Feature Description | API Documentation |
LiveListState | Manage the full live video lifecycle: create/join/leave/destroy room, query room list, edit live info (name, announcement, etc.), listen for live status (e.g., kicked out, ended). | |
DeviceState | Audio/video device control: microphone (switch/volume), real-time device status monitoring. | |
CoGuestState | Audience connection management: apply/invite/accept/reject connection, member permission control (microphone), status synchronization. | |
CoHostState | Host cross-room connection: supports multiple layout templates (dynamic grid, etc.), initiate/accept/reject connection, co-host interaction management. | |
GiftState | Gift interaction: get gift list, send/receive gifts, listen for gift events (including sender and gift details). | |
BarrageState | Live comments feature: send text/custom comments, maintain comment list, real-time comment status monitoring. | |
LikeState | Like interaction: send likes, listen for like events, synchronize total like count. | |
LiveAudienceState | Audience management: get real-time audience list (ID/name/avatar), count audience number, listen for audience entry/exit events. | |
AudioEffectState | Audio effects: voice change (child/male), reverb (KTV, etc.), monitoring adjustment, real-time effect switching. | |
BaseBeautyState | Basic beauty enhancement: adjust smoothing/whitening/rosiness (0-100 levels), reset beauty status, synchronize effect parameters. |
LiveCoreView instance before calling broadcast or viewing methods.openLocalCamera({ isFront: true}) to enable the camera.LiveCoreView has coreViewType set to pushView.LiveCoreView has coreViewType set to playView.피드백