How to display image in react native application using online URL step by step example with

 

In this post we are going to learn about showing image in react native application using online website HTTP URL. As we all know that react native is in its evolving stage because of it is platform independent. Before going further read Installing React Native on Windows

 

Step 1: Create React Native Project, check this if you don't know 

Step 2: Add Image component in import block

import {
 AppRegistry, Image
} from 'react-native';

 

Step 3: Create let variable in render block with

let Image_Http_URL ;

 

Step 4:  Assign Image URL to let variable using uri 

let Image_Http_URL ={ uri: 'https://rrtutors.com/uploads/images/ReactNative-mini-logo.png'};

 

Step 5: Add Image tag in render’s return block

render() {

    let Image_Http_URL = {

      uri: 'https://rrtutors.com/uploads/images/ReactNative-mini-logo.png',

    };

    return (

      

        style={{

          backgroundColor: 'cyan',

          flex: 1,

        }}>

        

          source={Image_Http_URL}

          style={{height: 200, resizeMode: 'stretch', margin: 5}}

        />

      

    );

  }

 

Complete code

import React, {Component} from 'react';

 

import {View, Text, Image} from 'react-native';

 

export default class ImageLoad extends Component {

  render() {

    let Image_Http_URL = {

      uri: 'https://rrtutors.com/uploads/images/ReactNative-mini-logo.png',

    };

    return (

      

        style={{

          backgroundColor: 'cyan',

          flex: 1,

        }}>

        

          source={Image_Http_URL}

          style={{height: 200, resizeMode: 'stretch', margin: 5}}

        />

      

    );

  }

}

 

 

React Native Image Loading


Subscribe For Daily Updates