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.

Usage

To use the RingingCallContent you can do the following:

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.

IncomingCall

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

OutgoingCall

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

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 component.

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).

CallLeftIndicator

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

onBackPress

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