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.

Type	Default Value
`grid` \| `spotlight`	`grid`

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`

`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:

🤣 Rolling on the floor laughing
👍 like
👎 Dislike
🎉 fireworks
🙌 Raised hands
✋ Raised hand

Type
`StreamReactionType & { icon: string }[]`

`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:

ParticipantView can be customized using the following customization guide.
You can pass your own component to LocalParticipantView prop to customize it.

Theme

CallControls