Why we need to put the loader on the image :

We mostly use API as our app backend, and when we fetch any API which response contains the image and we want to show that image then it takes some time because of API response, at this time we must put the loader on this so that user don’t get frustrated, for this we are going to use a third-party npm plugin which is react-native-image-progress, so let’s start to implement it.

The output of image loader–

please follow the steps carefully for integrate this image loader.

Step 1:

Firstly we need to install the plugin

npm i react-native-image-progress

Step 2:

After install plugin successfully, you need to link the plugin(if it not linked properly or your version is below 0.61).

react-native link react-native-image-progress 

Step 3:

Now i am going to import the plugin where you want to use the loader on the image.

import Progress from 'react-native-progress'
import Image from 'react-native-image-progress'

Step 4:

Now we are going to design the view where we implement the loader.

render() { 
  return( 
    <View style={{flex: 1, height: 50, flexDirection: 'column'}}>. 
    <Image source={{ uri: (this.state.eventImage) ? 
    (this.state.eventImage) : 'logo' }} indicator={Progress} 
    indicatorProps={{
    size: 30,
    borderWidth: 0,
    color: 'rgba(150, 150, 150, 1)',
    unfilledColor: 'rgba(200, 200, 200, 0.2)'
  }}
 borderRadius={60} 
style={{ height: 100, width: 100, marginRight: 20, borderRadius: 50 }}>
</Image> 
</View> 
)}

Reference: https://www.npmjs.com/package/react-native-image-progress

So this “How to show loader on the image in react-native” is completed, “you can find the next issue list here.

and you can find my post on medium as well click here please follow me on medium as well.

And if any other query/issue, please feel free to ask.

Happy Coding Guyz.