Integrating Zoom SDK into React Native v.63.4 - Complete Tutorial

by Stefan Majiros

NOTE: Link to repo is in the bottom of this article. But instead of cloning it directly, try first to understand what’s going on please.

Link to iOS part:

This is tutorial about how to integrate ZoomSDK into React Native app.We will cover how to initialize Zoom SDK, join meeting and start meeting from the mobile device.

Well, make yourself coffee(tea) and start reading.

First step: Scaffold RN app

Let’s start from the scratch and create RN app by using “npx react-native init ZoomExampleRN” command. Then, we just run the app to validate that there are not any issues with environment.

Image for post
Image for post
Creating dummy RN app

Downloading SDK for ZOOM and iOS

Then we need to download SKD from ZOOM. The recommended way is to create account (register) at the marketplace.zoom.us.

Image for post
Image for post
Zoom marketplace

After clicking on the Develop button in the top right area, you will see similar screen (note - my screen looks a little bit different as I have already created apps):

Image for post
Image for post
Building apps on zoom

Remember, you will need to create the both API Keys — SDK and JWT keys.

So, let’s start with creating JWT API keys.

Image for post
Image for post
Create JWT API — Homescreen

After clicking Continue, you will finally see JWT API keys you need to download.

Image for post
Image for post
ZOOM SDK / JWT credentials

Then, just click Continue again.

Image for post
Image for post
JWT Keys were created

And voila, your JWT API keys are generated.

Now, let’s create SDK API keys.

Yes, SDK API keys are different than the JWT API keys you created few seconds ago. Click on “Develop” button, then “Build app” and choose “SDK”.

Image for post
Image for post

After filling basic information & clicking next, you can download the latest ZOOM SDK. Btw, I have added copy of the latest versions (in time when I was writing this article) into my Github repo.

Image for post
Image for post
ZOOM SDKs

Download or skip for now. Next screen (for App Credentials) looks very similar to the screen for generating JWT API Keys. Again, you will need to download your “key” and “secret”.

Image for post
Image for post
ZOOM CLIENT SDK Credentials

And just click continue.

Image for post
Image for post
ZOOM — Client SDK credentials created

In the end, your dashboard should look similar to this screen below — if you did everything right.

Image for post
Image for post
ZOOM — apps overview

Then just put the downloaded keys into App.js file. I grouped all keys together, under ZOOM_CONFIG object.

Image for post
Image for post
Where to put downloaded keys

If you downloaded the latest ZOOM SDKs for Android or iOS, or cloned my repo, now you will need to copy two folders from Zoom Android SDK into your android folder.

These folders are named: “commonlib” & “mobilertc”.

Image for post
Image for post
copying Android libraries

First one, “commonlib” should be copied under android folder.

Image for post
Image for post

As well, as mobilertc folder.

Image for post
Image for post

Now, let’s gonna modify settings.gradle.

Image for post
Image for post

We need to tell Gradle, to include these copied folders into build process.

Image for post
Image for post

Then we need to modify android/build.gradle file.

Image for post
Image for post

We need to bump minSDKVersion and targetSDKVersion.

Image for post
Image for post
\

Then we need to modify android/app/build.gradle file.

Image for post
Image for post

Let’s enable multidex.

Image for post
Image for post

Then, let’s open the android folder in Android Studio and wait for sync.

Image for post
Image for post

If you did everything right, you will see 3 folder on the left side: app, commonlib, mobilertc.

Image for post
Image for post

Let’s build it.

Image for post
Image for post

It runs. So far, so good.

Image for post
Image for post

Now, we will create 2 classes for React Native Modules: called ZoomManager and ZoomPackage. (under com.yourapp.package). As you can see, they are empty classes.

Image for post
Image for post

Let’ create basic structure for the React Native Modules in Android.

Image for post
Image for post

Then, let’s create initZoom method in ZoomManager class, where we will try to add ZOOM SDK logic.

Image for post
Image for post

As you can see, ZoomSDK is undefined. Let’s fix it by putting dependencies into build.gradle.

Image for post
Image for post

Then, we would probably need to run Gradle sync again. But after syncing, ZoomSDK imports will work.

Image for post
Image for post

If you rewrite the code above, you will notice that it is not compilable. Something with ZoomSDKInitializeListener.

Image for post
Image for post

So, it seems that our module must implement this ZoomSDKInitializeListener interface. Here it is.

Image for post
Image for post

Let’s add necessary methods.

Image for post
Image for post

Then, let’s implement the logic of these 2 methods.

Image for post
Image for post

As you see, there is another listener that needs to be added, MeetingServiceListener. So let’s add it.

Image for post
Image for post

Again, we need to implement necessary method, but now, just one.

Image for post
Image for post

And, for now, let’s keep its logic very dummy.

Image for post
Image for post

Let’s build it.

Image for post
Image for post

As you can see, it will not run. Taking look at the Zoom dev forum, we can see that some folks already tried to solve this.

Image for post
Image for post

“Known issue”. And the ZOOM team is not able to solve this issue in future release.

Image for post
Image for post

But other folks said in the same thread that the issue could be “easily” solved.

Image for post
Image for post

So, let’s try this “easy” way. Find mobilertc.aar file inside your project and open terminal in the enclosing folder.

Image for post
Image for post

According to the stackoverflow, we can use these simple commands to unpack and repack .aar file.

Image for post
Image for post

Unpacking mobilertc.aar into tempFolder with the command above looks like this:

Image for post
Image for post

Let’s take a look at the content of tempFolder. Inside, we need to find folder called jni. Kind of dark magic.

Image for post
Image for post

Under jni folder, there are these folders - each for separate architecture of mobile devices.

Image for post
Image for post

If we click on one architecture, e.g arm64-v8a, we can find one important file inside. The file that was causing problems. libc++_shared.so.

Image for post
Image for post

I decided to delete it.

Image for post
Image for post

And I deleted it from the other architectures, so in the end, mobilertc.aar will not contain any libc++shared.so files.

Image for post
Image for post

Then, let’s rename the original mobilertc.aar (as backup if something went wrong).

Image for post
Image for post

After, we will just need to repack tempFolder into folder that is called “mobilertc.aar”. See the command below, in bottom right corner of the picture.

Image for post
Image for post

Btw, this is how the repacking of .aar files looks like.

Image for post
Image for post

Voila. After repacking, now we have mobilertc.aar that does not contain any libshared.so files.

Image for post
Image for post

Let’s compile the app.

Image for post
Image for post

Wohoo, It runs!

Image for post
Image for post

Now, let’s implement JS parts. We start with creating file, that will wrap all ZoomSDK functionality.

Image for post
Image for post

Then, we create just simple button that will call the function initZoom. Let’s test this button.

Image for post
Image for post

Aaa, I forgot this.

Image for post
Image for post

So, let’s recompile and test. Ou, now different error after clicking the button.

Image for post
Image for post

Hmm, This error looks ugly.

Image for post
Image for post

Let’s solve it by using some dark magic called SoLoader.

Image for post
Image for post

And it runs! We got the successful response to the JS side.

Image for post
Image for post

Then, let’s implement “Join Meeting” functionality.

Image for post
Image for post

Also add the JS part.

Image for post
Image for post

And another button, to test it.

Image for post
Image for post

And voila, now we have joined the meeting with ZOOM.

Image for post
Image for post

To test it, you can launch your Zoom Desktop app. Btw, zoom uses concept of the waiting room, so you will need to approve new participants. But this can be customized in settings.

Image for post
Image for post

After approving the user in waiting room, now we can call each other.

2x Me. 2 times Stefan Majiros.Wonderful.

Image for post
Image for post

Then, let’s add “Start meeting” functionality.

Image for post
Image for post

Again, let’s add JS part.

Image for post
Image for post

Another button… Boring.

Image for post
Image for post

And now you can even start Zoom meeting from your device.

Image for post
Image for post
Image for post
Image for post

Btw, did I mentioned that Zoom SDK UI can be customized ?

Image for post
Image for post

Looking for iOS ? It will come in another post, very soon.

If you liked the article, feel free to share it with React Native Developers.

Bitbucket repo: https://bitbucket.org/majirosstefan/zoom-react-native-example/src/main/

Thanks for reading.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store