# 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`](/video/docs/react-native/ui-components/call/call-content/#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).

```tsx
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](@video/react-native/_assets/ui-cookbook/audio-connecting-indicator/audio-connecting-badge.png)

```tsx
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`](/video/docs/react-native/ui-components/call/call-content/#participantlabel/) prop of [`CallContent`](/video/docs/react-native/ui-components/call/call-content/):

```tsx
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>
  );
};
```


---

This page was last updated at 2026-04-29T09:08:36.176Z.

For the most recent version of this documentation, visit [https://getstream.io/video/docs/react-native/ui-cookbook/audio-connecting-indicator/](https://getstream.io/video/docs/react-native/ui-cookbook/audio-connecting-indicator/).