react-native-zoom-us

This is a bridge for ZoomUS Meeting SDK.

NOTE: In August 2024, official bridge has been released.

Tested on Android and iOS: (See details)

Pull requests are welcome.

• Example
• Upgrading Guide
• CHANGELOG
• TROUBLESHOOTING

Docs

• Screenshare on iOS
• Events
• Video View Component
• Size Reduction
• Custom Meeting Activity

Getting started

Install npm lib: npm install react-native-zoom-us

Installation

Android

1. Declare permissions

Depending on how you will use the lib, you will need to declare permissions in /android/app/src/main/AndroidManifest.xml. This is the minimum set of permissions you need to add in order to use audio and video:

<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
  <uses-permission android:name="android.permission.READ_PHONE_STATE"/>
  <uses-permission android:name="android.permission.CAMERA"/>
  <uses-permission android:name="android.permission.RECORD_AUDIO"/>

  ...
</manifest>

You may also need the following permissions:

<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

  ...
</manifest>

2. Add this to /android/app/src/debug/AndroidManifest.xml

<application
  ...
  tools:remove="android:networkSecurityConfig"
  tools:replace="android:usesCleartextTraffic"
>

This is needed because ZoomSDK declares android:networkSecurityConfig

3. npm run android

iOS

1. Make sure you have appropriate description in Info.plist:

<key>NSBluetoothPeripheralUsageDescription</key>
<string>We will use your Bluetooth to access your Bluetooth headphones.</string>

<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>

<key>NSPhotoLibraryUsageDescription</key>
<string>For people to share, we need access to your photos.</string>

2. Update pods using cd ios/ && pod install && cd ..

3. npm run ios

Usage

import ZoomUs from 'react-native-zoom-us';

// initialize
await ZoomUs.initialize({
  jwtToken: '...',
});

// initialize with extra config
await ZoomUs.initialize(
  {
    jwtToken: '...',
    domain: 'zoom.us',
  },
  {
    disableShowVideoPreviewWhenJoinMeeting: true,
    enableCustomizedMeetingUI: true,
  },
);

// Start Meeting
await ZoomUs.startMeeting({
  userName: 'Johny',
  meetingNumber: '12345678',
  zoomAccessToken: zak,
  userType: 2, // optional
});

// Join Meeting
await ZoomUs.joinMeeting({
  userName: 'Johny',
  meetingNumber: '12345678',
});

// Join Meeting with extra params
await ZoomUs.joinMeeting({
  userName: 'Johny',
  meetingNumber: '12345678',
  password: '1234',
  noAudio: true,
  noVideo: true,
});

// Leave Meeting
await ZoomUs.leaveMeeting();

// Connect Audio
await ZoomUs.connectAudio();
// you can also use autoConnectAudio: true in `ZoomUs.joinMeeting`

Events Api

Hook sample for listening events:

import ZoomUs from 'react-native-zoom-us';

useEffect(() => {
  const listener = ZoomUs.onMeetingStatusChange(({event}) => {
    console.log('onMeetingStatusChange', event);
  });
  const joinListener = ZoomUs.onMeetingJoined(() => {
    console.log('onMeetingJoined');
  });

  return () => {
    listener.remove();
    joinListener.remove();
  };
}, []);

If you need more events, take a look Events

Testing

The plugin has been tested for joinMeeting using smoke test procedure:

• react-native-zoom-us: 6.18.0
• react-native: 0.72.2
• node: 16.20.1
• macOS: 13.4.1 M1
• XCode: 14.3.1
• Android minSdkVersion: 23

FAQ

Does library support Expo?

You have to eject your expo project to use this library.