CallTopView

The CallTopView represents the header component that gives the user more information when in a call, while adding a few actions they can trigger while the call is active. The header is useful for showing the call name or title, as well as the state, such as if the user is fully connected to the call or not. It has a back button by default and a participant info badge.

General Usage

To use the component, you can simple use it as:

import {
  Call,
  CallTopView,
  StreamCall,
} from '@stream-io/video-react-native-sdk';

const VideoCallUI = () => {
  let call: Call;

  return (
    <StreamCall call={call}>
      <CallTopView />
    </StreamCall>
  );
};

Props

`onBackPressed`

Handler to be called when the back button is pressed in the CallTopView.

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

`onParticipantInfoPress`

Handler to be called when the Participant icon is pressed in the CallTopView.

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

`title`

Title to be rendered at the center of the Header.

Type
`string` \| `undefined`

`style`

Style to override the container of the CallTopView.

Type
ViewStyle

`ParticipantsInfoBadge`

Component to customize the ParticipantInfoBadge of the CallTopView.

Type	Default Value
`ComponentType`\| `undefined`	`ParticipantsInfoBadge`

Customization

You can create your own custom CallTopView using the Call Top View UI Cookbook guide.

CallParticipantsList

IncomingCall