diff --git a/docs/image.html b/docs/image.html index d1443b3f8a7..799771a2829 100644 --- a/docs/image.html +++ b/docs/image.html @@ -14,7 +14,7 @@ images from local disk, such as the camera roll.

Example usage:

/View> ); },

Edit on GitHubProps #

onLayout function #

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

resizeMode enum('cover', 'contain', 'stretch') #

Determines how to resize the image when the frame doesn't match the raw +{nativeEvent: {layout: {x, y, width, height}}}.

onLoad function #

Invoked when load completes successfully

onLoadEnd function #

Invoked when load either succeeds or fails

onLoadStart function #

Invoked on load start

resizeMode enum('cover', 'contain', 'stretch') #

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

source {uri: string}, number #

uri is a string representing the resource identifier for the image, which could be an http address, a local file path, or the name of a static image resource (which should be wrapped in the require('image!name') function).

style style #

Flexbox...
Transforms...
resizeMode Object.keys(ImageResizeMode)
backgroundColor string
borderColor string
borderWidth number
borderRadius number
overflow enum('visible', 'hidden')
tintColor string
opacity number

testID string #

A unique identifier for this element to be used in UI Automation @@ -24,7 +24,7 @@ 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 on Apple documentation

iosdefaultSource {uri: string} #

A static image to display while downloading the final image off the -network.

iosonError function #

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

iosonLoad function #

Invoked when load completes successfully

iosonLoadEnd function #

Invoked when load either succeeds or fails

iosonLoadStart function #

Invoked on load start

iosonProgress function #

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

Edit on GitHubExamples #

'use strict'; +network.

iosonError function #

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

iosonProgress function #

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

Edit on GitHubExamples #

'use strict'; var React = require('react-native'); var { @@ -39,6 +39,44 @@ network.

var ImageCapInsetsExample = require('./ImageCapInsetsExample'); +var NetworkImageCallbackExample = React.createClass({ + getInitialState: function() { + return { + events: [], + }; + }, + + componentWillMount() { + this.setState({mountTime: new Date()}); + }, + + render: function() { + var { mountTime } = this.state; + + return ( + <View> + <Image + source={this.props.source} + style={[styles.base, {overflow: 'visible'}]} + onLoadStart={() => this._loadEventFired(`✔ onLoadStart (+${new Date() - mountTime}ms)`)} + onLoad={() => this._loadEventFired(`✔ onLoad (+${new Date() - mountTime}ms)`)} + onLoadEnd={() => this._loadEventFired(`✔ onLoadEnd (+${new Date() - mountTime}ms)`)} + /> + + <Text style={{marginTop: 20}}> + {this.state.events.join('\n')} + </Text> + </View> + ); + }, + + _loadEventFired(event) { + this.setState((state) => { + return state.events = [...state.events, event]; + }); + } +}); + var NetworkImageExample = React.createClass({ watchID: (null: ?number), @@ -103,6 +141,14 @@ exports.examples ); }, }, + { + title: 'Image Loading Events', + render: function() { + return ( + <NetworkImageCallbackExample source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1'}}/> + ); + }, + }, { title: 'Error Handler', render: function() {