title: Play/Pause/Download Video In FlatList
body: <p>I am trying to implement a very common usecase.
  The idea is simple, download/play a video which is being shown currently in the flatlist, pause/dont download the rest.</p>
  
  <p>This is my <code>FeedCard</code> -> <code>MyFlatListItem</code></p>
  
  <pre><code>class FeedCard extends PureComponent {
  
      constructor(props){
          super(props);
          this.state = {
              pauseVideo: true
          };
      }
  
      playThisVieo = (playVideo) =&gt; {
        this.setState({
            pauseVideo: !playVideo
        });
      };
  
      render() {
          return (
              &lt;Card&gt;
                  &lt;CardItem cardBody&gt;
                      &lt;View style={styles.preview}&gt;
                          &lt;Video
                              source={{ uri: this.props.videoURL}}
                              ref={(ref) =&gt; {
                                  this.player = ref;
                              }}
                              rate={1.0}
                              volume={1.0}
                              muted={false}
                              paused={this.state.pauseVideo}
                              resizeMode="stretch"
                              repeat={true}
                              playInBackground={false}
                              playWhenInactive={false}
                              ignoreSilentSwitch={"ignore"}
                              progressUpdateInterval={250.0}
                              onLoadStart={() =&gt; this.player.seek(0)}
                              onLoad={this.setDuration}
                              onProgress={this.setTime}
                              onEnd={this.onEnd}
                              onError={this.videoError}
                              onBuffer={this.onBuffer}
                              onTimedMetadata={this.onTimedMetadata}
                              style={{
                                  position: 'absolute',
                                  top: 0,
                                  left: 0,
                                  bottom: 0,
                                  right: 0,
                              }}
                          /&gt;
                      &lt;/View&gt;
                  &lt;/CardItem&gt;
              &lt;/Card&gt;
          );
      }
  }
  </code></pre>
  
  <p>Now all I have to do is renderThisItem In FlatList and then in onViewableItems, only play that video which is being shown.</p>
  
  <pre><code>constructor(props){
      super(props);
      this.viewabilityConfig = {viewAreaCoveragePercentThreshold: 70};
  }
  
  
   &lt;FlatList
          horizontal={false}
          data={this.props.feeds}
          renderItem={this.renderFeeds}
          viewabilityConfig={this.viewabilityConfig}
          onViewableItemsChanged={this._onViewableItemsChanged}
   /&gt;
  
   renderFeeds = (feed) =&gt; {
      return (
          &lt;FeedCard
              ref={(ref) =&gt; this.feedCardRef = {...this.feedCardRef, [`REF-FLATLIST${feed.item.feedID}`]: ref}} //Saving Refs Here
              videoURL={feed.item.videoURL}
              //Other Props
          /&gt;
      );
  };
  
      _onViewableItemsChanged = (props) =&gt; {
          const changed = props.changed;
          const viewableItems = props.viewableItems;
          console.log(changed);
          console.log(viewableItems);
          changed.forEach(item =&gt; {
              if (!item.isViewable) {
                  this.feedCardRef[`REF-FLATLIST${item.key}`].playThisVideo(item.isViewable);
              }
          });
          viewableItems.forEach(item =&gt; {
              if (item.isViewable) {
                  this.feedCardRef[`REF-FLATLIST${item.key}`].playThisVideo(item.isViewable);
              }
          });
      };
  </code></pre>
  
  <p>Now the above works well for playing video only if its the one being shown in the screen, but I also want to download the video only if that video is being currently shown in the screen. How do I control the download of a video? I couldnt find anything in the <a href="https://github.com/react-native-community/react-native-video/blob/master/README.md" rel="nofollow noreferrer">readme</a>.</p>