Display Attendees Count - React Native

In this guide, we will see how you can display the number of attendees in realtime.

note

Before going forward in this guide, do make sure all the attendees join the meeting with mode as VIEWER

Step 1: We will get the participants from the useMeeting hook.

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

function AttendessCount() {
  const { participants } = useMeeting();

  return <></>;
}

Step 2: With all the participants, we will filter out participants who have joined as a VIEWER and then display that count.

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

function AttendessCount() {
  const { participants } = useMeeting();

  const attendeesCount = useMemo(() => {
    const attendees = [...participants.values()].filter((participant) => {
      return participant.mode == "VIEWER";
    });
    return attendees.length || 0;
  }, [participants]);

  return (
    <>
      <Text>Number of Attendess: {attendeesCount}</Text>
    </>
  );
}

API Reference

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

• useMeeting