In this article, We are going to see how to add images in react-native. For this, we are going to use the Image component. It is used to add images in react-native.
Syntax:
<Image
source={}
/>Props in Image:
- accessible: If its value is true, then it indicates that the image is an accessibility element.
- accessibilityLabel: It is the text read by the reader when the user interacts with the image.
- blurRadius: It is the radius of the blur filter.
- capInsets: if image is resized, then corners of the size specified by capInsets.
- defaultSource: It is the static image that displays when the image is loading.
- fadeDuration: It is the fade animation.
- loadingIndicatorSource: It represents the resource used to render the loading indicator for the image.
- onError: It is invoked when there is a load error.
- onLayout: It is invoked when there is a change in mount and layout.
- onLoad: It is invoked when the image successfully loaded.
- onLoadEnd: It is invoked when the image load is succeeded or fails.
- onLoadStart: It is invoked when the image starts loading.
- onPartialLoad: It is invoked when the partial image is loaded.
- onProgress: It is invoked on download progress.
- progressiveRenderingEnabled: If true, enables progressive jpeg streaming.
- resizeMethod: It is used to resize the image.
- source: It is the source of the image.
- style: It is used to provide style.
- testID: A unique identifier for this element to be used in UI Automation testing scripts.
Methods in Image:
- abortPrefetch(): It aborts prefetch request.
- getSize(): It retrieve the width and height (in pixels) of an image prior to displaying it.
- getSizeWithHeaders(): It retrieves the width and height (in pixels) of an image prior to displaying it with the ability to provide the headers for the request.
- prefetch(): It is a remote image for later use by downloading it to the disk cache.
- queryCache(): It performs cache interrogation.
- resolveAssetSource(): It resolves an asset reference into an object which has the properties uri, width, and height.
Now let’s start with the implementation:
-
Step 1: Open your terminal and install expo-cli by the following command.
npm install -g expo-cli
-
Step 2: Now create a project by the following command.
expo init myapp
-
Step 3: Now go into your project folder i.e. myapp
cd myapp
Project Structure: It will look like the following.
Example: Now let’s implement the Image. Here we created a button when someone clicks on that button image will show.
App.js
import React , {useState} from 'react';
import { StyleSheet, View ,Image , Button } from 'react-native';
export default function App() {
const [image , setImage] = useState(false);
return (
<View style={styles.container}>
<View style={!image && styles.image}>
<Image source=
{require('E:/Projects/react-native-gfg/myapp/images/download.png')}
/>
</View>
<Button
title={"click"}
onPress={()=>{setImage(!image)}}
/>
</View>
);
} const styles = StyleSheet.create({ container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
image : {
display : "none",
}
}); |
Start the server by using the following command.
npm run android
Output: If your emulator did not open automatically then you need to do it manually. First, go to your android studio and run the emulator. Now start the server again.
Reference: https://reactnative.dev/docs/image