React Native

How to show loader on the image in react-native:

Posted On
Posted By Neha Dwivedi

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: First we need to install the plugin

npm i react-native-image-progress

Step 2: Now 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: 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

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

Happy Coding Guyz.

Related Post

Latest Post

Tech NewsWhat's Arround

Google Meet is officially getting blur backgrounds in next version

Read More
Posted On
Tech NewsWhat's Arround

Is Really, You Secure With Your Smart Voice Assistant Device ?

Read More
Posted On
Magento

Create Custom Admin Menu in Magento 2

Read More
Posted On
React Native

How to show loader on the image in react-native:

Read More
Posted On
React Native

How to use google-places-autocomplete in react native

Read More
Posted On