₦airaland Forum

Show Image From HTTP URL In React Native

In this tutorial we will explain how to display image in react native application using HTTP URL. This example covers, fetching and displaying an image from network location using Image Component of react native.

Point To Remember while loading image in Image Component.
Note that for network and data images, you will need to manually specify the dimensions of your image!
Show Image From HTTP URL in React Native

App.js
This Component helps to display image from HTTP URL. Follow the below steps, that helps to configure Image Component in App Component.

1. Add Image Component in import block.
import {
Platform,
StyleSheet,
Text,
View,
Image
} from 'react-native';

2. Add Image tag in render’s return block.
Source attribute in Image tag, where we are specifying the image location.
Also we have added inline style to Image tag, that helps to set the image size as per the device width.
<Image
style={{width: '100%', height: 200,resizeMode : 'stretch' }}
source={{uri: 'https://4.bp..com/-krdeTqQLML8/Wyf2oV7eedI/AAAAAAAABpI/OZ759swV7L8wWtt2pwBXIgp6aPz33r01gCLcBGAs/s400/fist%2Bapp.jpg'}}
/>


https://www.youtube.com/watch?v=qArk3mRoO7c