Cross-Platform Dyte Video Calls Powered by React Native Core

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}
>

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

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();

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();
  }, []);

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

const { meeting } = useDyteMeeting();

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);
});

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);
});

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);
});

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.

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.