React Native 0.

52-RC Search

Docs Community Blog GitHub React

› Components

Image EDIT

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 that for network and data images, you will need to manually specify the
dimensions of your image!

1 import React, { Component } from 'react';

2 import { AppRegistry, View, Image } from 'react-native'
3

4 export default class DisplayAnImage extends Component {

5 render() {
6 return (
7 <View>
8 <Image
9 source={require('/react-native/img/favicon.png'
10 />
11 <Image
12 style={{width: 50, height: 50}}
13 source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.
14 />
15 <Image
16 style={{width: 66, height: 58}}
17 source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAA
18 />
19 </View>
20 );
21 }
You can also add style to an image:
1 import React, { Component } from 'react';
2 import { AppRegistry, View, Image, StyleSheet } from
3

4 const styles = StyleSheet.create({

5 stretch: {
6 width: 50,
7 height: 200
8 }
9 });
10

11 export default class DisplayAnImageWithStyle extends

12 render() {
13 return (
14 <View>
15 <Image
16 style={styles.stretch}
17 source={require('/react-native/img/favicon.png'
18 />
19 </View>
20 );
21 }

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.

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

// For animated GIF support

compile 'com.facebook.fresco:animated-gif:1.3.0'

// For WebP support, including animated WebP

compile 'com.facebook.fresco:animated-webp:1.3.0'
compile 'com.facebook.fresco:webpsupport:1.3.0'

// For WebP support, without animations

compile 'com.facebook.fresco:webpsupport:1.3.0'
 }

Also, if you use GIF with ProGuard, you will need to add this rule in proguard-rules.pro :

-keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl {

public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactor
y, com.facebook.imagepipeline.core.ExecutorSupplier);
}

Props

style

blurRadius

onLayout

onLoad

onLoadEnd

onLoadStart

resizeMode

source

onError

testID

resizeMethod

accessibilityLabel

accessible

capInsets

defaultSource

onPartialLoad

onProgress

Methods
 getSize

prefetch

Reference

Props

style

ImageResizeMode is an Enum for different image resizing modes, set via the
resizeMode style property on Image components. The values are contain, cover,
stretch, center, repeat.

TYPE REQUIRED

style No

Layout Props...

Shadow Props...

Transforms...

borderTopRightRadius: number
backfaceVisibility: enum('visible', 'hidden')

borderBottomLeftRadius: number

borderBottomRightRadius: number

borderColor: color

borderRadius: number

borderTopLeftRadius: number

backgroundColor: color

borderWidth: number

opacity: number

overflow: enum('visible', 'hidden')

resizeMode: Object.keys(ImageResizeMode)

tintColor: color

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

overlayColor: string (Android)

When the image has rounded corners, specifying an overlayColor will cause the remaining
space in the corners to be filled with a solid color. This is useful in cases which are not
supported by the Android implementation of rounded corners:

Certain resize modes, such as 'contain'

Animated GIFs

A typical way to use this prop is with images displayed on a solid background and setting
 the overlayColor to the same color as the background.

For details of how this works under the hood, see http://frescolib.org/rounded-corners-
and-circles.md

blurRadius

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

TYPE REQUIRED

number No

onLayout

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

TYPE REQUIRED

function No

onLoad

Invoked when load completes successfully.

TYPE REQUIRED

function No

onLoadEnd
Invoked when load either succeeds or fails.

TYPE REQUIRED

function No

onLoadStart

Invoked on load start.

e.g., onLoadStart={(e) => this.setState({loading: true})}

TYPE REQUIRED

function No

resizeMode

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

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

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 it's size and
 aspect ratio. (iOS only)

TYPE REQUIRED

enum('cover', 'contain', 'stretch', 'repeat', No

'center')

source

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 and potentially with scale/other URI arguments. The native side will then choose the
best uri to display based on the measured size of the image container. A cache property
can be added to control how networked request interacts with the local cache.

The currently supported formats are png, jpg, jpeg, bmp, gif, webp (Android only), psd
(iOS only).

TYPE REQUIRED

ImageSourcePropType No

onError

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

TYPE REQUIRED

function No

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

TYPE REQUIRED

string No

resizeMethod

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

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.

More details about resize and scale can be found at http://frescolib.org/resizing-

rotating.md.

TYPE REQUIRED PLATFORM

enum('auto', 'resize', 'scale') No Android

accessibilityLabel

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

node No iOS

accessible

When true, indicates the image is an accessibility element.

TYPE REQUIRED PLATFORM

bool No iOS

capInsets

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 REQUIRED PLATFORM

object: {top: number, left: number, bottom: No iOS

number, right: number}

defaultSource

A static image to display while loading the image source.

uri - a string representing the resource identifier for the image, which should be either a
local file path or the name of a static image resource (which should be wrapped in the
require('./path/to/image.png') function).

width, height - can be specified if known at build time, in which case these will be used
 to set the default <Image/> component dimensions.

scale - used to indicate the scale factor of the image. Defaults to 1.0 if unspecified,
meaning that one image pixel equates to one display point / DIP.

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

TYPE REQUIRED PLATFORM

object: {uri: string,width: number,height: No iOS

number,scale: number}, ,number

onPartialLoad

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 REQUIRED PLATFORM

function No iOS

onProgress

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

TYPE REQUIRED PLATFORM

function No iOS

Methods

getSize()

static getSize(uri: string, success: function, [failure]: function):

Retrieve the width and height (in pixels) of an image prior to displaying it. This method can fail
if the image cannot be found, or fails to download.

In order to retrieve the image dimensions, the image may first need to be loaded or
downloaded, after which it will be cached. This means that in principle you could use this
method to preload images, however it is not optimized for that purpose, and may in future be
implemented in a way that does not fully load/download the image data. A proper, supported
way to preload images will be provided as a separate API.

Does not work for static image resources.

Parameters:

NAME TYPE REQUIRED DESCRIPTION

uri string Yes The location of the

image.

success function Yes The function that will

be called if the image
was successfully
found and width and
height retrieved.

failure function No The function that will

be called if there was
an error, such as
failing toto retrieve the
image.

prefetch()

static prefetch(url: string):

Prefetches a remote image for later use by downloading it to the disk cache

Parameters:

NAME TYPE REQUIRED DESCRIPTION

url string Yes The remote location of
the image.

← FLATLIST KEYBOARDAVOIDINGVIEW →
Docs CommunityHelp More

Getting Who's Stack Blog

Started using Overflow React

React
Learn the ReactifluxGitHub
Native?
Basics Chat
Star
Meetups
Components Latest
and APIs Facebook Releases
Group
More Feature
Resources Twitter Requests

Copyright © 2017 Facebook Inc.