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.
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.