Custom Controls Not Working in Fullscreen Mode for React Native Video Player

Question

Description:

We're using React Native and a video player component. The player has custom controls implemented, but we're encountering an issue with the controls not functioning as expected in fullscreen mode.

Background:

We have a video player component with custom controls implemented using React Native. The controls work fine in normal mode, but when switching to fullscreen mode, native controls seem to override the custom ones. We're using Expo's Video component for video playback.

Steps to reproduce:

Its a large app and I can not provide real code, but here is a example on how you can reproduce

import React, { useRef, useState } from 'react';
import { View, Button, StyleSheet, Dimensions } from 'react-native';
import { Video } from 'expo-av';

const VideoPlayer = () => {
  const videoRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);

  const togglePlayPause = () => {
    if (isPlaying) {
      videoRef.current.pauseAsync();
    } else {
      videoRef.current.playAsync();
    }
    setIsPlaying(!isPlaying);
  };

  const enterFullScreen = async () => {
    await videoRef.current.presentFullscreenPlayer();
  };

  return (
    <View style={styles.container}>
      <Video
        ref={videoRef}
        source={{ uri: 'https://www.example.com/sample.mp4' }}
        style={styles.video}
        useNativeControls={false}
        resizeMode="contain"
      />
      <View style={styles.controls}>
        <Button title={isPlaying ? 'Pause' : 'Play'} onPress={togglePlayPause} />
        <Button title="Fullscreen" onPress={enterFullScreen} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  video: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').width * 0.5625, // Aspect ratio 16:9
  },
  controls: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: 10,
  },
});

export default VideoPlayer;

I saw on Expo documentation:

presentFullscreenPlayer()

This presents a fullscreen view of your video component on top of your app's UI. Note that even if useNativeControls is set to false, native controls will be visible in fullscreen mode.

But I wonder if anyone has managed to resolve/work around this?