React Native Show Default Image Before loading Real Image PlaceHolder iOS Android Example

The default image also known as Image PlaceHolder is used to Show Default Image Before loading Real Image from server using HTTP URL. This image is like a default image thumbnail with some normal image so user will know the image is still in loading process. So in this tutorial we would going to Display Default Image Before loading Real Image as Image PlaceHolder in iOS Android React Native Example tutorial.

Contents in this project Show Default Image Before loading Real Image PlaceHolder iOS Android React Native Tutorial:

1. Create a Folder named as images in Your_React_Native_Project_Folder. We are calling the default image from this folder so if the network is not available then it will load directly from local resource.

2. Download our Default Thumbnail Image from below and copy inside Your_React_Native_Project_Folder -> images folder.

3. Import StyleSheet, View, Image and Button component in your project.

4. Create a State named as loadingImage and set its default value as False. This State is used to show default image before loading real image and if the image loaded successfully it will display us the real image.

5. Create a function named as LoadRealImage(), Inside this function we would simply update the State value.

6. Create a Root View in render’s return block, This View is our default root View.

7. Create a Image component in Root View. We would calling the source of image using Ternary operator with State value.

How This works(Must Read) : Using the Ternary operator we would set a condition in image source prop that it the state value is false then it will execute the second part of source which is the Default Image and when user clicks on the Button and update the State value it will execute the first part of Source.

8. Create a button in Root View and call the LoadRealImage() function.

9. Creating Style.

10. Complete source code for App.js File :

Screenshot in Android device:

Show Default Image Before loading Real Image Screenshots in iOS device :

4 Comments

  1. Thank you for your valuable post

  2. bro is there any sequential way for a beginner if so plese inform because yours tutorials have very easy explanation.

    • Thanks for comment Manpal yes there is a sequential way for beginners you just follow all the tutorials on React Native’s official page, I myself learn from there 🙂 .

Leave a Reply

Your email address will not be published.