Image

A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll.

Import

import { Image } from 'react-native';

Basic Usage

import React from 'react';
import { Image, StyleSheet } from 'react-native';

function BasicImage() {
  return (
    <Image
      source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
      style={styles.image}
    />
  );
}

const styles = StyleSheet.create({
  image: {
    width: 50,
    height: 50,
  },
});

Props

Source Props

ImageSource

required

The image source (either a remote URL or a local file resource). This prop can also contain several remote URLs, specified together with their width and height. The native side will then choose the best URI to display based on the measured size of the image container.Supported formats: png, jpg, jpeg, bmp, gif, webp (Android only), psd (iOS only)

string

A string representing the resource identifier for the image. Similar to src from HTML.

string

Similar to srcset from HTML. Specifies multiple image sources for different display densities.

Display Props

'cover' | 'contain' | 'stretch' | 'repeat' | 'center'

Determines how to resize the image when the frame doesn’t match the raw image dimensions.

cover - Scale the image uniformly (maintain aspect ratio) so that both dimensions will be equal to or larger than the corresponding dimension of the view
contain - Scale the image uniformly so that both dimensions will be equal to or less than the corresponding dimension of the view
stretch - Scale width and height independently, may change the aspect ratio of the src
repeat - Repeat the image to cover the frame of the view (iOS only)
center - Scale the image down so that it is completely visible, if bigger than the view area

number

Width of the image component.

number

Height of the image component.

ImageStyle

Styles to apply to the image.

Visual Props

number

The blur radius of the blur filter added to the image.

color

Changes the color of all the non-transparent pixels to the tintColor.

Accessibility Props

boolean

When true, indicates the image is an accessibility element.

string

The text that’s read by the screen reader when the user interacts with the image.

string

Alias for accessibilityLabel. The text that’s read by the screen reader when the user interacts with the image.

string

Alias for accessibilityLabel.

Network Props

'anonymous' | 'use-credentials'

Adds the CORS related header to the request. Similar to crossorigin from HTML.

string

A string indicating which referrer to use when fetching the resource. Similar to referrerpolicy from HTML.Options: ‘no-referrer’, ‘no-referrer-when-downgrade’, ‘origin’, ‘origin-when-cross-origin’, ‘same-origin’, ‘strict-origin’, ‘strict-origin-when-cross-origin’, ‘unsafe-url’

Event Handlers

(event: ImageLoadEvent) => void

Invoked when load completes successfully. Event data includes the image source dimensions and URI.

() => void

Invoked on load start.

() => void

Invoked when load either succeeds or fails.

(event: ImageErrorEvent) => void

Invoked on load error with {nativeEvent: {error}}.

(event: LayoutEvent) => void

Invoked on mount and layout changes with {nativeEvent: { layout: {x, y, width, height}}}.

Identification Props

string

A unique identifier for this element to be used in UI Automation testing scripts.

Platform-Specific Props

iOS
Android

ImageSource

A static image to display while loading the image source.

() => void

Invoked when a partial load of the image is complete.

(event: ImageProgressEvent) => void

Invoked on download progress with {nativeEvent: {loaded, total}}.

Insets

When the image is resized, the corners specified by capInsets will stay a fixed size, but the center content and borders will be stretched.

ImageSource

The resource used to render the loading indicator for the image, displayed until image is ready to be displayed, typically after when it got downloaded from network.

boolean

Enable progressive rendering of JPEG images.

number

Duration of the fade-in animation in milliseconds.

'auto' | 'resize' | 'scale' | 'none'

default:"'auto'"

The mechanism that should be used to resize the image when the image’s dimensions differ from the image view’s dimensions.

auto - Use heuristics to pick between resize and scale
resize - A software operation which changes the encoded image in memory before it gets decoded
scale - The image gets drawn downscaled or upscaled (usually hardware accelerated)
none - No sampling is performed

number

default:"1.0"

When the resizeMethod is set to resize, the destination dimensions are multiplied by this value.

Examples

Network Image

import { Image, StyleSheet } from 'react-native';

function NetworkImage() {
  return (
    <Image
      source={{
        uri: 'https://reactnative.dev/img/tiny_logo.png',
        width: 64,
        height: 64,
      }}
      style={styles.image}
    />
  );
}

const styles = StyleSheet.create({
  image: {
    width: 64,
    height: 64,
  },
});

Local Image

import { Image, StyleSheet } from 'react-native';

function LocalImage() {
  return (
    <Image
      source={require('./assets/logo.png')}
      style={styles.image}
    />
  );
}

const styles = StyleSheet.create({
  image: {
    width: 100,
    height: 100,
  },
});

Image with Loading States

import { Image, ActivityIndicator, View, StyleSheet } from 'react-native';
import { useState } from 'react';

function ImageWithLoading() {
  const [loading, setLoading] = useState(true);

  return (
    <View style={styles.container}>
      {loading && <ActivityIndicator style={styles.loader} />}
      <Image
        source={{ uri: 'https://example.com/image.jpg' }}
        style={styles.image}
        onLoadStart={() => setLoading(true)}
        onLoadEnd={() => setLoading(false)}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: 200,
    height: 200,
  },
  loader: {
    position: 'absolute',
    left: '50%',
    top: '50%',
  },
  image: {
    width: 200,
    height: 200,
  },
});

Multiple Resolution Images

import { Image, StyleSheet } from 'react-native';

function MultiResImage() {
  return (
    <Image
      source={[
        { uri: 'https://example.com/image@1x.jpg', width: 100, height: 100 },
        { uri: 'https://example.com/image@2x.jpg', width: 200, height: 200 },
        { uri: 'https://example.com/image@3x.jpg', width: 300, height: 300 },
      ]}
      style={styles.image}
    />
  );
}

const styles = StyleSheet.create({
  image: {
    width: 100,
    height: 100,
  },
});

Core Components

User Interface

List Components

Android Components

iOS Components

Import

Basic Usage

Props

Source Props

Display Props

Visual Props

Accessibility Props

Network Props

Event Handlers

Identification Props

Platform-Specific Props

Examples

Network Image

Local Image

Image with Loading States

Multiple Resolution Images

​Import

​Basic Usage

​Props

​Source Props

​Display Props

​Visual Props

​Accessibility Props

​Network Props

​Event Handlers

​Identification Props

​Platform-Specific Props

​Examples

​Network Image

​Local Image

​Image with Loading States

​Multiple Resolution Images

Import

Basic Usage

Props

Source Props

Display Props

Visual Props

Accessibility Props

Network Props

Event Handlers

Identification Props

Platform-Specific Props

Examples

Network Image

Local Image

Image with Loading States

Multiple Resolution Images