Display Attendees Count - React Native

This guide explains the process of displaying the number of attendees in realtime.

note

Before proceeding with this guide, ensure that all attendees join the room with the mode set to SIGNALLING_ONLY.

Step 1: Start by obtaining all the participants using the useRoom hook.

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

function AttendeesCount() {
  const { participants } = useRoom();

  return <></>;
}

Step 2: Subsequently, filter out those who have joined as SIGNALLING_ONLY and display the count.

Read each participant's mode from the useParticipant hook, which updates when the participant changes mode. A hook cannot run inside a loop, so render a small component for each participant that reports whether that participant is an attendee.

import { useRoom, useParticipant } from "@videosdk.live/react-native-sdk";
import { useCallback, useEffect, useState } from "react";
import { Text } from "react-native";

function AttendeesCount() {
  const { participants } = useRoom();
  // Ids of the participants who are in SIGNALLING_ONLY mode
  const [attendeeIds, setAttendeeIds] = useState(new Set());

  const updateAttendee = useCallback((participantId, isAttendee) => {
    setAttendeeIds((previousIds) => {
      const nextIds = new Set(previousIds);
      if (isAttendee) {
        nextIds.add(participantId);
      } else {
        nextIds.delete(participantId);
      }
      return nextIds;
    });
  }, []);

  return (
    <>
      {[...participants.keys()].map((participantId) => (
        <AttendeeTracker
          key={participantId}
          participantId={participantId}
          onUpdate={updateAttendee}
        />
      ))}
      <Text>Number of Attendees: {attendeeIds.size}</Text>
    </>
  );
}

function AttendeeTracker({ participantId, onUpdate }) {
  const { mode } = useParticipant(participantId);

  useEffect(() => {
    onUpdate(participantId, mode === "SIGNALLING_ONLY");
    // Drop the participant from the count when they leave
    return () => onUpdate(participantId, false);
  }, [participantId, mode, onUpdate]);

  return null;
}

API Reference

The API references for all the methods utilized in this guide are provided below.

• useRoom
• useParticipant