Make Image Loading (React Native)
Suppose we have array of 10 Objects and every object has a url of image which are multi mb’s like 50mb, 45mb etc, so it take time to display image on screen bcz to fetch image from url it take time’s , here is the solution while image is downloading we can show any default image or loader for every image in loop , let start!
here is our array
here is my main component for render the array with flatlist ,
inside flat list i create a component name ImageItem,
i declare loading State for show load or default image , while fetching image
in render method i just made a condition that if loading is true i am showing loader and if loading is false i ll show image
the Image tag have 2 props which will use for this main part , onLoadStart which execute when image fetching start and i update the state loading true,
onLoadEnd will execute when image fetching is complete and ready to display so i update loading false , its that simple,
hope you learn from it , support me on my YouTube channel ,
