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

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
        
      />

CodePudding user response：

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>
  );
}