Create Mobile App using RN and Expo

Meeting SDK
1

Hey there,

So I need to build a mobile app that can join Zoom meetings. I would like to use RN with Expo, but I can’t find any resources on this. I have tried the Get Started guide, but I was not able to get it working. Currently, I am using the Meeting SDK for RN, not sure if I can/should be using the Video SDK here.

Is it possible to create a mobile app with a Zoom client in it using RN and Expo and should I use the Meeting SDK or the Video SDK for joining already existing Zoom meetings?

Thanks,
Noah

2

@chunsiong.zoom Just a friendly ping : D

3

@noahviktorschenk I’m not familiar with this.
@ekaansh.zoom do you have experience on this?

4

Hey @noahviktorschenk if you want to join Zoom meetings you should use the Meeting SDK. The React Native SDK is compatible with Expo, given you’re using a custom dev client. Happy to help if you have any questions.

5

@ekaansh.zoom Thank you for the response. Is there a sample app to reference to?

6

We have a Video SDK quickstart using Expo here.
I’ll create one for the Meeting SDK soon and share when it’s available.

7

Perfect, thank you so much!

1 Like
8

I’m trying to do the same thing! @noahviktorschenk did you have any luck, or are you waiting on the example?

9

Hey @kyleflourish,

I have not started yet, but I will be looking more into it this week. I’ll let you know if I figure something out. If you get a simple demo to work, I would also love to see it!

10

Hey @noahviktorschenk

did you ever figure it out? I’ve been trying to get Meeting SDK to work with Expo with no success so far

1 Like
11

Did you ever get to making that demo?

1 Like
12

No, some other things came up and the project was pushed, but I am picking it up again now. I will let you know if I get anything working.

14

I’ve been working on trying to get the Meeting SDK working with Expo but still haven’t quite gotten it to work. I built a very simple sample app to use for discussion: GitHub - kjkurtz/expo-zoom-example: Example App for integrating the Zoom SDK with Expo

The errors I’m seeing right now are:

  • For Android builds:
Gradle: 8.10.2
FAILURE: Build failed with an exception.
Where:
Build file '/home/expo/workingdir/build/node_modules/@zoom/meetingsdk-react-native/android/build.gradle' line: 182
* What went wrong:
A problem occurred evaluating project ':zoom_meetingsdk-react-native'.
> Project with path ':mobilertc' could not be found in project ':zoom_meetingsdk-react-native'.
  • For iOS builds:
❌  Undefined symbols for architecture arm64
┌─ Symbol: _OBJC_CLASS_$_MobileRTC
└─ Referenced from: in libmeetingsdk-react-native.a[3](RNZoomSDK.o)
❌  ld: symbol(s) not found for architecture arm64
❌  clang: error: linker command failed with exit code 1 (use -v to see invocation)

I see the instructions for the React Native Zoom Meeting SDK say you have to manually copy over the native Zoom libraries, but the Zoom Video SDK does not require that. I’d like to avoid that if possible.

Also tagging @donte.zoom from our discussion earlier today.

16

@donte.zoom or @ekaansh.zoom - any update on this? Thanks!

17

i’d also be very interested in this. a sample app would be amazing.

18

@donte.zoom @ekaansh.zoom Just checking in! This is still a problem for us. We are currently using the web sdk on mobile, but the experience isn’t great.

19

Hey everyone,

Sorry about the radio silence here. We take feedback seriously and have been hard at work to improve the experience for our React Native platform. A first step in this direction is the v6.4.10 release that went out recently. This release uses Maven Central and CocoaPods instead of needing to integrate local files directly. This should make the installation/integration a lot simpler than before.

I’m working on the best way to document and share the new step by step process to use the SDK with the community. You can expect a demo app (as promised) to be out early next week. We’re also working to update the documentation to showcase the improved experience. Thanks everyone for your patience and the continued trust. We’ll continue to iterate and improve the experience across platforms and products.

1 Like
20

@ekaansh.zoom Thanks so much for the update! Happy to help test or provide feedback if it would help.

1 Like
21

Here’s a sample app for using Meeting SDK with React Native:

The app is built using the React Native CLI since there are some limitations with Expo at the moment. I’m sharing the steps for setting it up in a fresh project:

  1. Create a new project, we recommend using React Native CLI to simplify the setup
bunx react-native@latest init zoom-meeting-sdk
  1. Install the Zoom Meeting SDK
bun i @zoom/meetingsdk-react-native
  • For Android: add implementation 'us.zoom.meetingsdk:zoomsdk:6.4.10' to the dependencies in android/app/build.gradle file. Use the version number matching the npm packge.
  • For iOS run: npx pod-install to install the pods
  1. Add permissions for the camera and microphone
  • For iOS: add NSCameraUsageDescription and NSMicrophoneUsageDescription to your Info.plist file.
    <key>NSCameraUsageDescription</key>
	<string>For people to see you during meetings, we need access to your camera.</string>
	<key>NSMicrophoneUsageDescription</key>
	<string>For people to hear you during meetings, we need access to your microphone.</string>
  • For Android: add the necessary permissions to your android/app/src/main/AndroidManifest.xml file. Example:
    <uses-permission android:name="android.permission.INTERNET" />
    <!-- "Connect to the network" will need the following Permissions -->
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <!-- In Meeting "Audio With VOIP/Share Screen Audio" will need the following Permissions -->
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <!-- "Preview/In Meeting Video/VirtualBackground/Share Camera" will need the following Permissions -->
    <uses-permission android:name="android.permission.CAMERA" />
    <!-- "Keep the CPU on in meeting when screen off" will need the following Permissions -->
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    ...

You can read the docs for more details on the permissions.

  1. Android only configuration

  • Make sure you’re using at least minSdkVersion = 26 & targetSdkVersion = 35 in your android/build.gradle file.

  • The Meeting SDK doesn’t support cleartext traffic for security reasons. Edit the android/app/src/debug/AndroidManifest.xml file to disable it:

    <application
        android:usesCleartextTraffic="true"
+        tools:replace="android:usesCleartextTraffic"
        ...
  1. Wrap your app in the ZoomSDKProvider
function App() {
  ...
  return (
    <ZoomSDKProvider config={{....}}>
      <YourApp>
    </ZoomSDKProvider>
  );
  1. Use the Zoom Meeting SDK
function YourApp() {
  const zoom = useZoom();
  const handleJoin = async () => {
     await zoom.joinMeeting({....});
  }
  ...
  1. Run the app
# Android
bun run react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
bun run android
# iOS
bun run ios

From the repo readme. We’re reworking the react-native docs but wanted to share these asap.