Skip to content
Related Articles

Related Articles

Improve Article

React Native Image Component

  • Last Updated : 10 May, 2021
Geek Week

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :