# 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](https://getstream.io/video/docs/react-native/v2/ui-cookbook/incoming-and-outgoing-call/) guide.

![Outgoing Call Camera Enabled](https://getstream.io/docs-assets/images/8718a170e8c4.png)

![Outgoing Call View Camera Disabled](https://getstream.io/docs-assets/images/54a6795cffd5.png)

## General Usage

```tsx
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`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Call/CallControls/OutgoingCallControls.tsx) |

---

For the most recent version of this documentation, visit [https://getstream.io/video/docs/react-native/v2/ui-components/call/outgoing-call/](https://getstream.io/video/docs/react-native/v2/ui-components/call/outgoing-call/).