Leave or End Room - React Native

A participant can choose to leave a room without removing all the other participants. This is typically done using the Leave Room functionality.

Alternatively, if the participant is the host or the last person remaining in the session, they can choose to End Room by removing all other participants, which will end the session for everyone.

note

This page uses the following asynchronous methods. Refer to their API reference for the errors each Promise may reject with, and handle these rejections appropriately based on your use case.

• leave()
• end()

leave()

To leave the room without removing all the participants you need to call the leave() method which is a part of the useRoom hook of React Native SDK.

end()

To end the room by removing all the participants you need to call the end() method which is a part of the useRoom hook of React Native SDK.

note

These methods can be called only after the room is joined successfully.

Example

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

const RoomView = () => {
  //Getting the leave and end method from hook
  const { leave, end } = useRoom();

  const handleLeaveRoom = async () => {
    // Leaving Room
    try {
      await leave();
    } catch (err) {
      console.error("leave failed:", err);
    }
  };

  const handleEndRoom = async () => {
    // Ending Room
    try {
      await end();
    } catch (err) {
      console.error("end failed:", err);
    }
  };

  return (
    <>
      <TouchableOpacity
        onPress={() => {
          handleLeaveRoom();
        }}
      >
        <Text>Leave Room</Text>
      </TouchableOpacity>

      <TouchableOpacity
        onPress={() => {
          handleEndRoom();
        }}
      >
        <Text>End Room</Text>
      </TouchableOpacity>
    </>
  );
};

tip

RoomProvider leaves the room when it unmounts. Keep it mounted for as long as the call lasts. If the participant has already left the room, leave() rejects, so catch that rejection.

Events associated with the leave() method.

The following callbacks are received when a participant leaves the room.

• The Local Participant will receive a callback onRoomLeft of the useRoom() hook.
• All remote participants will receive a callback onParticipantLeft with the Participant object.

Events associated with the end() method.

The following callbacks are received when a participant ends the room.

• All remote participants and the local participant will receive a callback onRoomLeft of the useRoom() hook.

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

const RoomView = () => {
  //Event to determine if the room has been left
  function onRoomLeft() {
    console.log("onRoomLeft");
  }

  //Event to determine if some other participant has left
  function onParticipantLeft(participant) {
    console.log(" onParticipantLeft", participant);
  }

  //Getting the leave and end method from hook and assigning event callbacks
  const { leave, end } = useRoom({
    onRoomLeft,
    onParticipantLeft,
  });

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

API Reference

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

• leave()
• end()
• onRoomLeft()
• onParticipantLeft()