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.