CallParticipantsList

This component displays a list of participants in a FlatList. You can use this component to display participants either in a vertical or horizontal scrolling mode.

Our CallContent component internally uses CallParticipantsList inside CallParticipantsGrid and CallParticipantsSpotlight components.

General Usage

The CallParticipantsList can be used to display the all the participants in the form of FlatList. By default it shows the participants vertically with 2 participants in each row. This is customizable using the props.

import {
  Call,
  CallParticipantsList,
  StreamCall,
  useParticipants,
} from '@stream-io/video-react-native-sdk';

const VideoCallUI = () => {
  let call: Call;
  const allParticipants = useParticipants();

  return (
    <StreamCall call={call}>
      <CallParticipantsList participants={allParticipants} />
    </StreamCall>
  );
};

Props

participants

The list of participants to list in the view.

numberOfColumns

The number of participants to be displayed in a single row. This property is only used when there are more than 2 participants.

horizontal

This decides whether the participants should be listed vertically or horizontally.

landscape

Applies the landscape mode styles to the component, if true.

ParticipantLabel

Component to customize the Label of the participant.

ParticipantReaction

Component to customize the component that displays the reaction of the participant.

ParticipantVideoFallback

Component to customize the video fallback of the participant, when the video is disabled.

ParticipantNetworkQualityIndicator

Component to customize the network quality indicator of the participant.

VideoRenderer

Component to customize the video component of the participant. It is also responsible to display the ParticipantVideoFallback.

ParticipantView

Prop to customize the ParticipantView component entirely.