​

Examples

import React from 'react';
import {Image, StyleSheet} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  tinyLogo: {
    width: 50,
    height: 50,
  },
  logo: {
    width: 66,
    height: 58,
  },
});

const DisplayAnImage = () => (
  <SafeAreaProvider>
    <SafeAreaView style={styles.container}>
      <Image
        style={styles.tinyLogo}
        source={require('@expo/snack-static/react-native-logo.png')}
      />
      <Image
        style={styles.tinyLogo}
        source={{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
        }}
      />
      <Image
        style={styles.logo}
        source={{
          uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
        }}
      />
    </SafeAreaView>
  </SafeAreaProvider>
);

export default DisplayAnImage;

import React from 'react';
import {Image, StyleSheet} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  stretch: {
    width: 50,
    height: 200,
    resizeMode: 'stretch',
  },
});

const DisplayAnImageWithStyle = () => (
  <SafeAreaProvider>
    <SafeAreaView style={styles.container}>
      <Image
        style={styles.stretch}
        source={require('@expo/snack-static/react-native-logo.png')}
      />
    </SafeAreaView>
  </SafeAreaProvider>
);

export default DisplayAnImageWithStyle;

​

GIF and WebP support on Android

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'
}

​

Reference

​

Props

​

View Props

​

accessible

​

accessibilityLabel

​

alt

​

blurRadius

​

capInsets iOS Vega

​

crossOrigin

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

​

defaultSource

​

defaultFillColor Vega

​

defaultColor Vega

​

fadeDuration Android Vega

​

height

​

loadingIndicatorSource

​

onError

​

onLayout

​

onLoad

​

onLoadEnd

​

onLoadStart

​

onPartialLoad iOS

​

onProgress iOS Vega

​

progressiveRenderingEnabled Android Vega

​

referrerPolicy

​

ref

​

resizeMethod Android Vega

• auto: Use heuristics to pick between resize and scale.
• resize: A software operation which changes the encoded image in memory before it gets decoded. This should be used instead of scale when the image is much larger than the view.
• scale: The image gets drawn downscaled or upscaled. Compared to resize, scale is faster (usually hardware accelerated) and produces higher quality images. This should be used if the image is smaller than the view. It should also be used if the image is slightly bigger than the view.
• none: No sampling is performed and the image is displayed in its full resolution. This should only be used in rare circumstances because it is considered unsafe as Android will throw a runtime exception when trying to render images that consume too much memory.

​

resizeMode

• cover: Scale the image uniformly (maintain the image’s aspect ratio) so that
  • both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding)
  • at least one dimension of the scaled image will be equal to the corresponding dimension of the view (minus padding)
• contain: Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).
• stretch: Scale width and height independently, This may change the aspect ratio of the src.
• repeat: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio, unless it is larger than the view, in which case it will be scaled down uniformly so that it is contained in the view.
• center: Center the image in the view along both dimensions. If the image is larger than the view, scale it down uniformly so that it is contained in the view.

​

resizeMultiplier Android

​

source

​

src

​

srcSet

​

style

​

testID

​

tintColor

​

width

​

Methods

​

abortPrefetch() Android Vega

static abortPrefetch(requestId: number);

​

getSize()

static getSize(uri: string): Promise<{width: number, height: number}>;

​

getSizeWithHeaders()

static getSizeWithHeaders(
  uri: string,
  headers: {[index: string]: string}
): Promise<{width: number, height: number}>;

​

prefetch()

await Image.prefetch(url);

​

queryCache()

static queryCache(
  urls: string[],
): Promise<Record<string, 'memory' | 'disk' | 'disk/memory'>>;

​

resolveAssetSource()

static resolveAssetSource(source: ImageSourcePropType): {
  height: number;
  width: number;
  scale: number;
  uri: string;
};

​

Type Definitions

​

ImageCacheEnum iOS Vega

• default: Use the native platforms default strategy.
• reload: The data for the URL will be loaded from the originating source. No existing cache data should be used to satisfy a URL load request.
• force-cache: The existing cached data will be used to satisfy the request, regardless of its age or expiration date. If there is no existing data in the cache corresponding the request, the data is loaded from the originating source.
• only-if-cached: The existing cache data will be used to satisfy a request, regardless of its age or expiration date. If there is no existing data in the cache corresponding to a URL load request, no attempt is made to load the data from the originating source, and the load is considered to have failed.

​

ImageLoadEvent

​

Source Object

​

ImageSource

• number - opaque type returned by something like require('./image.jpg').