Problems including react-native-video

[petermjones]

When I include a very basic video into a RecylerListView it will initially play, but when I scroll down eventually I will get an exception:

Exception thrown while executing UI block: Cannot remove an observer <RCTVideo 0x116f82060> for the key path "readyForDisplay" from <AVPlayerLayer 0x1c022e440> because it is not registered as an observer.

Within my rowRender (which has a parent view to force the size):

<Video
  style={{ flex: 1 }}
  resizeMode="cover"
  poster={url}
  source={{ uri: videoUrl }}
/>

Are there any articles or examples on how to use video in a RecyclerListView? The end goal is to have large videos that take up most of the height of the display to start to play when they are partially shown, and stop when they are mostly hidden. That and a mute button.

If for some reason that wasn't possible, maybe a floating video view that is drawn on top of the recyclerListView, scrolling in sync, and re-used as necessary.

[petermjones]

Ok, the issue described here was taken care of by an update an hour ago.

I'm trying two types: one for images, one for video. The problem is that the RecyclerListView keeps those old videos around (playing on repeat) when I'm scrolling through an area that is mostly images. These video views probably take up a good amount of memory, would be nice if there was a 'nuke is no longer seen' option as an alternative to always keeping things around for recycling.

[naqvitalha]

You can easily unmount things you don't want using the onVisibleIndexesChanged callback. But make sure you don't affect the height. That might cause re-layouts.

[petermjones]

Do you have an example of unmounting something within unVisibleIndexesChanged?

Also, regarding auto-play and pause, depending on the position of the video in the visible scroll area, I'd hook that up via onScroll of the RecyclerListView container? How would I get access to a particular video object (one of several)?