Issue with HLS Streaming Quality in React Native Video

[adherb]

I am using React Native Video to stream HLS content, aiming for a setup similar to TikTok. I am facing an issue where, upon navigating away from the video player and returning, the videos remain stuck on the lowest quality and do not upgrade to higher resolutions.

Is there a way to force the player to upgrade to higher qualities?
Can I persist the highest quality a user can utilise and automatically select that for each video?

Here is my current video player configuration:

useEffect(() => {
    if (videoRef.current) {
      setIsPaused(!shouldPlay);
      if (shouldPlay) {
        progress.value = withTiming(0, { duration: 0 });
      }
    }
  }, [shouldPlay]);

 const handleLoadStart = () => {
    setLoading(true);
    setBuffering(true);
    progress.value = withTiming(0, { duration: 0 });
  };

  const handleLoad = () => {
    setLoading(false);
    setBuffering(false);
  };

  const handleEnd = () => {
    progress.value = withTiming(0, { duration: 0 });
  };

       <Video
          key={item.id}
          ref={videoRef}
          source={{ uri: item.video_url }}
          style={{ width: "100%", height: "100%", zIndex: 4 }}
          muted={false}
          volume={1.0}
          resizeMode={"cover"}
          paused={isPaused}
          repeat
          onLoadStart={handleLoadStart}
          onLoad={handleLoad}
          onProgress={handleProgress}
          onEnd={handleEnd}
          ignoreSilentSwitch={"ignore"}
          playInBackground={false}
          disableFocus={true}
          bufferConfig={{
            minBufferMs: 0,
            maxBufferMs: 0, 
            bufferForPlaybackMs: 0,
            bufferForPlaybackAfterRebufferMs: 0,
          }}
          posterResizeMode={"cover"}
          poster={item.thumbnail_url}
          onReadyForDisplay={() => {}}
        />

[freeboub]

In shouldn't be the case ...

I think this line can cause the issue: maxBufferMs: 0,