ParticipantView

The ParticipantView component renders a participant’s video and displays related information of the participant. It can also be used to display the screen sharing view.

It displays the participant info such as

Name
Audio/video mute/unmute state
Reaction
Network quality indicator

It can toggle between video and avatar based on the participant’s video state. It also provides action buttons (for example, to unpin the participant).

It is used as a building block to render individual item of participants in CallContent and CallParticipantsList.

General Usage

In order to use the ParticipantView as a standalone component, you should use the following code:

import {
  ParticipantView,
  useCallStateHooks,
} from '@stream-io/video-react-native-sdk';

const App = () => {
  const { useParticipants } = useCallStateHooks();
  const participants = useParticipants();

  // Here to show the demo, we pass only first participant. You can pass any of the participant.
  return <ParticipantView participant={participants[0]} />;
};

Props

`participant`

The participant to be rendered in the ParticipantView.

Type
`StreamVideoParticipant`

`trackType`

The type of the participant stream to be rendered. Eg: screen sharing or participant’s video stream.

Type	Default Value
`videoTrack` \| `screenShareTrack`	`videoTrack`

`style`

This prop is used to override the root container style of the component.

Type
ViewStyle

`isVisible`

When set to false, the video stream will not be shown even if it is available.

Type	Default Value
`boolean`	`true`

`videoZOrder`

The zOrder for the video that will be displayed.

Type	Default Value
`number`	`0`

`objectFit`

Represents how the video view fits within the parent view.

Type	Default Value
`'contain'` \| `'cover'` \|`undefined`	`cover`

`ParticipantLabel`

Component to customize the Label of the participant.

Type	Default Value
`ComponentType`\| `undefined`	`ParticipantLabel`

`ParticipantReaction`

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

Type	Default Value
`ComponentType`\| `undefined`	`ParticipantReaction`

`ParticipantVideoFallback`

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

Type	Default Value
`ComponentType`\| `undefined`	`ParticipantVideoFallback`

`ParticipantNetworkQualityIndicator`

Component to customize the network quality indicator of the participant.

Type	Default Value
`ComponentType`\| `undefined`	`ParticipantNetworkQualityIndicator`

`VideoRenderer`

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

Type	Default Value
`ComponentType`\| `undefined`	`VideoRenderer`

Customization

Our UI cookbook tells all the important information about the component customizations.

FloatingParticipantView

Avatar