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.

This example shows fetching and displaying an image from local storage as well as one from network and even from data provided in the 'data:' uri scheme.

note

For network and data images, you will need to manually specify the dimensions of your image!

Examples

You can also add style to an image:

GIF and WebP support on Android

When building your own native code, GIF and WebP are not supported by default on Android.

You will need to add some optional modules in android/app/build.gradle, depending on the needs of your app.

Groovy

dependencies {
  // If your app supports Android versions before Ice Cream Sandwich (API level 14)
  implementation 'com.facebook.fresco:animated-base-support:1.3.0'

  // For animated GIF support
  implementation 'com.facebook.fresco:animated-gif:3.6.0'

  // For WebP support, including animated WebP
  implementation 'com.facebook.fresco:animated-webp:3.6.0'
  implementation 'com.facebook.fresco:webpsupport:3.6.0'

  // For WebP support, without animations
  implementation 'com.facebook.fresco:webpsupport:3.6.0'
}

note

The version listed above may not be updated in time. Please check packages/react-native/gradle/libs.versions.toml in the main repo to see which fresco version is being used in a specific tagged version.

---

Reference

Props

View Props

Inherits View Props.

---

accessible

When true, indicates the image is an accessibility element.

Type	Default
bool	false

---

accessibilityLabel

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

Type
string

---

alt

A string that defines an alternative text description of the image, which will be read by the screen reader when the user interacts with it. Using this will automatically mark this element as accessible.

Type
string

---

blurRadius

blurRadius: the blur radius of the blur filter added to the image.

Type
number

tip

On IOS, you will need to increase blurRadius by more than 5.

---

capInsets

iOS

When the image is resized, the corners of the size specified by capInsets will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info in the official Apple documentation.

Type
Rect

---

crossOrigin

A string of a keyword specifying the CORS mode to use when fetching the image resource. It works similar to crossorigin attribute in HTML.

• anonymous: No exchange of user credentials in the image request.
• use-credentials: Sets Access-Control-Allow-Credentials header value to true in the image request.

Type	Default
enum('anonymous', 'use-credentials')	'anonymous'

---

defaultSource

A static image to display while loading the image source.

Type
ImageSource

note

On Android, the default source prop is ignored on debug builds.

---

fadeDuration

Android

Fade animation duration in milliseconds.

Type	Default
number	300

---

height

Height of the image component.

Type
number

---

loadingIndicatorSource

Similarly to source, this property represents the resource used to render the loading indicator for the image. The loading indicator is displayed until image is ready to be displayed, typically after the image is downloaded.

Type
ImageSource (uri only), number

---

onError

Invoked on load error.

Type
({nativeEvent: {error} }) => void

---

onLayout

Invoked on mount and on layout changes.

Type
({nativeEvent: LayoutEvent} => void

---

onLoad

Invoked when load completes successfully.

Example: onLoad={({nativeEvent: {source: {width, height}}}) => setImageRealSize({width, height})}

Type
({nativeEvent: ImageLoadEvent} => void

---

onLoadEnd

Invoked when load either succeeds or fails.

Type
() => void

---

onLoadStart

Invoked on load start.

Example: onLoadStart={() => this.setState({loading: true})}

Type
() => void

---

onPartialLoad

iOS

Invoked when a partial load of the image is complete. The definition of what constitutes a "partial load" is loader specific though this is meant for progressive JPEG loads.

Type
() => void

---

onProgress

Invoked on download progress.

Type
({nativeEvent: {loaded, total} }) => void

---

progressiveRenderingEnabled

Android

When true, enables progressive jpeg streaming - https://frescolib.org/docs/progressive-jpegs.

Type	Default
bool	false

---

referrerPolicy

A string indicating which referrer to use when fetching the resource. Sets the value for Referrer-Policy header in the image request. Works similar to referrerpolicy attribute in HTML.

Type	Default
enum('no-referrer', 'no-referrer-when-downgrade', 'origin', 'origin-when-cross-origin', 'same-origin', 'strict-origin', 'strict-origin-when-cross-origin', 'unsafe-url')	'strict-origin-when-cross-origin'

---

ref

A ref setter that will be assigned an element node when mounted.

---

resizeMethod

Android

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