Styjun

I am receiving a JSON array from an api where images have a live link. So, after the success I am rendering the data, problem is I want to show an gif until the images load completely.

The array is:-

[
 "category": "Loose Flower",
 "id": "7",
 "product_name": "Drb,Tls,Blpt,Nlknt",
 "unit_price": "0",
 "img_path": "http://prabhujionline.com/bo/upload/product_img/1513948635octa_pooja_basket_w_handle6_580x@2x.jpg",
 "count": 0,
 "is_loaded": true
 ,
 
 "category": "Loose Flower",
 "id": "1",
 "product_name": "Genda",
 "unit_price": "0.5",
 "img_path": "http://prabhujionline.com/bo/upload/product_img/1513947159genda.png",
 "count": 0,
 "is_loaded": true
 ]

<Image
 style= height: 212 / 3, width: 300 / 3, borderRadius: 5 
 source=(this.state.singlepack.is_loaded) ? uri: 
 this.state.singlepack.img_path : 
 require('../../../../assets/flower-loader.gif')
 onLoadStart=(e) => 
 this.changeImageLoadStatusOnStart(this.props.singleData.id) 
 onLoadEnd=(e) => 
 this.changeImageLoadStatusOnEnd(this.props.singleData.id) 
 />


changeImageLoadStatusOnStart = (id)=>
 this.setState(
 singlepack: 
 ...this.state.singlepack,
 is_loaded : false
 
 )
 

 changeImageLoadStatusOnEnd = (id) => 
 this.setState(
 singlepack: 
 ...this.state.singlepack,
 is_loaded: true
 
 )
 

I have tried the onLoadStart and onLoadEnd but I am unable to make the logic, can I have some help?

Try this:

class YourComponent extends React.Component 
 render() 
 return data.map(( img_path ) => (
 <Image
 style= height: 212 / 3, width: 300 / 3, borderRadius: 5 
 source= uri: img_path 
 loadingIndicatorSource=
 uri: require('../../../../assets/flower-loader.gif'),
 
 />
 ));
 


}

OR THIS

class YourComponent extends React.Component 
 state = 
 imgsLoaded: data.map(() => false),
 ;

 componentDidMount() 
 for (let i = 0; i < data.length; i++) 
 Image.prefetch(data[i].img_path, () => 
 const imgsLoaded = this.state;
 const imgsLoadedUpdated = imgsLoaded.slice();
 imgsLoadedUpdated[i] = true;
 this.setState( imgsLoaded: imgsLoadedUpdated );
 );
 
 

 render() 
 const imgsLoaded = this.state;

 return data.map(( img_path , index) => (
 <Image
 source=
 uri: imgsLoaded[index]
 ? img_path
 : require('../../../../assets/flower-loader.gif'),
 
 />
 ));