Sunday, July 1, 2018

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaOTOvRsuivdtguN1ZRNTqrQB8QlHgTSNV5IQdE6GyG0GMRX9qBRWW_l4Y5vsOGyYpbTLKmM1BCVN-trhchnw2dCOweJs0hEHZcEz-CFEztCRkVGMYk3kLQoA1EVcxy8FupLfcp3MTeoJ0/s400/fist+app.jpg'}} 
/> 

Complete Source for App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.headerText}>
          Show Image From HTTP URL In React Native.
        </Text>       
 <Image
   style={{width: '100%', height: 200,resizeMode : 'stretch' }}
   source={{uri: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaOTOvRsuivdtguN1ZRNTqrQB8QlHgTSNV5IQdE6GyG0GMRX9qBRWW_l4Y5vsOGyYpbTLKmM1BCVN-trhchnw2dCOweJs0hEHZcEz-CFEztCRkVGMYk3kLQoA1EVcxy8FupLfcp3MTeoJ0/s400/fist+app.jpg'}} 
 />    
      </View>
   
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  headerText: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
 fontWeight: 'bold'
  },
  
});

Screenshot :


Download Link :
https://github.com/skptricks/React-Native/tree/master/Show%20Image%20From%20HTTP%20URL%20in%20React%20Native

Video Demo :





No comments:

Post a Comment