Participant Label

Stream’s UI components provide a participant label, which displays participant’s basic information, such as name, and the status of the microphone by default like the image below:

It is expected that the default component may not meet all the requirements of your design/app. Therefore, we will look into ways, how to customize/create a participant label in this tutorial.

Custom Participant Label

You can customize the participant label by implementing your own label component and passing it to the CallContent component.

import { Text, StyleSheet } from 'react-native';
import {
  StreamVideoParticipant,
  ParticipantLabelProps,
} from '@stream-io/video-react-native-sdk';

// A custom ParticipantLabel component that shows participant's name and if its a dominant speaker
const CustomParticipantLabel = ({ participant }: ParticipantLabelProps) => {
  const participantLabel = participant?.name ?? participant?.id;

  return <Text style={styles.label}>{participantLabel}</Text>;
};

const styles = StyleSheet.create({
  label: {
    backgroundColor: 'gray',
    padding: 10,
    borderRadius: 10,
    color: 'white',
  },
});

Final Steps

Now this can be passed to the ParticipantLabel prop of the CallContent component, as follows:

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

const VideoCallUI = () => {
  let call: Call;
  // your logic to create a new call or get an existing call

  return (
    <StreamCall call={call}>
      <CallContent ParticipantLabel={CustomParticipantLabel} />
    </StreamCall>
  );
};

To get the participant data, you can use the following hooks from the useCallStateHooks:

useParticipants hook that provides all the necessary details of all the participants.
useRemoteParticipants hook that provides all the details of the participants other than the local participant.
useConnectedUser or useLocalParticipant provides the details of the local or connected participant.

Call Controls

Call Top View