Integrating Zoom SDK into React Native v.63.4 — Complete Tutorial — iOS
by Stefan Majiros
What is this about
In this article written in December 2020 I will show you techniques for integrating Zoom SDK into iOS apps built with React Native. I decided to create this tutorial to help people save time and also because other Zoom wrappers for RN did not work as I would expect.
We will implement 3 methods: initZoom, joinMeeting and startMeeting.
NOTE: Link to repo with example app is in the end of this article.
Android Part
If you want to see how to download and setup API keys for Zoom SDK, or setup Android part, just read about it here:
Let’s start
So, let’s assume that you downloaded Zoom SDK (or cloned my repo with my example and SDKs).
Here is how downloaded Zoom iOS SDK look like:
So, to add it into your React Native app, you will need to copy the lib folder in the“ios” folder of your project. My advice is to keep Xcode closed for now, do it just with Finder. This is how it should look like, if you did it correctly:
Now, open your project in Xcode and Finder besides. The key thing is to drag & drop MobileRTC.framework from Finder under “Frameworks” in Xcode (see the left sidebar in the pic below). If you put it elsewhere, you could have problems with deployment into Appstore (btw, some other RN Zoom wrappers have this problem) - Apple would reject your app.
When dragging something into Xcode, just remember to always check if you have “checked” correct target, as sometimes Xcode decides not to include any target at all.
I am strongly biased against Apple’s style of drag-and-drop development, as it often causes many problems, at least in my projects.
Now, just repeat the steps for remaining frameworks in “lib” folder. So, in the end, you will add MobileRTC.framework, MobileRTCScreenShare.framework and MobileRTCResource.bundle under Frameworks. See below, how it would look like:
Next step, is to open Target you want to build and set up ”Embed & Sign” for all of these .frameworks (see the middle-bottom part of the next picture).
Then check Build Phases.
Then, disable bitcode in Build Settings (as Zoom is not supporting this yet). Set it to “No” for the both: Debug and Release variants.
Now, open the Sample Zoom project that you downloaded as part of the Zoom iOS SDK (it is inside, with name MobileRTCSample).
Then, find MobileRTC-Sample-Prefix.pch file in Sample Zoom App, (it is located in “Supporting Files” group), right-click & open it in Finder. Then copy the MobileRTC-Sample-Prefix.pch into the your app project’s folder where AppDelegate.h is located - all using just Finder, no drag & dropping. Here is, how your app should look like in the end:
Then, we need to tell Xcode to use this Prefix Header (MobileRTC-Sample-Prefix.pch). We set it up in Build Settings.
We put there the relative path to the Mobile-RTCSample-Prefix file (starting from the “ios” folder).
Now, Let’s build it. For those who did not read the Android part, in Android part we just created simple buttons and Reac Native Module that allow us to test this functionality.
It runs. Wonderful, not ?
It runs with the Zoom SDK inside, but we did not implemented any logic that will allow us to use the Zoom capabilities. So, let’s implement this. We start with creating Objective-C header file:
Remember, to check if you have correct Target selected and remember that the recommended practice is to name Objective-C class (the both the .h - header file and .m - implementation file) with the prefix “RCT”(that stands for ReaCT). In JS side, we will import it without RCT prefix (because RCT prefix is automatically removed by React Native).
Then, just add basic skeleton for iOS React Native module.
Let’s continue with adding .m file (that is implementation for .header file).
Remember to check the target.
And again, we will put inside the basic skeleton/boilerplate for Objective-C module (for imple.mentation part). We will start with implementing initZoom method.
Because in Android part we have defined API methods of RN module, we will use the same method declaration also for iOS. We will start with initZoom method.
As you can see here, it is based on similar principles as the Zoom Android SDK. In Android part, we needed to define listeners (or implement listener interface, here in iOS, we use delegates.
The tricky part, is that we want to share promise sent from RN between two methods (initZoom and onMobileRTCAuthReturn ). The initZoom method is called from JS and it only submits auth request to the one of Zoom servers. Then some time later, if Zoom SDK authenticates this request successfully (receives OK response from Zoom servers), onMobileRTCAuthReturn method is called and we probably want to notify JS / RN side in that time. The easiest way to do that is to define property that we will use to store the RN promise from initZoom method.Then some time later, we will use the same promise in onMobileRTCAuthReturn method to notify JS part.
In Java, we would define properties in the .class file, but in iOS, classes are based from two files (.m and .h). So we will define property in “.h” / header file. Moreover, we define one more property to store the “reject promise” from RN. See how it would look like:
This was all for initZoom method. Let’s continue with joinMeeting.This is not much complicated.
Note: if you want to use “autorelease” method, you need to disable Objective-C reference counting in Build Settings.
For the joinMeeting, we also need to implement these 2 methods: “onMeetingStateChange” and “onMeetingError”.
Let’s build it, and test it by clicking on initZoom button and then on joinMeeting button. Voila! We joined the meeting.
Let’s implement startMeeting method. Similarly as in Android, we need to acquire ZAK (Zoom Access Token) by providing the email that is registered on the Zoom, as Zoom SDK does not offer to start “anonymous ”meetings. Let’s consider userId (on the pic below) to be an email that is registered in Zoom.
The way how to get ZAK (Zoom Access Token) is a little complicated (contains a lot of boiler plate code) - but the Zoom official docs provide this code. I extracted this “helper-like” functionality into separate Objective-C class called ZoomManager that defines one simple method : requestZAK (on the pic below).
Now, we just need to add implementation of this boilerplate code (mostly copied from Zoom Docs and Zoom Sample App):
Finally, this should be it. So, let’s build our app, click on initZoom and startMeeting.
Voila!
Now, we started Zoom meeting from our iPhone.
NOTE: Zoom offers two kind of iOS SDKs (first works with simulator another SDK works only at devices), so you should have this in mind.The process of including the first or second into your app is the same.
And, I think it should be obvious, but you need to add also “permissions” in Info.plist file:
Summary
If you liked this tutorial & it helped you, feel free to share this & let me know !
Link to example repo: https://bitbucket.org/majirosstefan/zoom-react-native-example/src/main/
Hi, I am Stefan Majiros, serverless and React Native freelancer. You can follow me on Twitter (@stefanmajiros), or hire me for your project using https://stefan-majiros.com where you could schedule 30min video call with me to consult your project — for free.
