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