Cross-Platform Dyte Video Calls Powered by React Native Core

Integrate Dyte Video Calls into your mobile applications with React Native Core.

13 days ago   •   3 min read

By Mayank Sharma

We recently released new SDKs for the web, which aim to provide seamless audio/video conferencing with an entirely customizable UI. We want to bring the same experience to mobile developers through our mobile SDKs.

Meet React Native Core SDK

In the old SDKs, we provided a configuration prop as JSON to customize the meeting UI in mobile with limited options and our theme interface with presets.

<DyteMeeting    
	onInit={(meeting) => { }}    
	clientId=`yourClientID`    
	meetingConfig={
		{        
			roomName: `roomName`,        
			authToken: `authToken`    
		}
	}
  uiConfig={uiConfigOptions}
>
Old way to initialize Dyte Meeting

We improvised upon these limited UI options and wanted to provide high customizability to developers. So, we separated our Core SDK for data-only, meeting management APIs and UI-Kit for unlimited customization possibilities.

With React Native Core, you can use all of Dyte’s core functionalities with a complete UI of your own.

Come take a look at what we have for you ;)

Modules in React Native Core

React Native Core SDK Modules

Here are all the modules that our SDK consists of:

  1. meeting.self
    This consists of properties and methods corresponding to the current (local) user, such as enabling or disabling their audio and video, getting a list of media devices or changing the device, or sharing your mobile screen.
  2. meeting.participants
    Use this module to get useful information about the other participants that are present in the meeting. A host can use this module for access control. For example, the host can mute or kick a participant.
  3. meeting.chat
    It provides the methods to integrate chat features such as sending/receiving, editing, and deleting text, images, and files.
  4. meeting.polls
    Meetings can have polls. This module lets you perform actions related to polls i.e create and manage a poll within a meeting.
  5. meeting.recording
    When a meeting needs to be recorded, this module can be used. It lets you start or stop a recording, and get the current status of an ongoing recording.
  6. meeting.meta
    This object consists of all the metadata related to the current meeting, such as the title, the timestamp of when it started, and more.

Integrating React Native Core SDK

To initialize a meeting using the new SDK:

Import the package and use the useDyteClient() hook to create a client object

import { useDyteClient, useDyteMeeting } from '@dytesdk/react-native-core';

const [client, initClient] = useDyteClient();
Integrating React Native Core SDK

Once the packages are imported, the meeting can be initialized using useEffect.

React.useEffect(() => {
    const load = async () => {
      await initClient({
        roomName: '<Room_Name>'
        authToken: '<Auth_Token>',
        defaults: {
          audio: true,
          video: true,
        },
      })
    };
    load();
  }, []);
Initialize Dyte Meeting

The meeting object is accessible throughout the app using useDyteMeeting() Hook

const { meeting } = useDyteMeeting();
Meeting object using useDyteMeeting Hook

Setting up events

We provide events for every change you need including participants joining/leaving, chat messaging events, and polls.

Here’s a demo of how to use events in your application:

In this code snippet, we are attaching to participantJoined event.

meeting.participants.joined.on('participantJoined', (participant)=>{
	console.log("Participant Joined: ",participant.name);
});
Code sample for participant joined event

Similarly, we can attach to the event when a participant creates a new poll.

meeting.polls.on('pollsUpdate', (polls)=>{
	const len = polls.length;
	const lastPoll = polls[len-1];
	console.log("Last poll created by : ",lastPoll.createdBy);
});
Code sample for polls update event

Or following event fires when a participant sends a chat message.

meeting.chat.on('chatUpdate', ( {message,mesaages} )=>{
	console.log("Last message sent by: ",message.displayName);
});
Code sample for chat update event

That’s it about React Native Core

Although we covered quite a few info about the new SDK, that’s not all. Our team of engineers at Dyte has added a lot of features that you can explore by heading on to our official documentation.

This ain't it chief meme

Try out our latest development of the SDK and get in touch with us on our community Discord server.

If you haven’t heard about Dyte yet, head over to https://dyte.io to learn how we are revolutionizing live video calling through our SDKs and libraries and how you can get started quickly on your 10,000 free minutes which renew every month. If you have any questions, you can reach us at support@dyte.io or ask our developer community.

Spread the word

Keep reading