Quick Start (React Native)

# 1. Install the core voice chat module 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 settings

    "ios": {
      // ... other settings
      "bundleIdentifier": "com.anonymous.ExpoLive",
      "infoPlist": {
        "NSMicrophoneUsageDescription": "This app requires access to your microphone for live streaming.",
        "UIBackgroundModes": [
          "audio"
        ]
      }
    },
    "plugins": [
      "react-native-localize",

      [
        "expo-build-properties",
        {
          "ios": {
            "useFrameworks": "static"
          }
        }
      ]

    ]
  }
}

# If you have local Android and iOS development environments:
npx expo run:ios    // Ensure CocoaPods is installed
npx expo run:android

# Or use Expo's cloud build to regenerate the development install package:
npx eas build --profile development --platform all

npx expo start

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

// Define the voice chat room ID (must match the liveID used in createLive)
// Use a unique identifier (e.g., UUID or timestamp)
// Format: Only English letters, numbers, and underscores; max 64 characters
const liveID = 'your_live_room_id'; // Replace with your voice chat room ID

// Get LiveSeatState instance with liveID
const { seatList } = useLiveSeatState(liveID);

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

const { openLocalMicrophone } = useDeviceState();

const openMic = () => {
  openLocalMicrophone();
};

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

// Get LiveListState instance
const { createLive } = useLiveListState();

const startLive = () => {
  createLive({
    liveInfo: {
      liveID: liveID, // Voice chat room ID
      liveName: 'test', // Room name
      keepOwnerOnSeat: true, // Host remains on the mic seat
      isSeatEnabled: true,
      seatLayoutTemplateID: 70, // Mic seat layout template (70 for voice chat)
      seatMode: 'APPLY', // Seat mode (apply to join mic)
      maxSeatCount: 10 // Maximum number of mic seats
    },
    onSuccess: () => {        
      console.log('Voice chat room created successfully');
      // Navigate to another page if needed
    },
    onError: (error) => {
      console.log('Failed to create voice chat room', error);
    }
  });
};

import React, { useEffect } from 'react';
import { useLiveSeatState } from 'react-native-tuikit-atomic-x/lib/module/atomic-x/state/LiveSeatState';

// Get LiveSeatState instance with liveID
const { seatList } = useLiveSeatState(liveID);

// Generate displaySeats for UI
const displaySeats = React.useMemo(() => {
  return Array.from({ length: 10 }, (_, i) => {
    const foundSeat = (seatList || []).find(seat => seat.index === i) || {};

    return {
      ...foundSeat,
      displayIndex: i + 1, // UI display index (1-10)
      userId: foundSeat.userInfo?.userID || foundSeat.userId || null,
    };
  });
}, [seatList]);

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

const { endLive } = useLiveListState();

// End voice chat
const handleEndLive = () => {
    endLive({
      onSuccess: () => {        
        console.log('Voice chat ended successfully');
        // Navigate if needed
      },
      onError: (error) => {
        console.log('Failed to end voice chat', error);
      }
    });
 }

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

// Define the voice chat room ID (must match the liveID used in joinLive)
const liveID = 'your_live_room_id'; // Replace with your voice chat room ID

// Get LiveSeatState instance with liveID
const { seatList } = useLiveSeatState(liveID);

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

// Get LiveListState instance
const { joinLive } = useLiveListState();

// Join voice chat
const handleJoinLive = () => {
    joinLive({
      liveID: liveID, // Voice chat room ID to join
      onSuccess: () => {        
        console.log('Successfully entered the voice chat room');
        // Navigate if needed
      },
      onError: (error) => {
        console.log('Failed to enter the voice chat room', error);
      }
    });
 };

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

// Get LiveListState instance
const { leaveLive } = useLiveListState();

// Exit voice chat room
const handleLeaveLive = () => {
    leaveLive({
      liveID: liveID, // Voice chat room ID joined
      onSuccess: () => {        
        console.log('Exited the voice chat room successfully');
        // Navigate if needed
      },
      onError: (error) => {
        console.log('Failed to exit the voice chat room', error);
      }
    });
 }