Audio Connecting Indicator

Detect when a participant's audio track is published but not yet producing data, and show a loading indicator until the connection is ready.

Best Practices

Use a subtle loading indicator rather than an intrusive banner.
Dismiss the notification automatically once the track starts producing audio.

Default behavior

The SDK's default ParticipantLabel already renders a small ActivityIndicator next to the participant's name while the audio track is connecting. No setup is required to get this behavior.

Detecting the connecting state

The SDK ships a useIsAudioConnecting hook. It returns true when the participant has an audio track that has not yet fired its unmute event, and false otherwise (no audio track, or the track is already producing data).

import { useIsAudioConnecting } from "@stream-io/video-react-native-sdk";

Internally the hook subscribes to mute and unmute events on the participant's MediaStreamTrack, so your UI updates automatically as the connection progresses.

Custom connecting indicator

The hook returns a plain boolean, so you can drive any UI you like with it: a different icon, a tooltip, an inline badge, a toast, an animated overlay, and so on.

The example below is just one possibility. It wraps the default ParticipantLabel in a small component and renders a "Connecting to audio..." badge underneath while useIsAudioConnecting is true. Treat it as a starting point and adapt the UI to your own design system.

Preview of the custom audio connecting badge

import React from "react";
import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
import {
  useIsAudioConnecting,
  ParticipantLabel,
  type ParticipantLabelProps,
  useTheme,
} from "@stream-io/video-react-native-sdk";

export const AudioConnectingParticipantLabel = (
  props: ParticipantLabelProps,
) => {
  const { participant, trackType } = props;
  const { theme } = useTheme();
  const isAudioConnecting =
    useIsAudioConnecting(participant) && trackType !== "screenShareTrack";

  return (
    <View>
      <ParticipantLabel {...props} />
      {isAudioConnecting && (
        <View
          style={[styles.badge, { backgroundColor: theme.colors.sheetOverlay }]}
        >
          <ActivityIndicator size="small" color={theme.colors.iconPrimary} />
          <Text style={[styles.text, { color: theme.colors.textPrimary }]}>
            Connecting to audio...
          </Text>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  badge: {
    flexDirection: "row",
    alignItems: "center",
    alignSelf: "flex-start",
    paddingHorizontal: 8,
    paddingVertical: 4,
    marginTop: 4,
    borderRadius: 6,
  },
  text: { marginLeft: 6, fontSize: 12, fontWeight: "500" },
});

The trackType !== 'screenShareTrack' check skips the extra badge on screen share tiles, where the audio connecting state is not relevant.

Final Steps

Pass the custom component to the ParticipantLabel prop of CallContent:

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

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

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

Audio Volume Indicator

Call Controls

On this page:

Best Practices
Default behavior
Detecting the connecting state
- Custom connecting indicator