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

Hello Guys, Today we would 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. So let’s get started. Before going further please read my previous tutorial about Installing React Native on Windows.

Note: There is no need to add internet permission.

Contents in this project Show Image From HTTP URL in React Native :-

Start a fresh React Native project. If you don’t know how then read my this tutorial.
Add Image component in import block.
Create let variable in render block with.
Assign Image Url to let variable using uri .
Add Image tag in render’s return block.
Add Source attribute in Image tag and Assign Let variable name to it.
Add inline style to Image tag.
Complete source code.

1. Start a fresh React Native project. If you don’t know how then read my this tutorial.

2. Add Image component in import block.

<br />
import {<br />
 AppRegistry, Image<br />
} from ‘react-native’;

import {

AppRegistry, Image

} from ‘react-native’;

3. Create let variable in render block with.

<br />
let Image_Http_URL ;

1	let Image_Http_URL ;

4. Assign Image URL to let variable using uri .

<br />
let Image_Http_URL ={ uri: ‘/wp-content/uploads/2017/05/react_thumb_install.png’};

1	let Image_Http_URL ={ uri: ‘/wp-content/uploads/2017/05/react_thumb_install.png’};

5. Add Image tag in render’s return block.

<br />
return (</p>
<p> <Image /></p>
<p> );

return (

);

6. Add Source attribute in Image tag and Assign Let variable name to it.

<br />
return (<br />
 <Image source={Image_Http_URL}} /><br />
 );

return (

);

7. Add inline style to Image tag.

<br />
return (<br />
 <Image source={Image_Http_URL} style = {{height: 200, resizeMode : ‘stretch’, margin: 5 }} /><br />
 );

return (

);

8. Complete Source Code for index.android.js file.

<br />
import React, { Component } from ‘react’;<br />
import {<br />
 AppRegistry, Image<br />
} from ‘react-native’;</p>
<p>export default class Myproject extends Component {<br />
 render() {</p>
<p> let Image_Http_URL ={ uri: ‘/wp-content/uploads/2017/05/react_thumb_install.png’};</p>
<p> return (<br />
 <Image source={Image_Http_URL} style = {{height: 200, resizeMode : ‘stretch’, margin: 5 }} /><br />
 );<br />
 }<br />
}</p>
<p>AppRegistry.registerComponent(‘Myproject’, () => Myproject);