Pause video when out of screen view in RecyclerListView in react native

I am implementing video playing app(like Instagram Reels or tik tok) using RecyclerListView in React-Native. In the development of app, I am facing the problem that all the videos in the list play simultaneously. I want to pause all other videos which are out of the screen and play only when scrolled to a particular video and when video is visible on screen.

Please tell me how to do it? I have been stuck at this problem from a long time and tried a lot of things but could not find solution for RecyclerListView.

Please answer ASAP as it’s very urgent.

I have attached code for reference-

I have used react-native-video for playing video.

App.js

import VideoPlayer from './ViewVideo';
const fakeData = [
  {
    type: 'NORMAL',
    item:{
          uri:require('./images/likd2.mp4')
    },
  },{
    type: 'NORMAL',
    item:  {
          uri:require('./images/Linkd.mp4'),
        },
      },{
        type: 'NORMAL',
        item:  {
              uri:require('./images/PlayDate.mp4'),
              
            },
          },
];
export default class Myworld extends React.Component {

 dataProvider = new DataProvider((r1, r2) => {
    return r1 !== r2;
}).cloneWithRows(fakeData);
 
layoutProvider = new LayoutProvider(
    (i) => {
      
      return this.dataProvider.getDataForIndex(i).type;
    },
    (type, dim) => {
      switch (type) {
        case 'NORMAL':
          dim.width = '100%';
          dim.height = '100%';
          break;
        default:
          dim.width = '100%';
          dim.height = '100%';
          break;
      }
    },
  );


  rowRenderer = (type, data,index) => {
 
    switch (type) {
      case 'NORMAL':
        return (
         
                              <View  >
                              
                              <VideoPlayer source={uri} />
                              </View>
                  )}
         
            };
 
    render() {
    return (
      <>
       
        <SafeAreaView style={styles.container}>
          <RecyclerListView
            style={styles.videolistcontainer}
            rowRenderer={this.rowRenderer}
            dataProvider={this.dataProvider}
            layoutProvider={this.layoutProvider}
            initialOffset={1}
            pagingEnabled={true}
            showsVerticalScrollIndicator={false}
            
          />
        </SafeAreaView>
      </>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#14171A',
  },
});

ViewVideo.js

const VideoPlayer=(props)=>{
const [paused,setPause]=useState(false);
 return(
        <>
        
                                <TouchableOpacity
                                    
                                    style={{height:height,width:width}}
                                    onPress={() => setPause(!paused)}
                                 >
                                    
                                    <Video
                                      
                                        ref={ref=>{
                                                    setVideoRef(ref);
                                                    
                                                    }}
                                        source={props.source}
                                        style={styles.backgroundVideo}  
                                        resizeMode={'cover'}
                                        onError={onError(videoRef)}
                                        paused={paused}
                                        onLoad={onLoad}
                                        onProgress={onProgress}
                                        onEnd={onEnd}
                                        repeat={false}
                                        rate={1.0}
                                        volume={1.0}
                                        muted={false}
                                        onLayout={onVideoLayout}
                                    />
                                </TouchableOpacity>

       </>
    )
    
}

export default VideoPlayer;
const styles = StyleSheet.create({
    backgroundVideo: {
        
       position:'absolute',
        width: WP('100%'),
        height: HP('100%'),
       left:0,
       right:0,
       top:0,
       bottom:0
    },
});

@naqvitalha @radeno @muskeinsingh @siddhantsoni @manishPatwari @arunreddy10 @ananyachandra14 @rajatgupta26 @nimishsinghal @marnusw @inayat1 @wojtus7 @tafelito @swapnil1104 @isle-prashant @cmcaboy @adnaan1703 @AE0011

[nimishsinghal]

@om-harry10 I don’t think this problem is related to recyclerlistview. You can wrap your VideoPlayer component around a HOC, whenever your video comes into viewport it should resume the video and whenever it goes out of viewport you can pause the video.

There are multiple libraries that support this functionality. (https://github.com/yamill/react-native-inviewport)

[om-harry10]

@om-harry10 I don’t think this problem is related to recyclerlistview. You can wrap your VideoPlayer component around a HOC, whenever your video comes into viewport it should resume the video and whenever it goes out of viewport you can pause the video. There are multiple libraries that support this functionality. (https://github.com/yamill/react-native-inviewport)

@nimishsinghal What is HOC?

@nimishsinghal when I run InViewPort This error is shown: How to solve it?