1

I am using react-native-video-player to play video in my app. I have a screen that renders sub-components where, in each one of them I have a video player embedded. My question is, how do I only make a video play when the user sees the entirety of the component where the video is embedded? Otherwise a person would hear 10 videos playing simultaneously when entering the screen.

<FlatList
    data={this.state.data}
    style={{ marginTop: 10 }}
    renderItem={({ item }) => (
      <DiscoveryPanel
        {...item}
        componentId={this.props.componentId}
        connectionType={this.state.connectionType}
        followAction={() => this.followAction(item)}
      />
    )}
    keyExtractor={item => item.eid}
  />;


const DiscoveryPanel = ({ relevant }) => {
  return (
    <View style={styles.boxShadow}>
      <View style={styles.topContainer}>
        <VideoPlayer
          thumbnail={{ uri: logo }}
          video={{
            uri: stream_urls["480p30"]
              ? stream_urls["480p30"]
              : stream_urls["chunked"]
          }}
          muted={false}
          pauseOnPress={true}
          autoplay={connectionType == "wifi"}
        />
        <Image
          style={{ position: "absolute", height: 60, width: 60 }}
          source={require("../../../assets/images/record_gif.gif")}
        />
      </View>
    </View>
  );
};
Jaydeep Galani
  • 4,842
  • 3
  • 27
  • 47
Michael Ostrovsky
  • 629
  • 1
  • 7
  • 21
  • 1
    See my [answer](https://stackoverflow.com/questions/54839940/pause-video-in-flatlist-when-out-of-view/54844767#54844767) to this question. It uses Video but it could be repurposed to use `react-native-video-player` – Andrew Feb 25 '19 at 11:44

1 Answers1

0

I think there is a window property which tells you the current height. Just use this number in the scroll event

Gianluca Filitz
  • 371
  • 1
  • 2
  • 10