Create a Video that Auto Plays when Scrolled into View in React Native

A common interaction within applications is to scroll through a ScrollView and be able to auto play a video. First, we're going to import ScrollView and dimensions from React Native. You can see here that we've already imported our video from React Native Video as well as our light video, which is going to be the video that we auto play.

We'll then need to track three pieces of information. The first will be on state, we'll set it up as a class property and we'll add paused of true. We'll start pausing and then we'll toggle it to paused or playing. We'll then also set up another class property called position, and we'll keep track of the start of the video and the end of the video.

Now we'll set up our ScrollView so that we can actually scroll through the applications. We'll say, ScrollView. To create some fake content so that we have something to scroll to the video, we have set up this fake content style with a height of a 150 and a background of gray. We'll add that, we'll say view style equals styles.fakecontent.

Then we'll also add one at the bottom, so we can put our video in the middle. This is just to simulate that we have content to above and below our video.

Now we'll add our video in. We'll use the video element from React Native Video. We'll then set up repeat to true at our source which will be our light video. We'll add paused, and use the this.state.paused variable that we set up earlier.

We'll also give it a style. We'll need to first go get the width from the dimensions of the app. We'll say constwidth is equal to dimensions.getwindow. This will get the width of our app. We can use that, say our video is width, and then also we'll just give it a height of 300.

Now when we refresh our simulator here we can see that there is fake content as we scroll we have our video, that's not playing because it's paused. Then as well as more fake content that we can scroll off the screen.

To help keep track of whether or not the video is playing while we have it scrolled off the screen, we'll add some text inside of our fake content. We'll say text, closing text, and then inside here we'll say this.state.paused. We'll say pause, otherwise that means it's playing. We'll then go ahead and just copy this, paste it down here.

Before we leave our render, we'll need to set up a few call backs. The first will be on ScrollView. We'll say scroll, event throttle is equal to 16. This means our callback will be called every 16 milliseconds so we can execute something at 60 frames per second.

We then also add our on scroll and say this.handlescroll, which we will set up in one moment. We'll then also add an on layout, and this will be this.handlevideolayout. This will then return the layout and the position of our video so we know where it is at on the screen.

Now we'll set up our two callbacks. The first one will be our handle video layout, which will take an event. Then we'll also set up our handle scroll to also receive an event.

We'll set up our handle video layout. We will need the height of the screen so that we can figure out when the video is in our threshold. We'll say constheight is equal to dimensions.getwindow. Now we have the height of our screen.

We'll set up our this.position.start and make it equal to e.nativeevent.layout.y minus the height of the screen. That means it'll be down here, and then minus this height. Then e.nativeevent.layout receives a Y, an X, and a height of the element. Then we'll also say this.position.end is equal to the e.nativeevent.layout.y. The Y position of it on the screen plus the height of the element.

In our case it's 300, but we're making this dynamic so that if a video is ever dynamic you can automatically adjust it to e.nativeevent.layout.height.

Before we move on we also want to add a threshold. We'll just set up a constthreshold is equal to 100. What this threshold will do is it will add a threshold of it must appear 100 pixels on the screen first before the video starts playing. Then if you scroll into the video 100 pixels then it'll also pause it. We will add the threshold here and subtract the threshold here.

Now we will set up our handle scroll. The handle scroll will also receive a native request, it will receive a scroll position in the form of an e.nativeevent.contentoffset. We want the Y, meaning the Y direction that it's scrolled. We'll also get paused, we need to check if the video is paused. Then we'll also destructure our start and end of our position.

We'll first need to check if the scroll is within our threshold of our video. We'll say if the scroll position is greater than start and the scroll position is less than end and we are paused, it means we then want to this.setstatepause to false so that our video will start playing.

Then if we scroll past it in any direction, if our scroll position is greater than our end or our scroll position is less than our start and we're not paused, we're playing, then that means you want to then this.setstate and reset our paused back to true so our video stops playing.

If we refresh our simulator you can see that we're paused. As we scroll and the video comes into screen, within 100 pixels of threshold our video will start playing. Now it's playing, and now that it's within the threshold that we set up of the start and the end.

If we scroll past and once we hit the 100 threshold right there, now it turns to pause, we can scroll back and forth, scroll back to the top, and now we're paused again.