Skip to content
Related Articles

Related Articles

React Native Image Component

View Discussion
Improve Article
Save Article
  • Last Updated : 10 May, 2021
View Discussion
Improve Article
Save Article

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.



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.



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=
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. 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!