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.

TypeDefault Value
grid | spotlightgrid

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.

TypeDefault Value
ComponentType| undefinedCallTopView

CallControls

Prop to customize the CallControls component.

TypeDefault Value
ComponentType| undefinedCallControls

ParticipantLabel

Component to customize the Label of the participant.

TypeDefault Value
ComponentType| undefinedParticipantLabel

ParticipantReaction

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

TypeDefault Value
ComponentType| undefinedParticipantReaction

ParticipantVideoFallback

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

TypeDefault Value
ComponentType| undefinedParticipantVideoFallback

ParticipantNetworkQualityIndicator

Component to customize the network quality indicator of the participant.

TypeDefault Value
ComponentType| undefinedParticipantNetworkQualityIndicator

VideoRenderer

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

TypeDefault Value
ComponentType| undefinedVideoRenderer

ParticipantView

Prop to customize the ParticipantView component entirely.

TypeDefault Value
ComponentType| undefinedParticipantView

FloatingParticipantView

Prop to customize the FloatingParticipantView component.

TypeDefault Value
ComponentType| undefinedFloatingParticipantView

CallParticipantsList

Prop to customize the CallParticipantsList component.

TypeDefault Value
ComponentType| undefinedCallParticipantsList

ScreenShareOverlay

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

TypeDefault Value
ComponentType| undefinedScreenShareOverlay

Customization

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

© Getstream.io, Inc. All Rights Reserved.