Wave color not being updated to scrub color

[Kuper007]

Hi,

I've installed and successfully used the Waveform component in my expo app.
However, upon pressing the play button and calling waveRef.current.startPlayer() - the wave color never changes to scrub color.
Could it be because the expo is not using some native animation you are using in your component?

Anyways, I am looking forward to your answer.

P.S.: will be happy to provide some code snippets if needed

[Kuper007]

Also noticed just now that onCurrentProgressChange always returns progress=0 though onPlayerStateChange returns correct values

[kuldip-simform]

@Kuper007 Thank you for using this library. We will debug this but it would be more helpful for us if you provided a code snippet.

[Kuper007]

@kuldip-simform Sure, here you go:

import { Pressable, View } from 'react-native';

import ScreenContainer from '@/components/ScreenContainer';
import { H2, P } from '@/components/ui/typography';
import {
  BottomSheetBackdrop,
  BottomSheetModal,
  BottomSheetScrollView,
  useBottomSheetModal,
} from '@gorhom/bottom-sheet';
import { Audio } from 'expo-av';
import { PlayerState, Waveform, type IWaveformRef } from '@simform_solutions/react-native-audio-waveform';
import PlayIcon from '@/lib/icons/PlayIcon';
import PauseIcon from '@/lib/icons/PauseIcon';

type Ref = BottomSheetModal;

type TranscriptProps = {
  transcript: string;
  audioRecording: Audio.Sound;
  recordingUri: string;
};

const TranscriptSheet = forwardRef<Ref, TranscriptProps>((_props, ref) => {
  const waveRef = useRef<IWaveformRef>(null);
  const snapPoints = useMemo(() => ['90%', '90%'], []);
  const { audioRecording, transcript, recordingUri } = _props;
  const [isPlaying, setIsPlaying] = useState(false);
  const [positionMs, setPositionMs] = useState(0);
  const { dismiss } = useBottomSheetModal();

  const handleSheetChanges = useCallback((_index: number) => {
    // console.log('handleSheetChanges', index);
  }, []);

  // renders
  const renderBackdrop = useCallback(
    (props: any) => <BottomSheetBackdrop {...props} disappearsOnIndex={-1} appearsOnIndex={0} onPress={dismiss} />,
    [dismiss],
  );

  const onPlayAudio = async () => {
    Audio.setAudioModeAsync({ playsInSilentModeIOS: true });
    audioRecording.setOnPlaybackStatusUpdate(async (status) => {
      if (status.isLoaded) {
        setIsPlaying(status.isPlaying);
        if (status.didJustFinish) {
          setPositionMs(0);
          await audioRecording.stopAsync();
          await waveRef.current?.stopPlayer();
        } else {
          setPositionMs(status.positionMillis);
        }
      }
    });
    await audioRecording.playFromPositionAsync(positionMs);
    if (waveRef.current?.currentState !== PlayerState.paused) {
      await waveRef.current?.startPlayer();
    } else {
      await waveRef.current.resumePlayer();
    }
  };

  const onPauseAudio = async () => {
    await waveRef.current?.pausePlayer();
    await audioRecording.pauseAsync();
  };

  return (
    <BottomSheetModal
      ref={ref}
      index={1}
      backgroundStyle={{ backgroundColor: '#EEEFF3' }}
      snapPoints={snapPoints}
      backdropComponent={renderBackdrop}
      onChange={handleSheetChanges}
      enableDynamicSizing={false}
    >
      <BottomSheetScrollView>
        <ScreenContainer className="bg-transparent mt-8">
          <H2 className="font-IBMPlexSerifSemiBold text-[16px]">Full transcript</H2>

          <View className="flex flex-row items-center gap-8 mt-10">
            <Waveform
              mode="static"
              volume={0}
              containerStyle={{ flex: 1 }}
              ref={waveRef}
              key={recordingUri}
              path={recordingUri}
              candleSpace={2}
              candleWidth={2}
              candleHeightScale={5}
              waveColor="#9cb5b8"
              scrubColor="#6e8097"
            />
            {!isPlaying && (
              <Pressable onPress={onPlayAudio}>
                <PlayIcon />
              </Pressable>
            )}
            {isPlaying && (
              <Pressable onPress={onPauseAudio}>
                <PauseIcon />
              </Pressable>
            )}
          </View>

          <P className="color-olive-100 mt-8">"{transcript}"</P>
        </ScreenContainer>
      </BottomSheetScrollView>
    </BottomSheetModal>
  );
});

TranscriptSheet.displayName = 'TranscriptSheet';

export default TranscriptSheet;

As you can see, I'm using expo-av to play the sound, and your package just to show the wave component.

Here are my dependencies:

"expo": "^51.0.37",
"react-native": "0.74.5",

[Kuper007]

Managed to fix the issue by rebuilding the project, will be closing the issue, thanks