1

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
        
      />
nmnhon
  • 43
  • 3

1 Answers1

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>
  );
}
udoyhasan
  • 1,527
  • 5
  • 19
  • If we use this way, it will rerender every time we click on the video.. – nmnhon Sep 26 '22 at 04:08
  • @nmnhon that's why you can see that I've used `usecallback`. So it will not re-render. Just the value of `showControls` will be changed – udoyhasan Sep 26 '22 at 04:19
  • Right but when I click on the video, it flickers a bit and it looks like a rerender – nmnhon Sep 26 '22 at 04:23
  • @nmnhon Maybe you are using `TouchableOpacity` from my code above. It is the effect of `TouchableOpacity` and it is not re-rendering. You can disable it by setting the attribute `activeOpacity`. You can use `activeOpacity={1}`. To make it easier I've updated the above code. Please check it. – udoyhasan Sep 26 '22 at 04:48
  • ok it work perfectly now, tysm. – nmnhon Sep 26 '22 at 06:21