Waveform not loaded with a FlatList after scrolling

[dprevost-LMI]

We are using the waveform in static mode, which is excellent. The only use case I'm having trouble working around is when scrolling in my <FlatList> of `react-native-gesture-handler', the waveform does not want to get displayed.

After tracking down the code, basically on the first rendering, the waveform outside the screen has an undefinedviewLayout when calling the first useEffect that triggers the getAudioWaveFormForPath. That part seems optimized to render so we only render what is displayed on the screen.

However, when scrolling, the viewLayout does not change, the useEffect is not triggered, and as a consequence, getAudioWaveFormForPath is not fetching the file. All this explains why the waveform is not rendered.

The optimization is here with the use of viewRef.current?.measur. Instead if

Quickly, if I bypass the optimization and use only the below without the measure, I load all files but can render the waveform. And since I use paging, my next page is rendered only when I fetch it after reaching the end of the page.

            onLayout={(event: LayoutChangeEvent) => { 
              const { height, width, x, y } = event.nativeEvent.layout;
              setViewLayout({ height, width, x, y });
            }}

I would like to keep the optimization, but I'm unsure how to trigger the onLayout of the view when the waveform is seen at the screen displayed on the screen. Any hint is welcome not to have to resort to the above only!

waveform example

          <Waveform
            mode="static"
            containerStyle={styles.waveFormContainer}
            ref={ref}
            key={mediaUniqueId}
            path={mediaPath}
            candleSpace={CANDLE_SPACE}
            candleWidth={CANDLE_WIDTH}
            candleHeightScale={CANDLE_HEIGHT_SCALE}
            scrubColor={styles.scrub.color}
            waveColor={styles.wave.color}
            onPlayerStateChange={handleOnPlayerStateChange}
            onCurrentProgressChange={handleOnCurrentProgressChange}
            onChangeWaveformLoadState={(state) => {
              setIsMediaLoading(state);
            }}
            onPanStateChange={() => {}}
            onError={onError}
          />

See below, the first render (first screenshot), which is good and then when scrolling up, waveforms are not displayed (Second screenshot)

[dprevost-LMI]

FYI: After replacing the viewRef.current?.measure for the nativeEvent param object and testing the below, we found other important bugs. The waveform component is piling up Audio tracks in Android, and since there is a limit of 32, after a while, nothing was working, and we had to restart our apps.

I developed a fix and protection on the Android side to raise a proper error when reaching 30 audio tracks simultaneously. Below is a quick patch I developed, in which I often stopped the player to remove an audio track. Moreover, I stopped doing the prepare on stop since it was retaking an audio track. It is maybe not efficient that way when playing bigger audio file but in my case it was way better which are small multiple audio files

Hope it help people and can get this lib better:

@simform_solutions+react-native-audio-waveform+2.0.0.patch

[HaiderTWJ]

Are you hearing noise in audio once voice is recorded and then you play it. In my case it is not working on ios but on android I'm hearing noise or crackling voice. Can you share your recording code and how are you playing the recorded voice in both platforms.

[hamzadar2013]

@dprevost-LMI have you resolved the issue like the waveform disappears after scroll ??

[dprevost-LMI]

@HaiderTWJ We did not play with recording for this. Just playing audio

[dprevost-LMI]

@hamzadar2013 I did not encounter that. Also, we have not moved forward with the lib to play audio. Instead, we reuse the rn-sound Librairie we had already leveraged in the past, which had everything needed to replicate the lib in a more stable way when used massively.

[hamzadar2013]

@dprevost-LMI i wanna make audio waveform and play audio like we have n whatsapp to play audio

[dprevost-LMI]

It's a weird coincidence; we had the exact same needs, lol.

[hamzadar2013]

@dprevost-LMI can you please tell me how u achieve this functionality it will helpful for me thanks

[dprevost-LMI]

We use react-native-sound, and for the waveform, we use something in-house done in the past. Unfortunately, it is all proprietary code, so I cannot share more

[dprevost-LMI]

@mukesh-simform Besides the layout, the number of waveforms reached the Android limit. If we have more than 32 waveforms, Android native gets an error. Was that fixed, too, in some other PR, maybe?

Note: This happened to me with a scroll view

[mukesh-simform]

@dprevost-LMI Please check the same with the new version v2.1.0 and feel free to reopen in case this issue persists at your end. Thanks

[dprevost-LMI]

Great. I did not take the time to retry in our App, but I pulled the example, did some tests, and found that most of the problems stated in my ticket are fixed. 🎉

However, I found some slowness with the waveform extraction; see https://github.com/SimformSolutionsPvtLtd/react-native-audio-waveform/issues/84; thanks!