Join Room - React Native

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.

• join()
• requestPermission()

Overview

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

caution

Use exactly one of these two — setting the flag and calling join() together can create two room instances.

• There is a button inside RoomProvider. Call join() from its click handler: from the event, never from an effect.
• There is no button, because the user already acted on an earlier screen — a device check, a room link, a button elsewhere in your app. Set joinWithoutUserInteraction to true as a prop on RoomProvider, not a key inside config, and do not call join() at all.

With the flag set, the SDK makes the join() call itself, so there is no promise of yours to wrap in try / catch — the error handling in the sample does not apply. Subscribe to onError from useRoom to catch a failed join and read its code. Ask for camera and microphone access before you render RoomProvider, because on Android the SDK does not ask for it.

Do not call join() from a mount effect inside RoomProvider. It fails with 4002 INVALID_TOKEN even when the token is valid, and a click on a previous screen does not make a mount effect safe. Call join() from a user action inside RoomProvider, or set joinWithoutUserInteraction.

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

join()

• To join a room you can call the join() method which is the part of the useRoom hook of React Native SDK.
• This method can be called after the room is initialized from the RoomProvider.
• On Android, the SDK does not ask the user for camera and microphone access. Ask for it with requestPermission() of the useMediaDevice hook before you call join(), as the example below does. Otherwise the camera and microphone do not start. iOS asks the user on its own.
• Call join() once. Disable your join button until the call settles, so that a second tap does not start a second join.

caution

useRoom hook mentioned above is accessible within the RoomProvider only.

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

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

const RoomView = () => {
  //Getting the join method from hook and assigning event callbacks
  const { join } = useRoom();
  const { requestPermission } = useMediaDevice();

  const handleJoinRoom = async () => {
    try {
      // On Android, the SDK does not ask for camera and microphone access
      await requestPermission(Constants.permission.AUDIO_AND_VIDEO);
      // Joining Room
      await join();
    } catch (err) {
      console.error("join failed:", err);
    }
  };

  return (
    <>
      <TouchableOpacity
        onPress={() => {
          handleJoinRoom();
        }}
      >
        <Text>Join Room</Text>
      </TouchableOpacity>
    </>
  );
};

Events associated with Join

Following events are received when a participant successfully joins a room.

• The Local Participant will receive an onRoomJoined event, when the room is successfully joined.
• The Remote Participant will receive an onParticipantJoined event with the newly joined Participant object from the event callback.

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

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

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

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

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

API Reference

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

• RoomProvider
• join()
• requestPermission()
• onRoomJoined()
• onParticipantJoined()