full screen mode

[sssajjad007]

Is there any way to overlay a React Native view on top of the fullscreen YouTube player?
It seems that when the player enters fullscreen, it opens a native fullscreen WebView that goes above everything, so React Native components cannot overlay it.
any help would be appreciated,

[saseungmin]

Unfortunately, overlaying React Native components on top of a fullscreen WebView is not technically possible due to platform limitations. When a WebView enters native fullscreen mode, it operates at the OS level above the React Native view hierarchy, making it impossible for React Native components to render on top.

Why This Doesn't Work

// ❌ This approach doesn't work
<View style={styles.container}>
  <WebView allowsFullscreenVideo={true} />
  <View style={styles.overlay}>
    <Text>This won't show in fullscreen</Text>
  </View>
</View>

The fundamental issues:

• Native fullscreen WebView renders in a separate layer
• React Native components cannot access this native fullscreen context
• Touch events are completely handled by the native player
• Z-index/positioning has no effect on native fullscreen content

✅ Practical Solution: Custom Fullscreen Modal

After testing various approaches, I found that disabling native fullscreen and implementing a custom Modal-based solution works well for most use cases, though it's not a perfect replacement for native fullscreen.

Here's what I implemented and tested:

• useYouTubeFullscreen

function useYouTubeFullscreen(player: YoutubePlayer) {
  const [isFullscreen, setIsFullscreen] = useState(false);

  const PlayerComponent = useMemo(
    () => (
      <YoutubeView
        useInlineHtml
        player={player}
        height={Platform.OS === 'web' ? 'auto' : undefined}
        webViewProps={{
          allowsFullscreenVideo: false,
          renderToHardwareTextureAndroid: true,
        }}
        style={{
          maxHeight: 400,
        }}
        iframeStyle={{
          aspectRatio: 16 / 9,
        }}
      />
    ),
    [player],
  );

  const FullscreenWrapper = useCallback(
    ({
      children,
      overlay,
    }: {
      children: React.ReactNode;
      overlay?: React.ReactNode;
    }) => {
      if (!isFullscreen) {
        return <>{children}</>;
      }

      return (
        <Modal
          visible={true}
          animationType="slide"
          backdropColor="rgba(0, 0, 0, 0.5)"
          statusBarTranslucent
          onRequestClose={() => setIsFullscreen(false)}
        >
          <View
            style={{
              justifyContent: 'center',
              alignItems: 'center',
              flex: 1,
              position: 'relative',
              backgroundColor: 'black',
            }}
          >
            {children}
            {overlay}
          </View>
        </Modal>
      );
    },
    [isFullscreen],
  );

  return {
    isFullscreen,
    setIsFullscreen,
    PlayerComponent,
    FullscreenWrapper,
  };
}

• App

function App() {
  const { isFullscreen, setIsFullscreen, PlayerComponent, FullscreenWrapper } = useYouTubeFullscreen(player);

  return (
    <FullscreenWrapper
      overlay={
        <>
          <View style={{ position: 'absolute', left: 20, zIndex: 1 }}>
            <TouchableOpacity
              style={[styles.fullscreenButton]}
              onPress={() => player.seekTo(currentTime > 10 ? currentTime - 10 : 0)}
            >
              <Text style={styles.buttonText}>⏪</Text>
            </TouchableOpacity>

            <TouchableOpacity style={[styles.fullscreenButton]} onPress={onPlay}>
              <Text style={styles.buttonText}>{isPlaying ? '⏸️' : '▶️'}</Text>
            </TouchableOpacity>

            <TouchableOpacity style={[styles.fullscreenButton]} onPress={() => player.stop()}>
              <Text style={styles.buttonText}>⏹️</Text>
            </TouchableOpacity>

            <TouchableOpacity
              style={[styles.fullscreenButton]}
              onPress={() => player.seekTo(currentTime + 10, true)}
            >
              <Text style={styles.buttonText}>⏭️</Text>
            </TouchableOpacity>
          </View>
          <TouchableOpacity
            style={{
              position: 'absolute',
              top: '38%',
              right: 20,
              zIndex: 1,
              backgroundColor: 'white',
              borderRadius: 10,
              padding: 10,
            }}
            onPress={() => setIsFullscreen(false)}
          >
            <Text>✕</Text>
          </TouchableOpacity>
        </>
      }
    >
      <View style={{ position: 'relative' }}>
        {!isFullscreen && (
          <View style={{ backgroundColor: 'white', position: 'absolute', top: 20, right: 20, zIndex: 1 }}>
            <Button title="Fullscreen" onPress={() => setIsFullscreen(true)} />
          </View>
        )}
        {PlayerComponent}
      </View>
    </FullscreenWrapper>
  );
}

Limitations to be aware of:
⚠️ Not true native fullscreen - It's a Modal that looks like fullscreen, so there might be subtle differences in behavior.
⚠️ Brief transition delay - When switching modes, there's a short moment while the WebView re-renders.
⚠️ Additional memory usage - Running a Modal with WebView uses more resources than native fullscreen.

screenshot

---

Making It Feel Native

const enterFullscreen = useCallback(() => {
  setIsFullscreen(true);
  
  // Make it feel like native fullscreen
  StatusBar.setHidden(true, 'slide');
  Orientation.lockToLandscape();
}, []);

WebView Recreation

The main challenge with this approach is that when switching between normal view and fullscreen modal, the WebView gets recreated, which causes:

• Video restarts from the beginning
• Playback state is lost (play/pause)
• Volume settings reset

Solution: State Restoration

To solve this, you need to track the player state and restore it when the new WebView is ready:

function MyVideoPlayer() {
  const [isCustomFullscreen, setIsCustomFullscreen] = useState(false);
  const player = useYouTubePlayer('dQw4w9WgXcQ');
  
  // Store the last known state before WebView recreation
  const lastKnownState = useRef<{ currentTime: number; isPlaying: boolean; volume: number } | null>(null);

  // Track current state continuously
  useEffect(() => {
    if (currentTime > 0) {
      lastKnownState.current = {
        currentTime,
        isPlaying,
        volume,
      };
    }
  }, [currentTime, isPlaying, volume]);

  // Restore state when new WebView is ready
  useYouTubeEvent(player, 'ready', (playerInfo) => {
    if (lastKnownState.current && lastKnownState.current.currentTime > 0) {
      setTimeout(() => {
        // Restore previous position and state
        player.seekTo(lastKnownState.current.currentTime);
        
        if (lastKnownState.current.isPlaying) {
          player.play();
        } else {
          player.pause();
        }
        
        player.setVolume(lastKnownState.current.volume);
      }, 500); // Wait for WebView to be fully ready
    }
  });

  // ... rest of component
}

@sssajjad007 This is what I've tested so far. If you have any additional suggestions or questions about implementing custom fullscreen overlays, please feel free to leave a comment.
Finally, thank you for your interest in using this library!

[sssajjad007]

Thank you very much for your time.
It solved my problem ✌️