Show Image from Remote System in React Native Tutorial from Scratch

In react native, we can show images from local system as well as from remote system. Through this tutorial, I am going to show you how we can display images from remote system or server in our react native app with complete source code.

Now, let’s get started…

Step #1: Create a new react native project, if you don’t know how to create a project in react native just follow this tutorial.

Step #2: Open your project in your favourite code editor( Visual Studio Code, Sublime etc. ) and open index.android.js / index.ios.js  file. Remove all the code from this file, because we are going to start from scratch.

Step #3: Import all required components from react and react-native .

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

The Image  component is used to display images in our react native app.

Step #5: Call render  method and return  a Image  component wrapped by View  component.

class App extends Component
{
    render()
    {
        return(
            <View style = { styles.container }>
                <Image source = {{ uri: 'https://tutorialscapital.com/wp-content/uploads/2017/06/android-logo.png' }} style = { styles.image }/>
            </View>
        );
     }
}

Explanation:

• Image component supports a very important property, which is responsible to show images named as source and source takes a uri  parameter, which holds the url of the remote image.

Step #6: Implement styles for your components.

const styles = StyleSheet.create(
{
     container:
     {
         flex: 1,
         alignItems: 'center', // Used to set Image Component Horizontally Center
         justifyContent: 'center', // Used to set Image Component Vertically Center
         backgroundColor: '#ecf0f1'
     },
     
     image:
     {
         height: '45%',
         width: '100%',
         resizeMode: 'contain'
     }
});

Explanation:

• Image component also supports resizeMode  property to set image in a layout so resizeMode:’contain’ maintains the image dimensions less than or equal to it’s container’s dimensions and maintains aspect ratio of the image.

Step #6: Register your app with AppRegistry .

AppRegistry.registerComponent('App', () => App);

Complete Source Code for index.android.js / index.ios.js:

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

class App extends Component
{
    render()
    {
        return(
            <View style = { styles.container }>
                <Image source = {{ uri: 'https://tutorialscapital.com/wp-content/uploads/2017/06/android-logo.png' }} style = { styles.image }/>
            </View>
        );
     }
}

const styles = StyleSheet.create(
{
     container:
     {
         flex: 1,
         alignItems: 'center', // Used to set Image Component Horizontally Center
         justifyContent: 'center', // Used to set Image Component Vertically Center
         backgroundColor: '#ecf0f1'
     },
     
     image:
     {
         height: '45%',
         width: '100%',
         resizeMode: 'contain'
     }
});

AppRegistry.registerComponent('App', () => App);

Step #7: Run your app with react-native run-android  for android and react-native run-ios  for iOS devices.

• Output in iOS emulator:

• Output in Android emulator: