If you have any questions regarding bugs and feature requests, visit the ZEGOCLOUD community .

Live Audio Room Kit is a prebuilt component that helps you to build full-featured live audio rooms into your apps easier.

And it includes the business logic along with the UI, enabling you to customize your live audio apps faster with more flexibility.

• When you want to build live audio rooms easier and faster, it allows you:

  Build or prototype live audio apps ASAP

  Finish the integration in the shortest possible time

• When you want to customize UI and features as needed, it allows you:

  Customize features based on actual business needs

  Spend less time wasted developing basic features

  Add or remove features accordingly

To build a live audio app from scratch, you may check our Voice Call.

• Ready-to-use Live Audio Room
• Remove speakers
• Speaker seats changing & management
• Customizable seat layout
• Extendable menu bar
• Device management
• Customizable UI style
• Real-time interactive text chat
• Seat-taking (Invite & apply to take speaker seats)

• Go to ZEGOCLOUD Admin Console, and do the following:
  • Create a project, get the AppID and AppSign.
  • Activate the In-app Chat service (as shown in the following figure).

1. Add @zegocloud/zego-uikit-prebuilt-live-audio-room-rn as dependencies.

yarn add @zegocloud/zego-uikit-prebuilt-live-audio-room-rn

2. Add other dependencies.

Run the following command to install other dependencies for making sure the @zegocloud/zego-uikit-prebuilt-live-audio-room-rn can work properly:

yarn add react-delegate-component zego-express-engine-reactnative@3.2.0 zego-zim-react-native@2.7.0 zego-zpns-react-native@2.2.0 @zegocloud/zego-uikit-rn @zegocloud/zego-uikit-signaling-plugin-rn

• Specify the userID and userName for connecting the Live Audio Room Kit service.
• Create a roomID that represents the room you want to make.

// App.js
import React, { Component } from 'react';
import { View } from 'react-native';
import ZegoUIKitPrebuiltLiveAudioRoom, {
  HOST_DEFAULT_CONFIG,
} from '@zegocloud/zego-uikit-prebuilt-live-audio-room-rn';

export default function LiveAudioRoomPage(props) {
  return (
    <View style={styles.container}>
      <ZegoUIKitPrebuiltLiveAudioRoom
        appID={yourAppID}
        appSign={yourAppSign}
        userID={userID} // userID can be something like a phone number or the user id on your own user system.
        userName={userName}
        roomID={roomID} // roomID can be any unique string.
        config={{
          ...HOST_DEFAULT_CONFIG,
          onLeaveConfirmation: () => {
            props.navigation.navigate('HomePage');
          },
        }}
      />
    </View>
  );
}

• Android:

1. Open the my_project/android/app/src/main/AndroidManifest.xml file and add the following:

<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />

2. Open the my_project/android/app/proguard-rules.pro file and add the following:

-keep class **.zego.**  { *; }

• iOS:

1. Open the my_project/ios/my_project/Info.plist file and add the following:

<key>NSCameraUsageDescription</key>
<string>We need to use the camera</string>
<key>NSMicrophoneUsageDescription</key>
<string>We need to use the microphone</string>

2. Disable the Bitcode.

a. Open the your_project > ios > [your_project_name].xcworkspace file.

b. Select your target project, and follow the notes on the following two images to disable the Bitcode respectively.

• Run on an iOS device:

yarn ios

• Run on an Android device:

yarn android

Custom prebuilt UI