FloatingParticipantView

FloatingParticipantView displays the local video stream of the local participant. It is a floating view that can be dragged in the call area.

When the video is muted, the video muted icon is shown in a disabled background.

General Usage

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

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

const App = () => {
  const { useLocalParticipant } = useCallStateHooks();
  const localParticipant = useLocalParticipant();
  return <FloatingParticipantView participant={localParticipant} />;
};

Props

alignment

Determines where the floating participant video will be placed initially.

participant

The participant to be rendered in the FloatingParticipantView.

onPressHandler

Handler used to handle actions on click of the participant view in FloatingParticipantView.

style

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

videoZOrder

The zOrder for the video that will be displayed.

objectFit

Represents how the video view fits within the parent view.

ParticipantLabel

Component to customize the Label of the participant.

ParticipantReaction

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

ParticipantNetworkQualityIndicator

Component to customize the network quality indicator of the participant.

ParticipantVideoFallback

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

ParticipantView

Prop to customize the ParticipantView component entirely.

VideoRenderer

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