In this tutorial we will learn how to load image in React Native from a live URL or from the assets folder. It will contain a string if using a live URL or the path of the image from the folder.
Types of Images in React Native
Mainly there are two types of images which are used in every application. Either from a live server which contains a string URL or can be from the local folder. We will create examples for both types of images.
- Image from the live URL
- Image from the local folder
1. Image In Class Component In React Native
In this example we loaded both type images, Network image and local disk image.
import React, { Component } from "react";
import { View, StyleSheet, Image, Text } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
export default class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<SafeAreaView style={styles.mainView}>
<View style={styles.mainView}>
{/* Image from the assets folder */}
<Image source={require('../assets/logo.png')} />
{/* Image from the URL */}
<Image
style={styles.tinyLogo}
source={{ uri: 'https://www.fluttertpoint.com/wp-content/uploads/2021/09/cropped-FlutterTPoint-Logo-3-220x54.png' }}
/>
<Image
style={styles.logo}
source={{ uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==' }}
/>
</View>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
mainView: {
flex: 1,
margin: 15,
justifyContent: 'center',
},
tinyLogo: {
marginTop: 20,
width: 300,
height: 60,
},
logo: {
marginTop: 50,
width: 66,
height: 58,
},
})
To browse the image from the local disk first create a folder and put the image in that folder. You can copy and paste from other folder. After that provide the path of that image inside the require which is a property of source of Image tag. Simply create an assets folder and paste the images there. Assets folder is commonly created in general projects to store the media files.
2. React Native Image in Functional Component
The image tag which loads the image from the URL or from the local folder is remain same as in class component. Only the functional component changes.
import React, { Component } from "react";
import { View, StyleSheet, Image, Text } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
const Home =()=>{
return (
<SafeAreaView style={styles.mainView}>
<View style={styles.mainView}>
{/* Image from the assets folder */}
<Image source={require('../assets/logo.png')} />
{/* Image from the URL */}
<Image
style={styles.tinyLogo}
source={{ uri: 'https://www.fluttertpoint.com/wp-content/uploads/2021/09/cropped-FlutterTPoint-Logo-3-220x54.png' }}
/>
<Image
style={styles.logo}
source={{ uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==' }}
/>
</View>
</SafeAreaView>
);
}
export default Home;
const styles = StyleSheet.create({
mainView: {
flex: 1,
margin: 15,
justifyContent: 'center',
},
tinyLogo: {
marginTop: 20,
width: 300,
height: 60,
},
logo: {
marginTop: 50,
width: 66,
height: 58,
},
})
In the above code we loaded two types of images. First one is from the live URL and another one is from the local disk folder. The result is shown in below screenshot.
Result:
You can learn more about this topic in react native from here. Learn more react native tutorials.
Thank you for visiting this tutorial hope you learn about loading Image in React Native. For any query please comment in the comment section below.