How to Create image Component in React Native

In this quick tutorial, you will learn how to add diffrent types of images in React Native, how to show and use network images, how to show and use static images from the assets directory, and how to show and use local images.

Also, we will certainly show you how to create the image component in react-native from absolute scratch.

A React component is needed for showcasing different images. This react native image component example will help you learn how to show network images, static resources, temporary local images, and images from local disks, such as the camera roll.

This example will take the help of Image module and teach you how to fetch and display an image from local app storage and from the network, and even from base64 image using the data uri.

React Native Image Component Example

Step 1: Install React Native CLI
Step 2: Create React Native App
Step 3: Create Image Component
Step 4: Register Component in App Js
Step 5: Run Development Server

Install React Native CLI

This tutorial is based on expo cli, we assume you have already installed the tool, if not install the Node 12 LTS or higher in your development system using the given command.

Run any of the command (npm or yarn) to begin installing the Expo CLI.

# npm
npm install -g expo-cli

# yarn
yarn global add expo-cli

Create React Native App

Now, you may use the suggested command and begin the installation of the new React Native application. However, you may jump onto the subsequent step if the app is already installed.

expo init RnBlogProject

Further, step inside the app directory.

cd RnBlogProject

Build Image Component

Let us start building image component systematically, for that, and you have to create a new image_component.js file; this file should be created within the reactive native app directory.

Now, update code the in image_component.js file.

import React, { Component } from 'react';

export default class ImageComponent extends Component {
  
};

Display Static Image in React Native

You have to import View, and Image submodules from the main ‘react-native’ module, wrap the image around the View, define the source, pass require tag, and call the image from the project’s asset folder. Make sure to keep the image in the assets directory.

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

export default class ImageComponent extends Component {
	render() {
		return (
		  <View>
			<Image 
			  style={{ width: 150, height: 150 }}
			  source={require('./assets/user.png')}
			/>
		  </View>
		);
	  }
};

Show Network Image

You can easily display images from the server, and you have to pass the source tag, define the uri and add the image path.

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

export default class ImageComponent extends Component {
	render() {
		return (
		  <View>
			<Image 
			  style={{ width: 150, height: 150 }}
			  source={{uri: 'https://www.remotestack.io/wp-content/uploads/2021/09/5273-01.png'}}
			/>
		  </View>
		);
	  }
};

Display Base64 Image

On the other hand, showing a base64 image with data uri is possible in react native; simply add the base64 code in the source attribute.

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

export default class ImageComponent extends Component {
	render() {
		return (
		  <View>
			<Image 
			  style={{ width: 150, height: 150 }}
			  source={{uri: 'data:image/png;base64,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'}}
			/>
		  </View>
		);
	  }
};

Register Component in App Js

Ideally, you must visit the main app js file, in this file you should register the ImageComponent in the primary app js file.

Open the App.js file; and add the following code.


import React from 'react';

import ImageComponent from './image_component.js'


export default function App() {
  return (
    <ImageComponent/>
  );
}

Run Development Server

You have to test the react native app; hence, install the Expo Client on your smartphone. You can get the expo client either from Google Play Store or App Store.

Next, scan the visible QR code but before that make sure to run either of the command.

# npm
npm start

# yarn
yarn start

Wait for some time while your project is being compiled. Ensure that your development machine and smartphone are on the same network; you will see your project on your smartphone if everything goes well.

How to Create Image Component in React Native

Summary

In this guide, we learned how to display different images in React Native. We looked at how to use image and View module, and showed static image, data uri image and network images in react native image component.