Expo react native app embeded youtube video fullscreen forcing rerender

Question

I am developing an application in React Native using Expo, and I am facing an issue when playing embedded YouTube videos. When a video goes fullscreen, the component that renders it is re-rendered, causing the state to reset and other UX problems. This issue occurs specifically on Android devices. The problem seems to be related to the change in orientation when entering fullscreen mode which causes whole screen components to rerender. I have tried several solutions without success and would like help on how to prevent the component from re-rendering.

Environment Details React Native: 0.74.5 Expo: ~51.0.35 YouTube Package: react-native-youtube-iframe (^2.3.0)

import { View } from 'react-native';
import YoutubePlayer from 'react-native-youtube-iframe';

interface YoutubePlayerProps {
  mediaUrl: string;
}

const YoutubePlayerComponent: React.FC<YoutubePlayerProps> = ({ mediaUrl }) => {

  const getVideoId = (url: string): string => {
    const videoIdMatch = url.match(/(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
    return videoIdMatch ? videoIdMatch[1] : '';
  };

  return (
    <View>
      <YoutubePlayer
        height={350}
        videoId={getVideoId(mediaUrl)}
        onError={(e) => console.error('Error loading video', e)}
      />
    </View>
  );
};

export default YoutubePlayerComponent;

To address the issue, I tried using a WebView for the YouTube video. However, I still encountered the same problem where entering fullscreen mode causes the component to re-render, resulting in a loss of state and other UX issues.