Agora UI Kit for React Native
Instantly integrate Agora video calling or streaming into your React Native application.
Getting started
Requirements
Expo is now supported using custom-dev-clients, for more information read this blog post
Installation
To a react-native application generated using react-native-cli, add the following:
npm i react-native-agora agora-rn-uikit
Usage
This UIKit is very simple to use and contains a high level component called AgoraUIKit
. You can check out code explanation here.
A simple sample app integrating Agora UI Kit:
import React, {useState} from 'react';
import AgoraUIKit from 'agora-rn-uikit';
const App = () => {
const [videoCall, setVideoCall] = useState(true);
const rtcProps = {
appId: '<Agora App ID>',
channel: 'test',
};
const callbacks = {
EndCall: () => setVideoCall(false),
};
return videoCall ? (
<AgoraUIKit rtcProps={rtcProps} callbacks={callbacks} />
) : (
<Text onPress={()=>setVideoCall(true)}>Start Call</Text>
);
};
export default App;
Replace the '<Agora App ID>'
with your own appID.
If you're using an App ID in secured mode, you'll need to pass in a token (you can generate a temporary token using the Agora console).
Demo Project
There's a React Native UIKit demo here, and one with typescript here.
Instructions for running on Android:
- Connect your Android device to system with debugging on
- Type adb devices to verify if the device is connected
- Run
npm start
– This will start the development server - Open another terminal in the same folder
- Run
npm run android
- This will deploy the app on the Android device. (Now, the app will connect our development server) - Note Android simulators are not recommended since they might not be able to access camera and mic.
Instructions for running on iOS:
- Connect an IOS device to system, create an apple developer account and register your device with apple for development.
- Run
npx pod-install
to download the necessary pods. - Open the
.xcworkspace
file located in ios
folder using XCode. - Open the info tab and add the following:
- Privacy Camera description - Camera permission
- Privacy Microphone description - Mic permission
- Configure code signing: https://reactnative.dev/docs/running-on-device#2-configure-code-signing
- Run the project by clicking the Run button in Xcode
- Note Simulators won’t work since IOS simulator can’t access camera
Documentation
For full documentation, see our docs page.
You can visit the wiki for other examples and in depth guide.