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

[om-harry10]

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

[marnusw]

@om-harry10 it is very bad form to direct message over 20 people when you want help. Please post your issue like everyone else, and someone might help in due course if and when they have time. Thanks.

[om-harry10]

@om-harry10 it is very bad form to direct message over 20 people when you want help. Please post your issue like everyone else, and someone might help in due course if and when they have time. Thanks.

@marnusw Sorry for any inconvenience . I have been looking for it's solution very desperately and from a long time. So, to get the solution quickly I mentioned you all. I hope you understand the situation. Thanks.

[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]

High order component (just a wrapper around your video component)

[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?