# RingingCallContent

Build calling/ringing UI easily with `RingingCallContent`. Shows participant info and cancel option before acceptance.

Based on ringing state and call type, displays participant list with avatars/names, or single avatar background for 1:1 calls.

<gallery>

![Incoming Call](https://getstream.io/docs-assets/images/1e65bfbd810e.png)

![Outgoing Call](https://getstream.io/docs-assets/images/4f35de080a2e.png)

![Joining Call Indicator](https://getstream.io/docs-assets/images/8ffe95a2bef2.png)

![Call Content](https://getstream.io/docs-assets/images/ca6432325b46.png)

</gallery>

## Usage

To use the `RingingCallContent` you can do the following:

```tsx
import {
  StreamCall,
  useCalls,
  CallingState,
  RingingCallContent,
} from "@stream-io/video-react-native-sdk";

export const MyComponent = () => {
  // collect all ringing kind of calls managed by the SDK
  const calls = useCalls().filter((c) => c.ringing);

  // for simplicity, we only take the first one but
  // there could be multiple calls ringing at the same time
  const ringingCall = calls[0];
  if (!ringingCall) return null;

  return (
    <StreamCall call={ringingCall}>
      <RingingCallContent />
    </StreamCall>
  );
};
```

## Props

### `landscape`

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

| Type                     |
| ------------------------ |
| `boolean` \| `undefined` |

### `IncomingCall`

Prop to customize the `IncomingCall` component. This component is rendered when an incoming call is received.

| Type                          | Default Value                                                                                                                                              |
| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ComponentType`\| `undefined` | [`IncomingCall`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Call/RingingCallContent/IncomingCall.tsx) |

### `OutgoingCall`

Prop to customize the `OutgoingCall` component. This component is rendered when someone is called.

| Type                          | Default Value                                                                                                                                              |
| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ComponentType`\| `undefined` | [`OutgoingCall`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Call/RingingCallContent/OutgoingCall.tsx) |

### `CallContent`

Prop to customize the accepted CallContent component in the RingingCallContent. This is shown after the call is accepted. By default it renders the [`CallContent`](https://getstream.io/video/docs/react-native/ui-components/call/call-content/) component.

| Type                          | Default Value                                                                                                                                     |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ComponentType`\| `undefined` | [`CallContent`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Call/CallContent/CallContent.tsx) |

### `CallPreparingIndicator`

Prop to customize the component shown while the call is being prepared/joined (idle state, after the call is accepted and is waiting to be joined).

| Type                          | Default Value                                                                                                                                                                  |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `ComponentType`\| `undefined` | [`CallPreparingIndicator`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Call/RingingCallContent/CallPreparingIndicator.tsx) |

### `CallLeftIndicator`

Prop to override the component shown when the call is left.

| Type                          | Default Value                                                                                                                                                        |
| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ComponentType`\| `undefined` | [`CallLeftIndicator`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Call/RingingCallContent/CallLeftIndicator.tsx) |

### `onBackPress`

Callback to handle the back icon press event in the `CallLeftIndicator` and `CallPreparingIndicator` components.

| Type                        |
| --------------------------- |
| `() => void` \| `undefined` |


---

This page was last updated at 2026-08-10T16:01:06.688Z.

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