reactjsreact-nativeexpoexpo-av

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


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

Solution

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