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

Jason Brown
InstructorJason Brown
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 5 years ago

In this lesson we'll be using a buffering icon from react-native-vector-icons to display a buffering state over the center of the video.

We'll learn how to setup up an Animated.loop to rotate the buffering icon and how to use the video's meta to only run the loop during buffering.

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.

~ 25 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today