CallContent

The CallContent is the highest-level UI component that allows you to build your own call screen with full UI elements. So you don’t need to take care much about each feature that you need to build a video call screen with this component.

Basically what you can do with the CallContent is:

• A full call screen with multiple UI elements, such as the top view, participants grid, and control action buttons.
• Handles the state and actions of enabling and disabling camera, microphone, and speakerphone.
• Renders screen sharing.
• Display participant information, such as network quality, name, microphone states, and reactions.
• Renders video of the participant.
• Allows changing layout from grid to spotlight.

Based on the call state, the CallContent provides a list or grid of participants, with their avatars and names, or a video if they’re publishing, with more information for each participant, like their connection quality, etc.

General usage

Let’s see how to show the CallContent UI:

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

const VideoCallUI = () => {
  let call: Call;
  // your logic to create a new call or get an existing call

  return (
    <StreamCall call={call}>
      <CallContent />
    </StreamCall>
  );
};

Props

layout

This switches the list between the grid and the spotlight mode.

landscape

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

onBackPressed

Handler to be called when the back button is pressed in the CallTopView.

onParticipantInfoPress

Handler to be called when the Participant icon is pressed in the CallTopView.

onHangupCallHandler

Handler to be called when the call is left using the hangup call button in call controls.

supportedReactions

Reactions that are to be supported in the call. The following reactions are supported by default:

• like 👍
• raise hand ✋
• fireworks 🎉

CallTopView

Prop to customize the CallTopView component.

CallControls

Prop to customize the CallControls component.

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.

FloatingParticipantView

Prop to customize the FloatingParticipantView component.

CallParticipantsList

Prop to customize the CallParticipantsList component.

ScreenShareOverlay

Component to customize the screen share overlay, when the screen is shared by a user.

Customization

If you’re looking for guides on how to override and customize this UI, we have various UI Cookbook recipes for you:

• Call Top View and Call Controls.
• ParticipantView can be customized using the following customization guide.
• You can pass your own component to LocalParticipantView prop to customize it.