How to prevent map() from render whole array at once in react-native

Question

Hi folks I'm using viewPager and inside viewpager I'm rendering the array of videos using map. But I wan to show 1 video at one time as I'm giving height and width 100%. But when I run the app the all videos start playing.Only one show on the screen and the sound of other videos playing too. I want to prevent that. How can I do that?

Here is my code.

<ViewPager
        onPageSelected={(e) => {
          setActive(e.nativeEvent.position);
          // setPaused(true);
        }}
        orientation="vertical"
        style={{height: '100%'}}
        initialPage={0}>
        {vids.map((item,index) => {
          return (
            <View key={index}>
              <Video
               paused={item.paused}
                source={{uri: item.vid}}
                style={styles.mediaPlayer}
                volume={0.5}
                resizeMode="cover"
                repeat={true}
                
                onReadyForDisplay={() => SetVideoLoad(false)}
              /></ViewPager

score 0 · Answer 1 · answered Sep 07 '20 at 05:48

The problem is the way you are using the map.

vids.map((item,index) => {
      return (
        <View key={index}>
                    ....
         <View /> ) ..

will iterate through all the elements of the map and display their respective videos. What you need is to create something like a state variable that will have the info for just one video from the map and just pass its info to the < Video /> component. You will need to have other react components like a button to move to another element of the map to play another video. Every time you click in this "button" you will execute some code to get another element of the map and play the respective video.

score 0 · Accepted Answer · answered Sep 07 '20 at 06:44

You can simply do this in the following way

const [pause,setPause]= useState(true)

               <Video
               paused={pause}
                source={{uri: item.vid}}
                style={styles.mediaPlayer}
                volume={0.5}
                resizeMode="cover"
                repeat={true}
                onTouchStart={()=>{setPause(!pause)} //<=== Add this line
                onReadyForDisplay={() => SetVideoLoad(false)}
              />

I hope this will help you.Happy Coding :D

How to prevent map() from render whole array at once in react-native

2 Answers2