How to play a video with react native video and pause other in flatlist

Question

I am making a video app like tiktok / instagram reel and i have a flatlist as below

All my videos play automatically and i have it set so that its paused on render (at the moment), I am tying to play a video when it is visible on the screen and pause the other vodeos, but it doesn't work i can't seem to see anything online on how i can pause the other videos or possibly just render one video until i scroll but all videos are set to true no matter what i do.

how can i get the video that is visible to play and then pause when user scrolls and then play the other visible video?

I have been at this for 2 days and my head is Fried, any help would be appreciated :(

PostScreen.js

const [state, setState] = useState({
    isVisible: false,
})

const videoData [
 {
   id: 1,
   video: videourl
 },
 {
   id: 2,
   video: videourl
 },
];

const _onViewableItemsChanged = useCallback(({ viewableItems }) => {
    if(viewableItems[0]){
       if(viewableItems[0].isViewable){
         setState({...state, isVisible: true})
       }
    }

}, []);

const _viewabilityConfig = {
  itemVisiblePercentThreshold: 50
}


 <FlatList
    data={videosData}
    decelerationRate={'fast'}
    showsVerticalScrollIndicator={false}
    snapToInterval={Dimensions.get('window').height}
    snapToAlignment={"start"}
    initialScrollIndex={0}
    disableIntervalMomentum
    onViewableItemsChanged={_onViewableItemsChanged}
    viewabilityConfig={_viewabilityConfig}
    renderItem={ ({ item }) => (
       <View>
          <VideoPlayerComponent data={item} />
       </View>
    )}
 />

VideoPlayerComponent

const [data] = useState(props.data)
const [paused, setPaused] = useState(true);

return(
  <View>
      <TouchableWithoutFeedback
          onPress={() => setPaused(!paused)}
      >
         <View>
             <Video
                style={styles.fullScreen}
                source={data.video}
                resizeMode="cover"
                paused={paused}
                repeat
              />
             {
                paused ? (
                   <View style={styles.pausedIcon}>
                      <Icon name="play" type="ionicon" color="white" size={68} />
                   </View>
                ): null
             }
         </View>
      </TouchableWithoutFeedback>
  </View>
)

Answer 1

friends I have solved the issue for my react native video project. the issue was that all videos are playing in Flatlist but we need to play only singal video on the current viewport and pause the rest. just do the following steps to solve all videos playing issue

1: npm install @svanboxel/visibility-sensor-react-native

2: import VisibilitySensor from '@svanboxel/visibility-sensor-react-native'

3: do this

import VisibilitySensor from '@svanboxel/visibility-sensor-react-native'
const video = ()=>{
const [paused, setpaused] = useState(true)
return(
     <VisibilitySensor onChange={(isVisible)=>{ 
        return(
          console.log(isVisible),
          isVisible?setpaused(false):setpaused(true)
        )  
      }
    }
    >
    <View>
     <Video
              source={{uri: 'https://d8vywknz0hvjw.cloudfront.net/fitenium-media-prod/videos/45fee890-a74f-11ea-8725-311975ea9616/proccessed_720.mp4'}}
              style={styles.video}
              onError={(e) => console.log(e)}
              resizeMode={'cover'}
              repeat={true}
              paused={paused}
            />
      </View>
    </VisibilitySensor>
)
}

4: I have just given you the basic structure you can add styling stuff as your requirements.

5: remember that always add your view/video elements between the VisibilitySensor tags, otherwise it will not work.

6: this code will give you true when your video component will render in flatlist viewport and remainig will give you false. with this you can manage play/pause state of video element.

thanks...

Answer 2

I managed to use the inviewport library

using this snippiti managed to convert to functional class in my functional class i just passed a flatlist as it was.

 <FlatList
   data={videos}
   decelerationRate={'fast'}
   showsVerticalScrollIndicator={false}
   snapToInterval={Dimensions.get('window').height}
   snapToAlignment={"start"}
   initialScrollIndex={0}
   disableIntervalMomentum
   renderItem={ ({ item }) => (
       <View>
          <VideoPlayerComponent data={item}/>
       </View>
   )}
 />

then in my VideoPlayerComponent i do this

const video = useRef(ref)

const playVideo = () => {
   if(video) {
      setPaused(false);
   }
}

const pauseVideo = () => {
  if(video) {
     setPaused(true);
  }
}

const handlePlaying = (isVisible) => {
   isVisible ? playVideo() : pauseVideo();
}

return (
   <View>
     <Video
        ref={ ref => {video.current = ref}}
        style={styles.fullScreen}
        source={data.video}
        paused={paused}
        resizeMode="cover"
        repeat
     />
   </View>

)

This will play the video that is in. view and will pause the other based on the ref passed to it.

Hope this helps anyone stuck as i was stuck for a few days :)