React Native Image Component
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
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