Call layouts

Call layout components render participants in grid or spotlight arrangements and are used by CallContent.

Use these components directly when you need custom call screens but still want the SDK layout behavior.

`CallParticipantsGrid`

Renders participants in a grid-oriented layout.

General usage

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

const VideoCallUI = () => {
  let call: Call;

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

Props

`showLocalParticipant`

Controls whether the local participant is shown in one-to-one calls when floating behavior is active.

Type	Default Value
`boolean` \| `undefined`	`false`

`landscape`

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

Type
`boolean` \| `undefined`

`mirror`

Forces participant videos to be mirrored or unmirrored. By default, local front camera video is mirrored and remote videos are not mirrored.

Type
`boolean` \| `undefined`

`supportedReactions`

Supported reactions for the call. Default reactions:

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

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

`CallParticipantsList`

Prop to customize the CallParticipantsList component.

Type	Default Value
`ComponentType`\| `undefined`	`CallParticipantsList`

`ParticipantView`

Prop to customize the ParticipantView component entirely.

Type	Default Value
`ComponentType`\| `undefined`	`ParticipantView`

`ParticipantLabel`

Component to customize the Label of the participant.

Type	Default Value
`ComponentType`\| `undefined`	`ParticipantLabel`

`ParticipantReaction`

Component to customize the participant reaction display.

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 participant video. Also displays the ParticipantVideoFallback.

The VideoRenderer accepts a mirror?: boolean prop to force mirroring on or off. When provided, it takes precedence over the default mirroring logic.

Type	Default Value
`ComponentType`\| `undefined`	`VideoRenderer`

Props

Prop	Type	Default Value	Description
`participant`	`StreamVideoParticipant`		The participant whose video or screenshare should be rendered.
`trackType`	`videoTrack` \| `screenShareTrack`	`videoTrack`	The track to render.
`isVisible`	`boolean`	`true`	When `false`, the video stream is not shown even if it is available.
`objectFit`	`'contain'` \| `'cover'` \| `undefined`	`undefined`	How the video fits within its container. When omitted, a default is computed from the track dimensions.
`videoZOrder`	`number`	`0`	The z-order to apply to the underlying RTC view.
`mirror`	`boolean` \| `undefined`	`undefined`	Forces mirroring on or off. When omitted, the default mirroring logic is used.
`ParticipantVideoFallback`	`ComponentType` \| `null` \| `undefined`	`ParticipantVideoFallback`	Component to render when video is unavailable. Use `null` to disable the fallback.

`CallParticipantsSpotlight`

Renders one participant in spotlight and remaining participants in a secondary list.

General usage

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

const VideoCallUI = () => {
  let call: Call;

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

Props

`landscape`

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

Type
`boolean` \| `undefined`

`mirror`

Forces participant videos to be mirrored or unmirrored. By default, local front camera video is mirrored and remote videos are not mirrored.

Type
`boolean` \| `undefined`

`supportedReactions`

Supported reactions for the call. Default reactions:

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

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

`CallParticipantsList`

Prop to customize the CallParticipantsList component.

Type	Default Value
`ComponentType`\| `undefined`	`CallParticipantsList`

`ScreenShareOverlay`

Component to customize the screen share overlay when a user is sharing their screen.

Type	Default Value
`ComponentType`\| `undefined`	`ScreenShareOverlay`

`ParticipantView`

Prop to customize the ParticipantView component entirely.

Type	Default Value
`ComponentType`\| `undefined`	`ParticipantView`

`ParticipantLabel`

Component to customize the Label of the participant.

Type	Default Value
`ComponentType`\| `undefined`	`ParticipantLabel`

`ParticipantReaction`

Component to customize the participant reaction display.

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 participant video. Also displays the ParticipantVideoFallback.

The VideoRenderer accepts a mirror?: boolean prop to force mirroring on or off. When provided, it takes precedence over the default mirroring logic.

Type	Default Value
`ComponentType`\| `undefined`	`VideoRenderer`

Props

Prop	Type	Default Value	Description
`participant`	`StreamVideoParticipant`		The participant whose video or screenshare should be rendered.
`trackType`	`videoTrack` \| `screenShareTrack`	`videoTrack`	The track to render.
`isVisible`	`boolean`	`true`	When `false`, the video stream is not shown even if it is available.
`objectFit`	`'contain'` \| `'cover'` \| `undefined`	`undefined`	How the video fits within its container. When omitted, a default is computed from the track dimensions.
`videoZOrder`	`number`	`0`	The z-order to apply to the underlying RTC view.
`mirror`	`boolean` \| `undefined`	`undefined`	Forces mirroring on or off. When omitted, the default mirroring logic is used.
`ParticipantVideoFallback`	`ComponentType` \| `null` \| `undefined`	`ParticipantVideoFallback`	Component to render when video is unavailable. Use `null` to disable the fallback.

CallContent

CallControls