React native expo-av Video freezes after sometime - android 13

Question

I'm rendering a Video using expo-av's Video component, on tapping the message, the video component shows up and runs the video in a loop (isLooping={true}), but after like 40-45s the video starts to freeze (as shown in demo video), and a thing to note, this is only happening in Android 13, for other android versions and iOS, it is running just fine. Below is the code:

const VideoReview = ({autoplay}) => {
  const videoRef = useRef<Video>(null);
  const unmounting = useRef(false);
  const [playVideo, setPlayVideo] = useState(autoplay);
  const [game, setGame] = useState(false);

  useEffect(() => {
    return () => {
      unmounting.current = true;
    };
  }, []);

  if(!videoSource) {
    return (
      <Portal>
        <CloseButton onClose={cancelReview} />
      </Portal>
    )
  }

  return (
  <SafeView>
    <View>
      <Video
        ref={videoRef}
        source={{ uri: videoSource }}
        shouldPlay={true}
        isLooping
        useNativeControls={false}
        style={{
          aspectRatio: 1/2,
          width: '100%',
          overflow: 'hidden',
        }}
        resizeMode={ResizeMode.COVER}
      />
    </View>
    {game && <GameModal onDismiss={() => setGame(false) />}
    {showVideoControls && <Portal>
      <View style={{...}}><PlaybackControls isPlaying={playVideo} setVideoPlaying={setPlayVideo} videoRef={videoRef} /></View>
    </Portal>}
    <MenuButtons {...props} />
    <ReceiverSelectionDialog {...props} />
  </SafeView>
)}

// the main component which renders the above:
const VideoMessage = () => {
  return (
    <TouchableOpacity>
     <Portal> // from react-native-paper
       <VideoReview autoplay={true} {...otherprops} />
     </Portal> 
    </TouchableOpacity>
  )
}

package versions:-

"react": "18.0.0",
"expo": "^46.0.0",
"expo-av": "~12.0.4",
"react-native": "0.69.6",

Link to video, please take a look to understand better: https://drive.google.com/file/d/1M9lGqucsqpWeePcm5pFedNPO5yLsYpac/view?usp=sharing

As you can see in the video, after 40/45s, the video starts to freeze/hang, and in the perf monitor you can see that before freeze the fps of UI & JS thread were 60, 60 respectively, but after the feeze, they are 0.4, 0.4fps resp. And this is happening only in android 13 as I mentioned above.

What i've tried so far:-

Wrapping the component itself with React.memo, didn't work.
using react-native-video, react-native-mvlc-media-player as alternatives to expo-av, didn't work.
tried using @gorhom/portal instead of react-native-paper's portal, didn't work.

Any help would be really appreciated!

React native expo-av Video freezes after sometime - android 13

0 Answers0