Quick Start（React Native）

# 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

{
  "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"
          }
        }
      ]

    ]
  }
}

# If you have local Android and iOS development environments, run:
npx expo run:ios    # Make sure CocoaPods is installed
npx expo run:android

# Or use cloud build to regenerate the development installation package
npx eas build --profile development --platform all

npx expo start

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 characters
  const liveID = 'your_live_room_id'; // Replace with your live room ID

  return (
    <View style={styles.container}>
      <LiveCoreView liveId={liveID} coreViewType="pushView" style={styles.pushView} />
    </View>
  );
}

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); },
  });
}, []);

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 ID
      liveName: 'live name', // Set the live room name
      seatLayoutTemplateID: 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); },
  });
};

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); },
  });
};

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>
  );
}

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); },
    });
  }, []);
}

import { useLiveListState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/LiveListState';

const { leaveLive } = useLiveListState();

// Leave live room
const handleLeaveLive = () => {
  leaveLive({
    onSuccess: () => { console.log('Left live room successfully'); },
    onError: (error) => { console.log('Failed to leave live room', error); },
  });
};