CallControls

CallControls allows users to execute actions during the call(for example, mute/unmute audio/video, reactions, hang-up calls, etc.). We provide a built-in CallControls component that displays all relevant call controls during a call.

General Usage

The CallControls component displays the available controls for the call.

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

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

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

Props

onHangupCallHandler

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

Type
() => void | undefined

landscape

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

Type
boolean | undefined

Built-in call controls

Each call control is available as a separate UI component.

AcceptCallButton

This component is used in the Incoming Call component to accept an incoming call.

Type	Type	Description
onPressHandler	() => void | undefined	Handler to be called when the accept call button is pressed. Used to override the default behaviour.
onAcceptCallHandler	() => void | undefined	Handler to be called after the incoming call is accepted.

HangupCallButton

This component is used to hangup/leave an active call/outgoing call.

Type	Type	Description
onPressHandler	() => void | undefined	Handler to be called when the hang up call button is pressed. Used to override the default behaviour.
onHangupCallHandler	() => void | undefined	Handler to be called after the call is hanged up.

RejectCallButton

This component is used in the Incoming Call component to reject an incoming call.

Type	Type	Description
onPressHandler	() => void | undefined	Handler to be called when the reject call button is pressed. Used to override the default behaviour.
onRejectCallHandler	() => void | undefined	Handler to be called after the incoming call is rejected.

ToggleAudioPreviewButton

This component is used to toggle audio mute/unmute status before joining the call.

Type	Type	Description
onPressHandler	() => void | undefined	Handler to be called when the audio preview button is pressed. Used to override the default behaviour.

ToggleVideoPreviewButton

This component is used to toggle video mute/unmute status before joining the call.

Type	Type	Description
onPressHandler	() => void | undefined	Handler to be called when the video preview button is pressed. Used to override the default behaviour.

ToggleAudioPublishingButton

This component is used to toggle audio mute/unmute status while in the call.

Type	Type	Description
onPressHandler	() => void | undefined	Handler to override the default behaviour of the audio publishing button..

ToggleVideoPublishingButton

This component is used to toggle video mute/unmute status while in the call.

Type	Type	Description
onPressHandler	() => void | undefined	Handler to override the default behaviour of the video publishing button.

ToggleCameraFaceButton

This component is used to toggle camera face(front/back) when in the call.

Type	Type	Description
onPressHandler	() => void | undefined	Handler to override the default behaviour of the toggle camera face button.

ReactionsButton

This component is used to display the list of Reactions supported in the call. It can also be used to send reactions.

The following reactions are supported by default:

• like 👍
• raise hand ✋
• fireworks 🎉

Type	Type	Description
onPressHandler	() => void | undefined	Handler to override the default behaviour when the reactions button is pressed.

ChatButton

This component is used to display/open the chat window while in the call.

Type	Type	Description
onPressHandler	() => void | undefined	Handler to override the default behaviour when the chat button is pressed.
unreadBadgeCount	number | undefined	The count of the current unread message to be displayed above on the Chat button.

Customization

You can create your own custom component using the built-in call controls as building blocks.

If you want to create custom call controls, follow the Call Controls UI Cookbook guide for more information.