Skip to main content

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.

Dyte also offers the flexibility to build your own UI using various individual components. This offers limitless customization options to tailor the UI to fit your requirements. For more information, see the Build your own UI section.

Objective​

You'll learn how to:

  • Install the Dyte SDK
  • Initialize Dyte Client
  • Pass the meeting object to UI Kit
  • Go live!

Before Getting Started​

Step 1: Install the SDK​

Since the UI Kit is built on top of the Core SDK, you must install the react-native-core package along with the react-native-ui-kit.

react-native-core consists of hooks which makes it easy to use.

You can install the package using npm or Yarn.

npm install @dytesdk/react-native-ui-kit @dytesdk/react-native-core

Install the required 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

Install the following dependencies only if you need livestream.

npm install react-native-gradle-plugin amazon-ivs-react-native-player
Import Errors

If you get errors when importing the react-native-ui-kit and react-native-core packages, try installing them separately.

Version​

@dytesdk/react-native-ui-kitnpm version
@dytesdk/react-native-corenpm version

Step 2: Get Started with Dyte Prebuilt Components​

Here's a series of steps that you need to perform:

  1. Set up DyteProvider. You need it to import the DyteProvider from the dytesdk/react-native-core. DyteProvider basically is a hook wrapper on dytesdk/web-core. This provides a meeting object to child components.
  2. Set up DyteUIProvider. You need it to import the DyteUIProvider from the dytesdk/react-native-ui-kit. This provides dyte design system to child components.
  3. Initialize the Dyte client. Use the useDyteClient() hook and initMeeting to initialize a client.
  4. Call the init() method and pass the authToken:
authTokenAfter you've created the meeting, add each participant to the meeting using the Add Participant API. The API response contains the authToken.

  1. Pass the meeting object to UI Kit, which will use it to retrieve meeting information and display it on the user interface.

    The meeting object serves as the link between web-core and UI Kit, allowing them to communicate with one another. Once the UI Kit has the meeting object, it can join and leave meetings, and so on.

import React from 'react';
import { 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();
  }, []);
  useEffect(() => {
    meeting?.self.addListener('roomLeft', () => console.log('Meeting ended'));
    () => {
      meeting?.self.removeListener('roomLeft', () =>
        console.log('Meeting ended')
      );
    };
  }, [meeting]);
  return (
    <DyteProvider value={meeting}>
      <DyteUIProvider>
        <DyteMeeting meeting={meeting} />
      </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 MyMeeting() {
  const { meeting } = useDyteMeeting();

  return (
    <DyteUIProvider>
      <DyteMeeting meeting={meeting} />
    </DyteUIProvider>
  );
}