React Native Image Component

Last Updated : 10 May, 2021

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.