Skip to main content

OutgoingCall

OutgoingCall represents the outgoing call state and the UI when a user calls someone else. The view is displayed until someone accepts the call.

It represents the details of the user who is being called. It also allows controlling the pre-join audio/video mute status of the call etc.

It is customizable using our UI cookbook guide on Custom Incoming/Outgoing Call components.

Outgoing Call Camera Enabled
Outgoing Call Camera Enabled
Outgoing Call View Camera Disabled
Outgoing Call Camera Disabled

General Usage

import {
CallingState,
OutgoingCall,
useCall,
useCalls,
useCallStateHooks,
} from '@stream-io/video-react-native-sdk';

const CallPanel = () => {
const call = useCall();
const isCallCreatedByMe = call?.data?.created_by.id === call?.currentUserId;
const { useCallCallingState } = useCallStateHooks();

const callingState = useCallCallingState();

// Display the outgoing call if the call state is RINGING and the call is created by me.
if (callingState === CallingState.RINGING && isCallCreatedByMe) {
return <OutgoingCall />;
}
};

const Call = () => {
const calls = useCalls();

return (
<StreamCall call={call[0]}>
<CallPanel />
</StreamCall>
);
};

Props

landscape

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

Type
boolean | undefined

onHangupCallHandler

Type
() => void | undefined

Handler to be executed when the outgoing call is cancelled or hanged up.

CallTopView

Prop to customize the CallTopView component.

TypeDefault Value
ComponentType| undefinedCallTopView

OutgoingCallControls

Prop to customize the Outgoing call controls in the OutgoingCall component.

TypeDefault Value
ComponentType| undefinedOutgoingCallControls

Did you find this page helpful?