A Step-by-Step Guide to Integrating Zoom in React Native Mobile Apps

In the rapidly evolving landscape of mobile app development, incorporating robust video conferencing features has become a key differentiator. Zoom, renowned for its powerful video communication capabilities, stands out as an ideal choice for developers looking to enhance their React Native applications. This comprehensive guide will take you on a step-by-step journey, demonstrating how to seamlessly integrate Zoom into your React Native projects. Whether you're building a collaborative business app, an educational platform, or a social networking solution, the integration of Zoom can elevate your application by providing a seamless and feature-rich video conferencing experience. Let's delve into the process and unlock the potential of combining React Native with the versatility of Zoom.

Lets start of with a fresh project

To begin, create a new React Native project using the following commands in your terminal:

npx react-native init RNZoomApp
cd YourProjectName

This will set up a new React Native project with the default configuration. Make sure to replace "RNZoomApp" with the desired name for your project.

We will be using React-Native-Zoom-Us package

This package acts as a bridge between your react native app and the zoom sdk. If you want to use a direct Zoom SDK just follow this Link.

Lets carry on using this package and follow the steps to integrate properly. Paste this command in your terminal to install the package.

 npm install react-native-zoom-us

Adding Permissions

Android

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>

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

iOS

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>

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

Usage

Below is the basic template the React Native provides for App.tsx:

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App: React.FC = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, React Native!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

export default App;

You need to add the code as follows:

import React from 'react';
import { View, Text, StyleSheet,TouchableOpacity } from 'react-native';
import ZoomUs from 'react-native-zoom-us';

const App: React.FC = () => {
// initialize using JWT 
await ZoomUs.initialize({
  jwtToken: '...',  //*You might have clientKey and clientSecret instead of*//
});                 //*JWT token if so then you don't need this function*//   

// initialize with extra config
await ZoomUs.initialize(
  {
    clientKey: '...',
    clientSecret: '...',
    domain: 'zoom.us',
  },
//You can remove the following for minimal setup
  {
    disableShowVideoPreviewWhenJoinMeeting: true,
    enableCustomizedMeetingUI: true,
  },
);

// Start Meeting //If there is no meeting created in advance then use this
await ZoomUs.startMeeting({
  userName: 'Johny',
  meetingNumber: '12345678',
  zoomAccessToken: zak,
  userType: 2, // optional
});

// Join Meeting with extra params
//If a meeting is created in advance then use this
const JoinZoomMeet = async () =>{
await ZoomUs.joinMeeting({
  userName: 'Johny',
  meetingNumber: '12345678',
  password: '1234',
  noAudio: true,
  noVideo: true,
});
}

// Leave Meeting
const LeaveZoomMeet = async () =>{
await ZoomUs.leaveMeeting();
}

// Connect Audio
const LeaveZoomMeet = async () =>{
await ZoomUs.connectAudio();
}

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, React Native!</Text>
        <TouchableOpacity onPress={JoinZoomMeet} style={styles.button}>
        <Text style={styles.buttonText}>Join Meeting</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold',
  }, 
  button: {
    backgroundColor: '#3498db',
    padding: 10,
    borderRadius: 5,
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default App;

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

Potential Errors

Main issue on android is that there is an issue related with tools:remove="android:networkSecurityConfig tools:replace="android:usesCleartextTraffic If you face any issues in Android there is a simple fix that I applied and worked is. Just add these in your android/app/src/main/AndroidManifest.xml file

<manifest xmlns:android="http://schemas.android.com/apk/res/android"  
xmlns:tools="http://schemas.android.com/tools" <--- Add this line
>

<application
   android:usesCleartextTraffic="true"
   tools:replace="android:usesCleartextTraffic"    
   tools:remove="android:networkSecurityConfig"
    //Add the above 3 lines as well
   android:name=".MainApplication"
>

After this rebuild your project and that issues should be solved.

Conclusion

In conclusion, we've initiated a basic React Native app, laying the foundation for integrating Zoom functionality. Where Zoom integration specifics or additional features can be seamlessly incorporated into the app. Stay tuned for the next steps in our journey towards a fully integrated Zoom experience in React Native!

Abdul Hadi's CodeCraft