Quickstart
This quickstart shows how to use Dyte's UI Kit prebuilt components to add live video and audio to your React application with minimal coding and a variety of meeting UI customization options.
Before Getting Started
-
Make sure you've read the Getting Started with Dyte topic and completed the following steps:
- Create a Dyte Developer Account
- Create a Dyte Meeting
- Add Participant to the meeting
Step 1: Installation
Since the UI Kit uses the Dyte Core SDK, you must install the
@dytesdk/react-native-core
package along with the @dytesdk/react-native-ui-kit
.
@dytesdk/react-native-ui-kit | |
@dytesdk/react-native-core |
- React Native
- Expo
npm install @dytesdk/react-native-ui-kit @dytesdk/react-native-core
Install the required native dependencies
npm install @dyteinternals/react-native-webrtc react-native-document-picker react-native-file-viewer react-native-fs react-native-safe-area-context react-native-sound-player react-native-svg react-native-webview
Additional steps for interactive livestream product
Install the following dependencies only if you need livestream.
npm install amazon-ivs-react-native-player
- Android
- iOS
The below instructions are for the release builds, debug builds should work without any additional steps.
- Edit your
android/gradle.properties
and add the following line
android.enableDexingArtifactTransform.desugaring=false
- Create / append to the file
android/app/proguard-rules.pro
-keep class io.webrtc.** { *; }
-dontwarn org.chromium.build.BuildHooksAndroid
- In your
android/app/build.gradle
edit the release configuration and add the following line importing the proguard configuration
buildTypes {
release {
...
...
...
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
We support minimum OS version 12.0
for our iOS SDK.
- Open your podfile and make sure your platform is set to ios 12
platform :ios, '12.0'
- Add the fonts and permission entries in
info.plist
<key>NSBluetoothPeripheralUsageDescription</key>
<string>We will use your Bluetooth to access your Bluetooth headphones.</string>
<key>NSBluetoothAlwaysUsageDescription</key>
<string>We will use your Bluetooth to access your Bluetooth headphones.</string>
<key>NSCameraUsageDescription</key>
<string>For people to see you during meetings, we need access to your camera.</string>
<key>NSMicrophoneUsageDescription</key>
<string>For people to hear you during meetings, we need access to your microphone.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>For people to share, we need access to your photos.</string>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
npx expo install @dytesdk/react-native-ui-kit @dytesdk/react-native-core
Install the required native dependencies
npx expo install @dyteinternals/react-native-webrtc react-native-document-picker react-native-file-viewer react-native-fs react-native-safe-area-context react-native-sound-player react-native-svg react-native-webview lodash.merge
Install expo's config-plugins if it is not installed already
npx expo install @expo/config-plugins
Additional steps for interactive livestream product
Install the following dependencies only if you need livestream.
npx expo install amazon-ivs-react-native-player
Configure Expo Config Plugins
In app.json
, add these to plugins:
{
expo: {
...
"plugins": [
"@dytesdk/react-native-core",
"@dyteinternals/react-native-webrtc"
],
...
}
}
Setup Native Modules with Config Plugins in Expo
npx expo prebuild
Step 2: Get Started with Dyte Prebuilt Components
Here's a series of steps that you need to perform:
- Set up
DyteProvider
. This provides the context that provides meeting object and other data to all the child components. - Set up
DyteUIProvider
. This provides design system to child components. - Initialize the Dyte client. Use the
useDyteClient()
hook andinitMeeting
to initialize a client.
authToken | After you've created the meeting, add each participant to the meeting using the Add Participant API. The API response contains the authToken. |
- Pass the meeting object to UI Kit, which will use it to retrieve meeting information and display it on the user interface.
import React, { useEffect } from 'react';
import { DyteProvider, useDyteClient } from '@dytesdk/react-native-core';
import { DyteUIProvider, DyteMeeting } from '@dytesdk/react-native-ui-kit';
export default function App() {
const [meeting, initMeeting] = useDyteClient();
useEffect(() => {
const init = async () => {
initMeeting({
authToken: '<auth-token>',
defaults: {
audio: true,
video: true,
},
});
};
init();
}, []);
return (
<DyteProvider value={meeting}>
<DyteUIProvider>
<YourCustomMeetingComponent />
</DyteUIProvider>
</DyteProvider>
);
}
Example: Using Prebuilt DyteMeeting
Component
In the following example, a meeting is created using the useDyteMeeting
component. useDyteMeeting
essentially returns the meeting object you passed to
the DyteProvider
.
DyteMeeting
renders the entire meeting UI. It loads your preset and renders
the UI based on it. With this component, you don't have to handle all the
states, dialogs, and other smaller bits of managing the application.
For more information on the other props of DyteMeeting
, see
DyteMeeting.
function YourCustomMeetingComponent() {
const { meeting } = useDyteMeeting();
return (
<DyteMeeting meeting={meeting} />
);
}