How to load image from URL React-native image view with loader

Display image from URL React-native Android/iOS

Hi Guys, In this article, we learn about How to load image from URL in React-native image view with loader, to carry out we are going to install library to load Image and another library to display loader, so let’s start

Load image from URL React-native image view with loader
Load image from URL React-native image view with loader

1. Create a project

react-native init ImageViewerApp

after creating a project we have to install two more libraries 1. React-native-image-progress, 2. React-native-progress,

  • Use the following commands to install the above libraries. check this link for more about the loader libraries
npm install react-native-progress
npm install react-native-image-progress

2. Add the following imports

After the successful installation of the above libraries goto the display screen (in my case App.js) and add the following imports.

import {
 Text,
  StatusBar,
  SafeAreaView,
  View,
  StyleSheet,
  ScrollView,
} from 'react-native';
import  ImageLoader  from 'react-native-image-progress';
import * as Progress from 'react-native-progress';

ImageLoader is used to display image and Progress is used to pass the progress bar as a parameter to ImageLoader.

3. Add ImageLoader view

Add ImageLoader view inside our return method:

 <View style={styles.container}>
              <ImageLoader
                            component={ImageLoader}
                            resizeMode="contain"
                            indicator={Progress}   //<---Pass ProgressLoader as a indicator
                            indicator={true}
                            indicatorProps={{size: 80, borderWidth: 0, color: "#062baa", unfilledColor: "#0e6605",}}
                            // disable loading indicator
                            //indicatorColor="white" // react native colors or color codes like #919191
                           // indicatorSize="small" // (small | large) or integer
                            source={{ uri: "https://www.techup.co.in/wp-content/uploads/2019/01/img_butterfly.jpg"  }}
                            style={[styles.fitImage]}>

                            </ImageLoader>
                            </View>

As we see above code we are passing Progress to the indicator, We can pass different types of progress loader as an indicator.

  • Check full App.js code below:
import React, {Fragment} from 'react';
import {
  Text,
  StatusBar,
  SafeAreaView,
  View,
  StyleSheet,
  ScrollView,
} from 'react-native';
import  ImageLoader  from 'react-native-image-progress';
import * as Progress from 'react-native-progress';

import {
  DebugInstructions,
  ReloadInstructions,
  Header,
  LearnMoreLinks,
  Colors,
} from 'react-native/Libraries/NewAppScreen';

const App = () => {
  return (
    <Fragment>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
            <View style={styles.container}>
              <ImageLoader
                            component={ImageLoader}
                            resizeMode="contain"
                            indicator={Progress}     //<---Pass ProgressLoader as a indicator
                            indicator={true}
                            indicatorProps={{size: 80, borderWidth: 0, color: "#062baa", unfilledColor: "#0e6605",}}
                            //disable loading indicator
                            //indicatorColor="white" // react native color codes like #919191
                            //indicatorSize="small" // (small | large) or integer
                            source={{ uri: "https://www.techup.co.in/wp-content/uploads/2019/01/img_butterfly.jpg"  }}
                            style={[styles.fitImage]}>
               </ImageLoader>
             </View>
        </ScrollView>
      </SafeAreaView>
    </Fragment>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  highlight: {
    fontWeight: '700',
  },
    fitImage: {
    height: 300,
    width: 300,
    padding: 4,  
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    flexDirection: 'column',
  },
});

export default App;

4. final output

Load image from URL React-native image view with loader
Load image from URL React-native image view with loader

 

 

Leave a Reply

Your email address will not be published.