Show Image from Local System in React Native Tutorial from Scratch

I am going to describe and show you, how we can show Images in react native from local system through this tutorial with complete source code from scratch. Images play very big and important role in web, desktop and mobile applications and also help you to build interactive and professional apps. Fortunately, react native also supports to display images in your app and provides many more customization options.

In react native, we can show images from local system as well as remote system or from server in our app. In this tutorial, I am going to explain about how we can show images from local system in our react native app.

Now, let’s begin.

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: Create a folder under your react native project directory. Suppose your react native project name is Project then create any named folder under Project ( Project -> <your_folder> ) and place your image file inside this folder.

You can download this nice android logo for testing purpose and use according to your requirement.

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

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

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

Through Image  component we can show images in our react native app.

Step #5: Create a class and implement it’s render  and return  methods.

class App extends Component
{
    render()
    {
        return(
            <View style = { styles.container }>
                <Image source = { require('./assets/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 reqiure  parameter, which holds the url of the local image.

Step #6: Implement styles for 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 = { require('./assets/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:

Leave a Reply

Your email address will not be published. Required fields are marked *