How to control multiple video with expo-av

[lewis221]

Issue Description

I'm trying to stop playing all the video when it goes to other screen.

I define videoRef to control the video.

videoRef.current.pauseAsync();

But this only works when there is only 1 video. How does it work when there are multiple video. How to make it work. Plz help!

Steps to Reproduce / Code Snippets

const videoRef = React.useRef();

const renderMessageVideo = (props) => (
   <View>
     <Video
       ref={videoRef}
       style={styles.video}
       source={{
         uri: props.currentMessage.video,
       }}
       useNativeControls={true}
       isMuted={false}
       shouldPlay={play}
       volume={1.0}
       resizeMode="cover"
       isLooping={false}
       onPlaybackStatusUpdate={onPlaybackStatusUpdate}
     />
   </View>
);

useEffect(() => {
   // Do something when mount

   const unsubscribe = navigation.addListener("transitionStart", (e) => {
     // Do something when unmount
     videoRef.current.pauseAsync();
   });

   return unsubscribe;
 }, [navigation]);

Update

I've changed the way to store the ref. (counter = 0, and will plus one every time)

ref={(r) => (videoRef.current[counter] = r)}

By using this, I can log the data of videoRef.current[0] if there is only 1 video.

 console.log(videoRef.current[0]);
// This will print the data of the first video

But if there is a second video, the second video will store in videoRef.current[1], and videoRef.current[0] will replace by null.

console.log(videoRef.current[0])
// null

console.log(videoRef.current[1])
// This will print the data of the second video

[fukemy]

use list to save video ref list, when other played => stop current

[chunghn]

use list to save video ref list, when other played => stop current

Hello, I have the same issue too. Would you mind to elaborate more? Thank you.