Building a Video Call app with Dyte

SDK and React Native

Introduction
In today's world, video calling has become an essential tool for communication, especially
since the COVID-19 pandemic. With the increasing demand for video conferencing
solutions, developers are constantly looking for ways to integrate video calling features
into their applications. In this blog post, we will explore how to build a robust video call
app using Dyte SDK and React Native.

Prerequisites
● A Dyte developer account, which you can create for free at dev.dyte.io
● Basic understanding of Typescript, React Native and Node js
● Conceptual knowledge of asynchronous communication and cloud messaging
● Any IDE that supports Android projects and Typescript: Webstorm by JetBrains,
vs-code etc.
Techstack
● React Native (Typescript) for the Android app
● NativeWind for styling
● Node.js for a simple HTTP server
● React Native Firebase for cloud messaging

Step 0: Setup and configuration

First, let's ensure we have all the tools and programs required for running a React Native
app on our system.

● Setting up React Native

To develop React Native applications, we must have Android SDK on our system.
This typically involves installing LTS versions of Node.js, Java SE Development Kit
(JDK), and Android SDK. This is covered in detail in React Native’s official
documentation.

● Creating a Dyte developer account

We’ll need a free account to access Dyte’s APIs for creating and managing
meetings. Head over to dev.dyte.io and register for a free account. Once you log
in, head over to the developer dashboard > API Keys and copy the Organization ID
and API Key from the dashboard.
 ● Creating a Firebase Project
To enable cloud messaging in our application, we need to create a new project on
Firebase. Go to console.firebase.google.com, log in with your Google account and
create a new project. Enter your project’s name, follow the instructions and
complete the project setup.

Now we’re ready to work on our application.

Step 1: Create a React Native app and install

dependencies
According to the official documentation, we can create a React Native app using either
the CLI or through Expo. In this blog, we’ll use React Native CLI to create our Android app
as follows:
npx react-native init react-native-video-call

This will create our app using Typescript and Yarn for package management. Next, install
node_modules from package.json using:

yarn install

To run the application, connect your Android device to your machine via USB and make
sure USB Debugging is enabled from the developer settings. Once the connection is
established, run the app using:

npx react-native run-android

This will launch the sample boilerplate app on your Android device. Next, follow the
official docs to set up and configure NativeWind in the project. NativeWind is a great
utility to style React Native applications. NativeWind uses Tailwind CSS as a scripting
language to create a universal style system for React Native. This means we can style
React Native components using Taillwind’s classes via the ‘className’ prop. Make sure
to check the typescript config section for troubleshooting typescript errors!

Next, we need to install some third-party libraries in the project:

● @dytesdk/mobile - for using Dyte’s video call services
● @react-native-firebase/app - for connecting with our firebase project
● @react-native-firebase/messaging - for firebase cloud messaging
services
● react-native-callkeep - for using Android’s native Caller UI
● zustand - un-opinionated state-management solution for managing global app
state

Install the above dependencies one by one or through a single command as follows:

yarn add @dytesdk/mobile @react-native-firebase/app @react-native-

firebase/messaging react-native-callkeep zustand

Apart from these, we’ll also need React Navigation for navigating between screens in our
applications, and axios for making HTTP requests:

yarn add react-native-screens react-native-safe-area-context axios

Check their documentation for further configuration and troubleshooting.