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.

Call Content Grid

Call Content Grid 3 Participants

Call Content Spotlight

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.

Type	Default Value
grid | spotlight	grid

note

When a screen is shared, the layout automatically changes to spotlight mode.

landscape

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

Type
boolean | undefined

onBackPressed

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

Type
() => void | undefined

onParticipantInfoPress

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

Type
() => void | undefined

onHangupCallHandler

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

Type
() => void | undefined

supportedReactions

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

• like 👍
• raise hand ✋
• fireworks 🎉

Type
StreamReactionType & { icon: string }[]

CallTopView

Prop to customize the CallTopView component.

Type	Default Value
ComponentType| undefined	CallTopView

CallControls

Prop to customize the CallControls component.

Type	Default Value
ComponentType| undefined	CallControls

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

ParticipantView

Prop to customize the ParticipantView component entirely.

Type	Default Value
ComponentType| undefined	ParticipantView

FloatingParticipantView

Prop to customize the FloatingParticipantView component.

Type	Default Value
ComponentType| undefined	FloatingParticipantView

CallParticipantsList

Prop to customize the CallParticipantsList component.

Type	Default Value
ComponentType| undefined	CallParticipantsList

ScreenShareOverlay

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

Type	Default Value
ComponentType| undefined	ScreenShareOverlay

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.