How to pause and play video when display - react-native

Question

I am trying to pause and play video using scrollView but i am unable to do that I wrote a code but it have some condition issue, can anybody please tell me what is wrong in my code, I want to play the video when it is visible and pause all other videos in the list than when we scroll the video show on screen it start playing automatically and the previous video pause or stops automatically.
handleVideoLayout = (e:any) => {
const {height} = Dimensions.get("window");
console.log(e.nativeEvent.layout.y,e.nativeEvent.layout.height);
this.position.start = -(e.nativeEvent.layout.y - height + 100);
this.position.end = e.nativeEvent.layout.y + e.nativeEvent.layout.height + 100;
}
handleScroll = (e:any) => {
const scrollPosition = e.nativeEvent.contentOffset.y;
const paused = this.state.paused;
const {start,end} = this.position;
console.log("========================================");
console.log(start,end,scrollPosition);
console.log("========================================");
if(scrollPosition > start && scrollPosition < end && paused){
this.setState({paused:false});
} else if((scrollPosition > end || scrollPosition < start) && !paused){
this.setState({paused:true});
}
My render function:
<ScrollView
onScroll={(event) => {
this.handleScroll(event)
}}
onLayout={this.handleVideoLayout}
>
{data.map((item,index)=> {
return (
<VideoComponent/>
)
})}
</ScrollView>

Answer 1

I don’t have idea about doing this using scroll view but you have an option in flatlist. In that, you will get the visible items on the screen. and then based on your requirements you can apply conditions.
see my below boilerplate.
const onViewableItemsChanged = ({viewableItems, changed}) => {
//here 'viewableItems' is an item that is currently visible on screen.
};
const viewabilityConfigCallbackPairs = useRef([{onViewableItemsChanged}]);
<FlatList
data={data}
renderItem={renderPost}
showsVerticalScrollIndicator={false}
viewabilityConfigCallbackPairs={
viewabilityConfigCallbackPairs.current
}
/>

Answer 2

find the current index of your list and also the total index's of your list and then put like this
`
const [paused, setPaused] = useState(false);
<Video
videoRef={videoRef}
source={{uri: userData?.Video?.path}}
poster={VideoToImageUrlCoverter(userData?.Video?.path)}
posterResizeMode={'cover'}
pauseOnPress={paused}
shouldPlay={currentIndex === index}
repeat={true}
autoplay
resizeMode="cover"
paused={
currentIndex == index
? paused
: !paused && currentIndex == index
? false
: true
}
/>
`