Building a Video Calling App Using the Agora SDK on Expo (React Native)
Tags: reactnative, javascript, tutorial, mobile
Published: 2021-10-08 07:16:40

With the [release](asd) of Expo SDK 42, it’s now possible to customize the native runtime of your apps using custom development clients. It took me a while to wrap my head around all the new concepts, but I’m really excited!

Essentially, this means that we can now use libraries that contain native code (like Swift and Kotlin) with Expo without having to resort to the bare workflow (which would take away most of the Expo benefits and ease of use). The new experience is really easy to set up and start using. You can find more information in this [official blog](https://blog.expo.dev/expo-sdk-42-579aee2348b6) and the [Expo docs](https://docs.expo.dev/clients/getting-started/).

## What this isn’t:
- You cannot use the Expo Go app for testing the code with native modules. This means you’ll need to build and distribute your app to anyone who wants to test it.
- If you want to build for iOS without having access to a Mac, you’ll need to use EAS Build or an alternative cloud service.
- This is going to be slightly more involved than the Expo JS-only experience. You’ll need to set up Android Studio and/or XCode.

## Requirements
- [Node.js LTS release](https://nodejs.org/en/)
- [Git](https://git-scm.com/)
- [Watchman (brew install watchman)](https://facebook.github.io/watchman/docs/install#buildinstall)
- [Yarn (npm i -g yarn)](https://yarnpkg.com/getting-started/install)
- [Expo CLI (npm i -g expo-cli)](https://docs.expo.dev/get-started/installation/)
- Android Studio/XCode

Installing Node.js and Git would depend on your operating system. To install Yarn and Expo, you can simply run `npm i -g yarn expo-cli`.

## Create a new project
To create an Expo project, we’ll use the Expo CLI. Open a new terminal and execute `expo init` to bring up the CLI that will guide you through the process. Let’s leverage the typescript template by selecting the blank TS option.
You can run native platform code in React Native with the use of native modules. With the new release of Expo dev clients, it’s now possible to use native modules without leaving the managed workflow.
To make native modules (libraries that use native platform code) work with Expo, we’ll install the Expo dev client by running `yarn add expo-dev-client` in the project directory created by the Expo CLI.
> Note: We can’t use the Expo Go app to run the project, because we’re bundling native code. We’ll get around this by building a custom client.

## Installing native modules
Let’s install the native dependency: the Agora React Native SDK. In a terminal, execute `yarn add react-native-agora`. You don’t need any extra configuration for the Agora SDK. If your library requires modifying the native runtime, you can read more about how to write a custom plug-in [here](https://docs.expo.dev/clients/getting-started/#customizing-your-runtime).

For the app demo, let’s install the Agora React Native UIKit. 
{% github AgoraIO-Community/ReactNative-UIKit no-readme %}
It is a pure JavaScript library that helps us build a video calling app with ten lines of code. You can execute `yarn add agora-rn-uikit` to install it. It relies on the Agora React Native SDK for its functionality.

We can now start writing the app:
{% gist https://gist.github.com/EkaanshArora/4f9b5da2d508eea0479e9916993ba471.js %}

To get better errors and logs, I recommend adding `import ‘expo-dev-client’;` to the top of your `App.tsx` file.

To build a video calling app, all we need is the `AgoraUIKit` high-level component from the UIKit library. We can pass in the `appId` and `channel` to the `RtcProps`. We can use a state variable to render the call UI that we can update using the `EndCall` callback. The AgoraUIKit component is rendered when the `videoCall` state is true.

You can read more about how the UIKit works [here](https://www.agora.io/en/creating-a-react-native-video-chat-app-in-a-few-lines-of-code-using-agora-uikit/).

## Run your app
Now for the moment of truth: let’s try running the app. To build a custom client, we can execute `expo run:android` or `expo run:ios` in a terminal. If you’re building for iOS, use a physical device to test since camera functionality is not available in the iOS simulator. You will be prompted to select a bundle ID (a unique identifier for your app). You can enter a custom ID or use the prefilled option.

> Note: If you’re building for iOS, you’ll need to add camera and microphone permissions text to your `info.plist` file using XCode:

![XCode Screenshot](https://miro.medium.com/max/2000/0*FU5yVts-2Sq0PON-)

Once that’s done, you’ll need to wait a couple of minutes for the CLI to build the custom client and install it on your device. You’ll see the project directory get populated with iOS and Android folders. You can now run the Expo dev server by executing `expo start --dev-client` in the project directory. Once the app loads, you can then scan the server QR code or select it from the list in the app. Your app should load from metro just like a normal React Native app.

##Conclusion
The Expo SDK offers a lot of developer-friendly features on top of React Native. In the past, we’d use the bare workflow. If our app needed any native modules, however, it would take away some of the benefits. Plus, setting it up was a task. Using custom clients, we can leverage the power of Expo with the flexibility of native modules.

You can read my blog about the React Native UIKit [here](https://www.agora.io/en/creating-a-react-native-video-chat-app-in-a-few-lines-of-code-using-agora-uikit/).

##Other Resources
For more information about building applications using Agora SDKs, take a look at the [Agora Video Call Quickstart Guide](https://docs.agora.io/en/Video/landing-page?platform=React%20Native) and [Agora API Reference](https://docs.agora.io/en/Video/API%20Reference/react_native/index.html). You can also take a look at the [UIKit GitHub Repo](https://github.com/AgoraIO-Community/ReactNative-UIKit).
I invite you to join the [Agora Developer Slack community](https://www.agora.io/en/join-slack/). You can ask any questions about Agora in the `#react-native-help-me` channel.