React Native Show Error Message if Image load failed Not Found on Server

The inbuilt prop event onError={} will execute on Image when image not found on server or unexpectedly something wrong goes with connection. If the Image we are looking for has a broken URL and dose not present on Server then it will return us a{nativeEvent: {error}}. So in this tutorial we would going to make a react native app to Show Error Message if Image load failed or Not Found on Server in both android iOS react native applications. This functionality is known as Image Place Holder.

What we are doing in this tutorial(Must Read) :

There are 2 Images in this project. 1st is The real Image which we would want to show inside the Image component and 2nd Image is the Place Holder Image which would display if something goes wrong like Image not found on server or has a broken link. We are calling the both image form server if you want to call Error message image from Local Resource then read my this tutorial this.

The Main Image in this tutorial :

Place Holder Image – Display if Main Image URL not found on server:

Contents in this project Show Error Message if Image load failed Not Found on Server in React Native Android iOS app Example:

1. Import StyleSheet, View and Image component in your project.

2. Create constructor() in your project. Now we would make a State named as imageLoading which would control the Image visibility.

3. Create a function named as ImageLoading_Error() which would call on onError={} prop event in Image component. We would simply setting up the imageLoading State value in this function.

4. Create a Root View in render’s return block.

5. Create Image component in Root View. We are using the Ternary operator to call the image from server. If imageLoading State value is True then it will Show the original Guitar image and if the imageLoading State value is False then it will Show us the Error Loading Image.

onError={} : Calls when image not found on server or something goes wrong.

6. Create Style.

7. Complete source code for App.js File :

Screenshot in Android device If Image found on Server :

Screenshot in Android device If Image Not found on Server :

Show Error Message if Image load failedScreenshot in iOS device If Image found on Server :

Screenshot in iOS device If Image Not found on Server :

Leave a Reply

Your email address will not be published. Required fields are marked *