How can I play a single video in a flatlist using this package react-native-video-player

Question

I'm trying to play a single video within a FlatList using the react-native-video-player package in my React Native application. However, I'm facing some difficulties with the implementation. Here's an overview of what I'm trying to achieve: I have a FlatList component that displays multiple videos, and I want to enable the user to play a video by tapping on it. I'm using the react-native-video-player package to handle the video playback.

Here's the relevant code snippet:

`<VideoPlayer
    endWithThumbnail={true}
    fullScreenOnLongPress={true}
    paused={props.isPlay}
    onPlayPress={props.onPlayPress1}
    pauseOnPress={props.pauseOnPress1}
    autoplay={false}
    resizeMode="contain"
    video={{uri: props.filePath + item.name.replace(/ /g, '%20')}}
    style={styles.backgroundVideo}
    disableControlsAutoHide={true}
    thumbnail={{uri: props.filePath + item.thumbnail}}
/>

<FlatList
    data={props.inactiveLandings}
    horizontal
    showsHorizontalScrollIndicator={false}
    renderItem={renderItemOtherInnovations}
/>

const onPlayPress1 = () => {
    setPlayData(false);
};

const pauseOnPress1 = () => {
    setPlayData(true);
};

const [isPlay, setPlay] = React.useState(false);

const setPlayData = value => {
    setPlay(value);
};`

The issue I'm facing is that when I tap on a video in the FlatList, all the videos start playing simultaneously, instead of playing just the selected video. I want to ensure that only the video associated with the tapped item is played.

Answer 1

Seems like all video components in your flatlist is listening to them same state isPlay. To fix this, you should add an id to differentiate which video should play in your state like:

[playId, setPlayId] = useState('');

<VideoPlayer 
  paused={playId === id}
/>

But a better approach I think is you should handle play/pause inside your video component to prevent affecting to others video.