Skip to content
Platform docs
Auth, users, webhooks & more
Info:
This is beta documentation for Stream Video React Native SDK v2. For the latest stable version, see the latest version (v1).

OutgoingCall

Display outgoing call state when calling another user. Shows until someone accepts.

Features:

  • Callee details - Shows who is being called
  • Pre-join controls - Audio/video mute status

Customize via Custom Incoming/Outgoing Call components guide.

Outgoing Call Camera Enabled
Outgoing Call View 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
(err?: Error) => void | undefined

Callback invoked after outgoing call cancel/hangup attempt. Receives an error on failure.

OutgoingCallControls

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

Type Default Value
ComponentType| undefined OutgoingCallControls