Update 20-March-22: The blog has been updated to work with v4.0.0 of the Agora React Native UIKit.
With the release 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 and the Expo docs.
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.
- Agora Account
- Node.js LTS release
- Watchman (brew install watchman)
- Yarn (npm i -g yarn)
- Expo CLI (npm i -g expo-cli)
- 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.
Creating a 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 SDKs. In a terminal, execute
yarn add react-native-agora agora-react-native-rtm. You don’t need any extra configuration for the Agora SDKs. If your library requires modifying the native runtime, you can read more about how to write a custom plug-in here.
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:
To get better errors and logs, the docs recommend adding
import ‘expo-dev-client’; to the top of your
To build a video calling app, all we need is the
AgoraUIKit high-level component from the UIKit library. We can pass in the
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.
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:
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.
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.
For more information about building applications using Agora SDKs, take a look at the Agora Video Call Quickstart Guide and Agora API Reference. You can also take a look at the UIKit GitHub Repo, API Reference, and Wiki.
I invite you to join the Agora Developer Slack community. You can ask any questions about Agora in the