import { VideoGrid } from '@hiyve/rn-react';
import { useParticipants, useLocalMedia } from '@hiyve/rn-react';
function MeetingScreen() {
const { participants, localUserId } = useParticipants();
const { localStream, isAudioMuted, isVideoMuted } = useLocalMedia();
return (
<VideoGrid
localStream={localStream}
localUserId={localUserId}
localDisplayName="Jane Doe"
isLocalAudioMuted={isAudioMuted}
isLocalVideoMuted={isVideoMuted}
participants={participants}
layout="overlay"
dominantUserId={dominantSpeaker}
/>
);
}
Responsive video layout that displays the local user and all remote participants as video tiles.
Supports two layout modes:
Grid mode (default): The grid automatically computes tile sizes based on the container dimensions, participant count, and the
maxColumnssetting. The local user's tile always appears first (top-left), followed by remote participants in array order.Overlay mode: The dominant speaker fills the entire container. A floating scrollable strip of small tiles is anchored at the top-right corner, similar to FaceTime's picture-in-picture style. If there are no other participants to show in the strip, it is hidden.