React Native Image Component Tutorial with Examples

In this article, we are going to have an idea about how to show various image types in React Native application using Image Component.

This tutorial is going to be completely sole satisfying for web developers as it highlights on displaying various types of images using React Native Image Component.

Types of images we are going to cover in this tutorial:

• Static resources
• Network images
• Temporary local images
• Local disk images like camera roll

React Native Image Example

Prerequisite

Getting started is easy; all we need are the following frameworks, packages, tools etc.

• NPM
• Node
• Text Editor
• React-Native
• React-Native CLI
• Android Studio (For Testing)

Create React Native Project

Run command to install React Native CLI globally on your device.

npm install -g react-native-cli

Run command to install new React Native project.

react-native init reactnativeimage

Run command to go inside the project folder.

cd reactnativeimage

Adding Image Component

Displaying images in React Native starts with importing Image API from ‘react-native’. This component needs to be imported on the top part of your React Native template.

Add the following code in App.js file.

import {  View, Text, Image, StyleSheet } from 'react-native'

Moreover, along with Image Component we also imported View, Text, StyleSheet Components.

Let’s checkout what these APIs do in React Native application.

API	Description
View:	This is a container that supports layout with flexbox, style, some touch handling, and accessibility controls.
Text:	This component helps in displaying the text.
StyleSheet:	This API helps adding styling in React Native.
Image:	Shows several types of images, including network images, static resources, temporary local images, and images from local disks, such as the camera roll.

Show Static Image

First to display the image we have to create an ‘assets’ folder at the root of your project folder, then keep some images here.

Next, define the view component and set the Image component in it.

You can easily add the custom styling in Image component. As you can see, we have set the width, height and margin-bottom properties to style Image component.

In the source tag, we passed the require tag and set the image path.

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

export default class App extends Component {
  render() {
    return (
      <View>
        <Image 
          style={{ width: 100, height: 100, marginBottom: 15 }}
          source={require('./assets/flower.png')}
        />
      </View>
    );
  }
};

Icons made by Freepik from www.flaticon.com

Displaying Network Images

To display images via Network requests, we have to use source property instead of require tag. The same way you can add the custom CSS properties to style the Image Component in React Native.

You can place this code in any of your React Native template to show the image.

Please note: If showing image via network request or data uri then you must set the particular dimension for image.

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

export default class App extends Component {
  render() {
    return (
      <View>
        <Image 
          style={{ width: 100, height: 100 }}
          source={{uri: 'https://www.positronx.io/wp-content/uploads/2020/02/react-native-150x150-1.jpg'}}
        />
      </View>
    );
  }
};

Showing Data URI Images

Given below example help us understand how to display image via data URI, It only requires to mention dimension for displaying data URI Image.

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

export default class App extends Component {
  render() {
    return (
      <View>
        <Image 
          style={{ width: 100, height: 100 }}
          source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
        />
      </View>
    );
  }
};

Display SVG Image in React Native

Image component in react-native doesn’t yet support svg file type. So react-native-remote-svg package provides an Image component that supports both svg and png file types.

We need to install the package using either of the command.

# npm
npm install react-native-remote-svg

# yarn
yarn add react-native-remote-svg

Next, we need to import Image from ‘react-native-remote-svg’ package.

import Image from 'react-native-remote-svg'

We can use the SVG Image component like we commonly use:

import React, { Component } from 'react';
import { View } from 'react-native'
import Image from 'react-native-remote-svg';

export default class App extends Component {
  render() {
    return (
      <View>
        <Image
          source={{ uri: 'https://www.positronx.io/wp-content/themes/positronx/img/logo-positronx-white.svg' }}
          style={{ width: 216, height: 34 }}
        />;
      </View>
    );
  }
};

It also supports Data URI images.

import Image from 'react-native-remote-svg';

<Image
  source={{
    uri: `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"  viewBox="0 0 100 100">
      <ellipse data-custom-shape="ellipse" cx="50" cy="50" rx="50" ry="50" fill="green"  stroke="#00FF00" stroke-width ="2" />
    </svg>`,
  }}
  style={{ width: 150, height: 150 }}
/>;

The Final APP.js

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

// SVG API
import Image from 'react-native-remote-svg';

export default class App extends Component {
  render() {
    return (
      <View style={styles.Container}>
        <Image 
          style={{ width: 100, height: 100, marginBottom: 15 }}
          source={require('./assets/flower.png')}
        />

        <Image 
          style={{ width: 100, height: 100 }}
          source={{uri: 'https://www.positronx.io/wp-content/uploads/2020/02/react-native-150x150-1.jpg'}}
        />

        <Image 
          style={{ width: 100, height: 100 }}
          source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
        />

        <Image
          source={{ uri: 'https://www.positronx.io/wp-content/themes/positronx/img/logo-positronx-white.svg' }}
          style={{ width: 216, height: 34 }}
        />;
      </View>
    );
  }
};

const styles = StyleSheet.create({

    Container: {
      flex: 1,
      padding: 20,
      alignItems: 'center',
      justifyContent: 'center',
      paddingTop: (Platform.OS === 'ios') ? 25 : 0
    }

});

Start React Native Application in Emulator

Run React Native App on Android emulator using Android Studio.

I guess you have already installed Java SDK in your device. You can confirm the version by using the below command.

java -version

# openjdk version "1.8.0_242"
# OpenJDK Runtime Environment (AdoptOpenJDK)(build 1.8.0_242-b08)
# OpenJDK 64-Bit Server VM (AdoptOpenJDK)(build 25.242-b08, mixed mode)

Click to download Android Studio for Android Image Example.

Set ANDROID_HOME, JAVA_HOME, ANDROID_HOME, ANDROID_SDK_ROOT, ANDROID_AVD_HOME, ANDROID_SDK, and platform-tools env variables in .bash_profile.

Open the .bash_profile file.

vim  ~/.bash_profile

Add the following variables in .bash_profile file, replace your computer name with .

export JAVA_HOME=$(/usr/libexec/java_home)
export ANDROID_HOME=~/Library/Android/sdk       
export ANDROID_SDK_ROOT=~/Library/Android/sdk       
export ANDROID_AVD_HOME=~/.android/avd export

export ANDROID_SDK=/Users/<your-computer-name>/Library/Android/sdk
export PATH=/Users/<your-computer-name>/Library/Android/sdk/platform-tools:$PATH

Press ‘esc’ key and then type :wq to save and close the .vim file.

Compile ~/.bash_profile file.

source ~/.bash_profile

Run command to validate the path.

echo $JAVA_HOME

# /Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home

Head over to an android folder in your project and create local.properties file and add the following code inside of it.

sdk.dir = /Users/digamber/Library/Android/sdk

Now, start the Android Virtual Device Manager, and run the following command to start the app.

react-native run-android

Conclusion

Finally, we have completed React Native Image Component Tutorial. In this tutorial we learned how to display various types of images using Image Component API.

We hope you loved this article, don’t forget to share with others.

You can get the full code for this tutorial on this GitHub repository.

Happy Coding!