Join Meeting - React Native

Overview

With our React Native SDK, you can choose to manually call the join() or leave it up to the VideoSDK to automatically call the join() when the MeetingProvider is rendered.

Before joining the meeting, it has to be initialized. If you have not initialized a meeting yet, you can follow the guide here.

join()

• To join the meeting you can call the join() which is the part of the useMeeting hook of React SDK.
• This method can be called after the meeting is initialized from the MeetingProvider.

caution

useMeeting hook mentioned above is accessible within the MeetingProvider only.

import { MeetingProvider, useMeeting } from "@videosdk.live/react-native-sdk";
import { TouchableOpacity, Text } from "react-native";

const App = () => {
  //... Meeting Provider code
};

const MeetingView = () => {
  //Getting the join method from hook and assigning event callbacks
  const { join } = useMeeting();

  const handleJoinMeeting = () => {
    // Joining Meeting
    join();
  };

  return (
    <>
      <TouchableOpacity
        onPress={() => {
          handleJoinMeeting();
        }}
      >
        <Text>Join Meeting</Text>
      </TouchableOpacity>
    </>
  );
};

Events associated with Join

Following callbacks are received when a participant is successfully joined.

• Local Participant will receive a onMeetingJoined event, when successfully joined.
• Remote Participant will receive a onParticipantJoined event with the newly joined Participant object from the event callback.

import { useMeeting } from "@videosdk.live/react-native-sdk";

const MeetingView = () => {
  //Event to know meeting is joined
  function onMeetingJoined() {
    console.log("onMeetingJoined");
  }

  //Event to know some other participant joined
  function onParticipantJoined(participant) {
    console.log(" onParticipantJoined", participant);
  }

  //Getting the join method from hook and assigning event callbacks
  const { join } = useMeeting({
    onMeetingJoined,
    onParticipantJoined,
  });

  return <>...</>;
};

API Reference

The API references for all the methods and events utilised in this guide are provided below.

• MeetingProvider
• join()
• onMeetingJoined()
• onParticipantJoined()