Skip to content

BarVisualizer not rendering in React Native after upgrading to newer versions #280

@axodevjs

Description

@axodevjs

Bug Description

The BarVisualizer component from @livekit/react-native stops
rendering/displaying when upgrading to newer versions of LiveKit packages.
This appears to be a regression introduced in recent versions.

Environment

Current (working) versions:

  • React Native: 0.76.9
  • @livekit/react-native: 2.7.4
  • @livekit/components-react: 2.9.9
  • @livekit/react-native-webrtc: 125.0.9
  • livekit-client: 2.13.8
  • Platform: iOS (tested on iOS simulator)
  • Expo SDK: ~52.0.47

Newer (broken) versions that we tested:

  • @livekit/react-native: 2.9.0
  • @livekit/components-react: 2.8.1
  • @livekit/react-native-webrtc: 137.0.0
  • livekit-client: 2.11.2

Expected Behavior

The BarVisualizer should display audio visualization bars when the
microphone is active and audio input is detected, as it does in current
stable versions.

Actual Behavior

When upgrading to newer versions (specifically @livekit/react-native
2.9.0, @livekit/react-native-webrtc 137.0.0, and livekit-client
2.11.2), the BarVisualizer component renders but shows no visual bars or
animation, appearing as an empty space. Additionally, TypeScript errors
appear for unknown properties like barCount in BarVisualizerOptions
and missing barColor property.

Code Sample

import { BarVisualizer } from "@livekit/react-native";
import { useVoiceAssistant, useLocalParticipant } from
"@livekit/components-react";

const Controls = () => {
  const { state } = useVoiceAssistant();
  const { microphoneTrack, localParticipant } = useLocalParticipant();

  const micTrackRef = useMemo(() => {
    return {
      participant: localParticipant,
      source: Track.Source.Microphone,
      publication: microphoneTrack,
    };
  }, [localParticipant, microphoneTrack]);

  return (
    <BarVisualizer
      style={{ width: 45, height: 25 }}
      state={state}
      trackRef={micTrackRef}
      options={{
        barWidth: 5,
      }}
    />
  );
};

Additional Context

- This works perfectly in current stable versions (2.7.4 + WebRTC 125.0.9)
- The microphone is working and audio is being captured in both versions
- When upgrading to newer versions (2.9.0 + WebRTC 137.0.0), visual
rendering stops working
- TypeScript compilation errors appear for BarVisualizerOptions properties
- API changes seem to have broken backward compatibility without proper
migration path
- Had to rollback to older versions to restore functionality

Regression Timeline

The issue appears when upgrading from:
- @livekit/react-native 2.7.4  2.9.0
- @livekit/react-native-webrtc 125.0.9  137.0.0
- livekit-client 2.13.8  2.11.2

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions