Show an Animated Buffering Icon When Remote Videos are Loading in React Native

When dealing with videos in React Native and React Native Video, there is a time where you might need to buffer and show a buffer loading because of a slow network. What we'll first do is set up state and say buffering and we'll default it to true. We'll also add an animated value that we default to zero.

Down in a render we have our video set up to play a remote video. We'll need to then add on load start, and we'll say this.handleloadstart, and then on buffer, which we'll call this.handlebuffer. We'll need to position our icon over the video.

We'll do that using a video cover, which just aligns things to the center and uses position absolute left, zero, right, bottom, and top, and a background color of transparent to center something over a video. We'll say view style equals styles.videocover. In here we'll say buffering. First, we need to de-structure that from our state.

Then, if we are, then we want to render in animated.view. Then inside of that we'll have an icon from React Native vector icons. We'll give it name equals circle o notch, the size of 30, and a color of white. Then we'll close our animated.view.

Because we defaulted to true and we refreshed this, we should have an icon that appears in the middle of the screen. To make it animated, we'll need to set up a rotation interpolation. We'll say constinterpolatedanimation is equal to this.state.animated.interpolate, which takes an object.

Our input range will be zero to one. Our output range will be 0 degrees to 360 degrees, which means a full circle. We'll then set up our styles, we say const rotate style equals array transform, which is an array of object transforms.

In this case we rotate, and we'll pass in our interpolate animation. Now we can go apply this animation to our animated.view. We'll say style equals rotate style. So that our animation will start when the video starts to load, we'll need to set up our handle load start call back. We'll say handle load start.

Then because we also need to start and restart our animations occasionally via different functions we'll just call something called this.triggerbufferanimation. Then we'll set up our trigger buffer animation function.

We'll need to use the animated loop. However, we'll also need to also stop that animation, so we'll need to assign our animation to a variable. We'll say this.loopinganimation is equal to animated.loop. This will receive a function call, an animated function call, that will then continually loop it.

We'll say animated.timing, because that's what we want to do and pass in this.state.animated. Then we need to say two value of one and a duration of 350. We'll then call start on our loop. If we refresh this you can see that we are spinning because it's called here and our loop is continuous.

We'll now set up our handle buffer. This will be called when the buffer is buffering or also not buffering. Handle buffer is equal to some meta information. If meta.isbuffering is true then we'll say this.triggerbufferanimation.

However, if we have this.loopinganimation means we have an animation already and we're not buffering, then we'll call this.loopinganimation.stopanimation. Finally, we'll say this.setstatebufferingmeta.isbuffering. That way we can un-render our looping icon.

Now when we refresh you can see that it didn't loop here, because there was a white background. We'll need to fix that. We'll do that by styling the view that wraps our video. We have a buffering style down here that just sets our background color to zero.

On this wrapping video we'll style equals buffering and if it is buffering then we will render our styles.buffering, which will just set a background color of black. Otherwise it will just be undefined.

Now when we refresh this we can see that our video buffers quickly with a background color of black and our animation is spinning, and then our video continues to play.