Show An Error Message When A Video Fails to Load in React Native
In this lesson we'll show to use the onError callback from react-native-video. We'll show how to use a separate <View/> that'll cover the video and render an error icon from react-native-vector-icons only if there is an error present.
Finally we'll learn how to setup a handleError function that'll take the error and error code off the video meta. This'll let us check against various error codes and give back a custom error message!
Sometimes when dealing with reacting a video, we might be loading a URL or we might be loading a video that doesn't exist. We want to handle that by showing an error to the user.
First, we'll set up some state to keep track of our error. We'll say state=errfalse. React data video has a callback called on air which will then call this.handleerror. We'll also need to set up a video cover as well as some icons and some text to show the error that is reported back to us.
We'll set up view style=styles.videocover. This video cover is within this view and we can see that our styling makes it positioned absolute, with left top right, bottom zero, meaning it covers the entire video.
We'll set a background to white with a 90 percent opacity. Then we'll also align all of the content inside of it which includes our icon and our error message into the center. We'll now destructure const error from this .state, and use it to set up two pieces of information.
Error and and icon name=exclamation-triangle. We'll say size is 30, and the color is red. We'll also say error and text error. Whenever we have an error rather than false we'll set it to a string of content, and it will display as our error.
We also have another style which is just a background color of black. If the video doesn't load, we will then set the background color of this to black so that the white will actually have something to show against. We'll say style=error, styles.error. Otherwise, we'll just say it's undefined and there won't be any style.
Finally, we'll set up our handle error function which receives some meta. It receives varying information, we'll say const error, which then also receives an error code. With that error code we can do certain things. We'll just say let error equal to an error occurred playing this video. This will be our default text.
You can switch on the code and in the event that we have a negative 11.800 we could have reassign our error to be not load video from URL. This error code is when you can't load a remote video.
There are other error codes, however we'll just focus on this one. We'll then break so that we can continue on. We'll then say this.setstate error and that will set to whatever error that we had produced. Now, when we refresh we can see that the error has happened. We have our icon centered with the could not load video URL in the middle.