Show/Hide Expo Video Controller on press (Android Platform)

Question

I'm using expo-av to create a video player. Everything works fine on iOS but in Android platform, I can't tap on the screen to manually show/hide the video controller. Any solution for this? Thank you guys. Here is the code:

      <Video
        source={{
          uri: 'https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
        }}
        resizeMode={ResizeMode.COVER}
        style={styles.videoPlayer}
        useNativeControls
        
      />

Answer 1

You can simply set useNativeControls to false to hide the video controls and you can also change it back to true to show the video controls again.

Code for example:

import { TouchableOpacity, useState, useCallback } from "react-native";
import { Video } from "expo-av";

export default function VideoComponent() {
  const [showControls, setShowControls] = useState(false);

  const toggleControls = useCallback(() => {
    setShowControls((showControls) => !showControls);
  }, []);

  return (
    <TouchableOpacity activeOpacity={1} onPress={() => toggleControls()}>
      <Video
        source={{
          uri: "https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4",
        }}
        resizeMode={ResizeMode.COVER}
        style={styles.videoPlayer}
        useNativeControls={showControls}
      />
    </TouchableOpacity>
  );
}