How to Integrate Zoom in React native app

Meeting SDK
,
1

I am creating and retrieving meetings on Zoom via the API, but now I want to join a meeting from a React Native app. I downloaded the Meeting SDK from your website, but when I run the SDK, I am not able to join the meeting. Could you please help me understand how to implement Zoom in a React Native app?

2

@harshitgarg076 ,

You will need to create a General App on Marketplace.zoom.us with Meeting SDK turned on.

Use the client id and client secret to create a Auth Signature/ JWT Token. This is used in the React Native Meeting SDK.

You will also need to enter the meeting number and password before the React Native Meeting SDK can join the meeting,

Note: Without publishing your General App, you can only join meetings which are created by users in your tenant

3

I started a class on my Zoom portal and tried to join the class through my React Native app, but I wasn’t able to join, even though I created a JWT token. Please tell me how it will work, from start to finish
App.js

import { ZoomSDKProvider } from '@zoom/meetingsdk-react-native';
import { NavigationContainer } from '@react-navigation/native';
import { ZOOM_JWT_TOKEN } from '../config';
import { Navigation } from './navigation';

export default function App() {
  console.log('ZOOM_JWT_TOKEN',ZOOM_JWT_TOKEN)
  return (
    <NavigationContainer>
      <ZoomSDKProvider
        config={{
          jwtToken: ZOOM_JWT_TOKEN,
          domain: "zoom.us",
          enableLog: true,
          logSize: 5,
        }}>
        <Navigation />
      </ZoomSDKProvider>
    </NavigationContainer>
  );
}

Join-screen.js

import React, { useEffect, useState } from 'react';
import { View, TouchableOpacity, StyleSheet, Text, Alert } from 'react-native';
import { TextInputRow } from '../../components/text-input-row';
import {useZoom} from '@zoom/meetingsdk-react-native';

type JoinScreenProps = {
  route: any;
  navigation: any;
};

export function JoinScreen({ navigation }: JoinScreenProps) {
  const [meetingNumber, setMeetingNumber] = useState('99888584480');
  const [meetingPassword, setMeetingPassword] = useState('123456');
  const [displayName, setDisplayName] = useState('Harsh');
  const [zak, setZak] = useState('');
  const zoom = useZoom();

  useEffect(() => {
  }, []);

  const joinMeeting = async () => {
    
      if (!meetingNumber.trim()) {
          Alert.alert('Please Enter Valid Meeting Number');
          return;
      };
      if (!displayName.trim()) {
          Alert.alert('Please Enter Display Name');
          return;
      };
      if (!meetingPassword.trim()) {
          Alert.alert('Please Enter Password');
          return;
      };
      try {
        // console.log('here',zoom.joinMeeting({
        //   userName: displayName,
        //   meetingNumber: meetingNumber,
        //   password: meetingPassword,
        // }))
      const checksss =   await zoom.joinMeeting({
          userName: displayName,
          meetingNumber: meetingNumber,
          password: meetingPassword,
        });
        console.log('check', checksss)
      } catch (e) {
        console.log(e);
        Alert.alert('Failed to join the meeting' + e);
        setTimeout(() => navigation.goBack(), 1000);
      }
  };

    const startMeeting = async () => {
        if (!displayName.trim()) {
            Alert.alert('Please Enter Display Name');
            return;
        };
        if (!zak.trim()) {
            Alert.alert('Please Enter ZAK Token');
            return;
        };
        try {
          await zoom.startMeeting({
            userName: displayName,
            meetingNumber: meetingNumber,
            zoomAccessToken: zak,
          });
        } catch (e) {
          console.log(e);
          Alert.alert('Failed to start the meeting' + e);
          setTimeout(() => navigation.goBack(), 1000);
        }
    };

  return (
    <View style={styles.container}>
      <TextInputRow
        label="Meeting Number"
        placeholder="Required"
        keyboardType="default"
        value={meetingNumber}
        onChangeText={setMeetingNumber}
      />
      <TextInputRow
        label="Display Name"
        placeholder="Required"
        keyboardType="default"
        value={displayName}
        onChangeText={setDisplayName}
      />
      <TextInputRow
        label="Password"
        placeholder="Optional"
        keyboardType="default"
        value={meetingPassword}
        onChangeText={setMeetingPassword}
        secureTextEntry
      />
      <TextInputRow
        label="ZAK Token"
        placeholder="Optional"
        keyboardType="default"
        value={zak}
        onChangeText={setZak}
      />
      <TouchableOpacity
        onPress={startMeeting}
        style={styles.button}
      >
        <Text style={styles.buttonText}>{'Create a Meeting'}</Text>
      </TouchableOpacity>
        <TouchableOpacity
          onPress={joinMeeting}
          style={styles.button}
        >
          <Text style={styles.buttonText}>{'Join a Meeting'}</Text>
        </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  button: {
    backgroundColor: '#0e71eb',
    alignItems: 'center',
    marginTop: 15,
    marginHorizontal: 15,
    paddingVertical: 10,
    borderRadius: 5,
  },
  buttonText: {
    color: 'white',
  },
});
4

Please check
@chunsiong.zoom