Make Image Loading (React Native)

Zain Ahmed — Fri, 09 Oct 2020 06:27:21 +0000

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

DEV Community: yar Coder

Make Image Loading (React Native)