Updated March 28, 2023
Introduction to React Native Image
In react native, image is the part of the react native and with the help of this attribute in react native we are able to manage and display the various size of the images, the sources of these images may be from local image(basically it may be images exists on your local system), network images(In this case image will be coming from the third party or from other system or server), etc it allows developers to write design for the image with which we can control the images (allows us to manage images according to device configuration which is different for the different devices).
Syntax
We have three syntaxes based on the source of the image for the react-native images they are given below:
1. Static Image
These images may be from the local computer or it can be any static sources.
<Image source={require('./local_file.png')} />In the above syntax, we are passing the path and name of the file which will display the image on the app.
2. Hybrid Image
These are the sources which comes from react-native and by code.
In the below syntax we are writing some style sheets and one source name in the attribute of uri.
<Image source={{uri: 'name_of_icon'}} style={{width: 55, height: 55}} />3. Network Image
We can say dynamic images also, these images are the sources which comes from the third party or from the other servers(network computers), In case network images they should come with https server because of security instead of simply coming from the http servers. We must define the dimensions for these cases as the images are coming from other sources so they may disturb our app ui, so if we define our own dimensions for the images it will be good.
In the below syntax we are passing url image in the place of uri attribute along with the dimension of the image.
// correct way to do it as we are passing the style with the dimension of the image.
<Image source={{uri: 'https://image_url.png'}}
style={{width: 55, height: 55}} />// not correct way to do as we are not passing the dimension of the image
<Image source={{uri: 'https://image_url.png'}} />4. Uri Data
Uri data images are the images which are embedded in the form of data sources. In these cases, we need to define data section for the uri attribute of image section. Here in these cases, we need to pass dimensions for the images also.
<Image
style={{width: 66, height: 66}}
source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWsHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7sddSxssCQBACARB+21/ab8BEesdsQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqsdYGBgmhivGsdQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRUdsds5ErkJggg=='}}
/>5. Background Image(via Nesting)
It uses background images and set the image using the background image. It allows you to add any component to it as children on it.
In the below syntax code we are displaying the image and we have mention the dimensions for the image.
return (
<ImageBackground source={source for images} style={{width: '51%', height: '51%'}}>
<Text>Into It</Text> //text for image
</ImageBackground>
);Working of an Image in React Native
Working Principle for the react native image can be explained in the below steps:
- This library takes two arguments as the main argument, source, and style.
- Source, which takes the argument as the source of the images as we have discussed, it could be from the local system(static), it could be from the network (from the other computer or server), or possibly it can be from the data source.
- Next argument which passes, in this case, is a style sheet, in case if the image source is coming from any third party or from the other url, in that case, we can be able to manage by defining dimension in our end instead of relying on them to send proper sized images suitable for our app.
- Image library of react native is defined by the core library of react, so when you call this library and pass the arguments for it internally manages the image source and returns/render suitable components for us.
Examples
Given below are the examples:
Example #1
In this example, we are showing the image icon from the other urls(network image).
- We created a class with the name ImageExample and this class is extending the react core component.
- We are extracting an image library from the react-native library(importing).
- Finally, inside the render function, we are simply passing the source and defining the dimension for it.
Code:
import React, { Component } from 'react';
//importing the Image library from react native component.
import {StyleSheet, AppRegistry,Text, View, Image,ImageBackground } from 'react-native';
export default class ImageExample extends Component {
render() {
return (
<ImageBackground source = {{uri:'https://cdn.educba.com/academy/wp-content/uploads/2019/01/cropped-EDUCBA_LOGO.png'}}
style={{width: '100%', height: '100%'}}>
<Image source = {{uri:'https://cdn.educba.com/academy/wp-content/uploads/2019/01/cropped-EDUCBA_LOGO.png'}}
style = {{ width: '80%', height: 70 }}
/>
</ImageBackground>
);
}
}
// you can ignore below line if you have create with react native app
AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage);Output:
Example #2
In this example we are displaying icons for the Plus symbol, this icon has been passed in the form of data. We can see in the code that in the uri section a large string has been passed in the form of data which will finally be converted into a plus image.
Code:
import React, { Component } from 'react';
//import react in our code.
import { Text, Image, View, StyleSheet } from 'react-native';
//import all the components we are going to use.
export default class ImageExample extends Component {
render() {
return (
<View style={imageStyles.containerStyle}>
<Image
style={{ width: 67, height: 59 }}
source={{
uri:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
}}
/>
</View>
);
}
}
//defining the constant for the css design
const imageStyles = StyleSheet.create({
containerStyle: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: 50,
backgroundColor: 'green',
},
});Output:
Conclusion
From this tutorial we learned the uses of the react-native image attribute, we learned we can use this attribute to display images from various sources like network, local, hybrid, etc.
Recommended Articles
This is a guide to React Native Image. Here we discuss the introduction to React Native Image along with the working and respective examples. You may also have a look at the following articles to learn more –
