Create Controls that Hide/Show When Video Is Interacted With in React Native

There may be times where you want the controls to show and hide depending on whether or not the video has been interacted with. I'll first set up animated is equal to a new animated value, and we'll set it to zero.

We'll need to know when the video is interacted with, so in our render function, we will wrap our video with a touchable without feedback, and on press, we'll say this.handleVideoPress. Then we'll wrap this around our video.

Now, we'll go create our handleVideoPress function. However, because there are going to be other times where we want to continue showing the controls, like when play is pressed or pause is pressed, we will separate this into two functions.

One we'll call triggerShowAndHide, and the other will be our handleVideoPress. Our handleVideoPress will just call this.triggerShowAndHide. We'll first say animated.timing, this.animated to value of one for the duration of 100 milliseconds. Then we'll call start.

This means that every time the video is interacted with, we will quickly animate the controls to the value of one in 100 milliseconds. Then we'll say this.hideTimeout is equal to setTimeout, which will take a function.

Then we will animate them away, so animated.timing, this.animated, to value zero. They'll be hidden for the duration of 300 milliseconds, which we then also have to call start on this. We will set our setTimeout duration to 1,500 seconds of not being interacted with.

Then we'll also have to call clearTimeout, this.hideTimeout. That means that this timeout will not be called if we interact or if this function is called again. If we continue to interact with the video, this will continually just be cleared out. It will never hide until we stop interacting with the video.

Now, we'll need to set up our interpolation and our style so that this can animate out of the way. The first thing we'll do is say const interpolatedControls is equal to this.animated.interpolate, which takes an object configuration of an input range, which we'll say zero to one.

Our output range we'll say is 48 and 0. It will start 48 pixels translated away, and then once it animates to 1, it will be 0, so it will be visible. We'll then set up our const controlHideStyle, and set up our transform, which is an array of transforms.

In our case, it'll be a translate Y, which will translate up and down. We'll just pass in our interpolated controls interpolated. We'll now need to go switch our styles.controls over to use an animated view so that we can use our animations.

We'll say animated here, and then also animated right here. We'll then pass in the controlHideStyles, so we can use an array to specify multiple styles on a particular view. Now, if we refresh, we can see that we've paused the video, and it hides.

However, it is not hiding, because we need to control the overflow hidden on our video container. If we look, we've already specified a video container style with overflow hidden. We can apply that to our wrapping view, which is wrapped around our video as well as our controls.

We'll say style equals styles.videoContainer. Now, when we refresh, we can see that our controls are gone. However, when we press on the video and interact with it, they pop up and then disappear in 1,500 milliseconds.

Now, we need to go add in when we interact with anything other than the video itself, we'll need to call the triggerShowHide function. We'll need to call it inside of our handleMainButtonTouch, otherwise when if we don't, when we press this, we still pressed it, and it still hid. Now, we need to call it there, so that will work, or any time we press on the seek bar.

Now, alternatively, you could also add it in the handleLoad, and that would make it animate in when the video loads. As we see here, it animated in. Or if you prefer to just do that whenever the video's interacted with, then we can pop that up, keep pressing play and pause, and our controls won't go away until we're done. Then they slide down.

Having to call triggerShowHide from every single touch interaction that we want may get very tedious. Instead, we're going to use a panresponder. First, we're going to go import panresponder from React native.

Then we're going to set up a componentWillMount life cycle method. We're going to create this.panresponder, and assign it panresponder.create. Panresponder has different methods that are called throughout the life cycle of a touch.

The one that we're going to use is onMoveShouldSetPanresponderCapture, which will be a function. The panresponder inside of React native works much like the web, where there's a bubble and a capture.

With the capture, the events will be flowing down. Then in the bubble, the events will be flowing back up. This will determine whether or not you should capture those events or not.

In our case, we do not want to capture them, so we are going to return false from our onMoveShouldSetPanresponderCapture. That does not mean that we cannot still call functions. In our case, we're going to call this.triggerShowHide.

That way, every time a touch happens, when it's coming down, we will trigger our show/hide, and then return false to say don't steal the gestures from anything else that's being touched. Now, we need to clean up our function calls from everywhere.

We'll first remove our handleMainButtonTouch, our handleProgressPress, and our handleVideoPress we can just remove altogether. With that, we need to apply our panresponder to a view that wraps everything that we want to trigger the show/hide.

We will remove our touchable without feedback from our video. This video container wraps everything that we want to be interacted with to cause the show and/or hide. In here, we're going to spread this.panresponder.panhandlers, which will apply those gestures that we want to control to this particular view here.

However, we don't want to control any, so anything that is touched within here, which includes our video and our other controls, will then cause our triggerShowHide function to be called. Now, let's take a look at that in action.

If we refresh this, we can see that on load, it popped up. When we touch, it showed. We can keep on touching, and it will stay. As soon as we leave, it goes down.