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

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