status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-02-25 15:45:32 +00:00
Code Issues Projects Releases Wiki Activity

Send down image source to RCTImageView onLoad callback on iOS

Browse Source 
Summary: This allows the onLoad callback to know which image has actually loaded. This is only for iOS at the moment - implementing this for Android will require quite a bit more work.

Reviewed By: majak

Differential Revision: D3738759

fbshipit-source-id: b1fc2bd0dc5de90096debeab02b8f795739a4547
This commit is contained in:
Pieter De Baets 2016-08-22 10:55:20 -07:00 committed by Facebook Github Bot 4
parent 0af640bfae
commit 84f68c338a
2 changed files with 33 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
Examples/UIExplorer/js/ImageExample.js
View File

@ -61,7 +61,15 @@ var NetworkImageCallbackExample = React.createClass({
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)`)}
onLoad={(event) => {
// Currently this image source feature is only available on iOS.
if (event.nativeEvent.source) {
const url = event.nativeEvent.source.url;
this._loadEventFired(`✔ onLoad (+${new Date() - mountTime}ms) for URL ${url}`);
} else {
this._loadEventFired(`✔ onLoad (+${new Date() - mountTime}ms)`);
}
}}
onLoadEnd={() => {
this._loadEventFired(`✔ onLoadEnd (+${new Date() - mountTime}ms)`);
this.setState({startLoadPrefetched: true}, () => {
@ -78,7 +86,15 @@ var NetworkImageCallbackExample = React.createClass({
source={this.props.prefetchedSource}
style={[styles.base, {overflow: 'visible'}]}
onLoadStart={() => this._loadEventFired(`✔ (prefetched) onLoadStart (+${new Date() - mountTime}ms)`)}
onLoad={() => this._loadEventFired(`✔ (prefetched) onLoad (+${new Date() - mountTime}ms)`)}
onLoad={(event) => {
// Currently this image source feature is only available on iOS.
if (event.nativeEvent.source) {
const url = event.nativeEvent.source.url;
this._loadEventFired(`✔ (prefetched) onLoad (+${new Date() - mountTime}ms) for URL ${url}`);
} else {
this._loadEventFired(`✔ (prefetched) onLoad (+${new Date() - mountTime}ms)`);
}
}}
onLoadEnd={() => this._loadEventFired(`✔ (prefetched) onLoadEnd (+${new Date() - mountTime}ms)`)}
/>
: null}

16
Libraries/Image/RCTImageView.m
View File

@ -36,6 +36,20 @@ static BOOL RCTShouldReloadImageForSizeChange(CGSize currentSize, CGSize idealSi
heightMultiplier > upscaleThreshold || heightMultiplier < downscaleThreshold;
}
/**
* See RCTConvert (ImageSource). We want to send down the source as a similar
* JSON parameter.
*/
static NSDictionary *onLoadParamsForSource(RCTImageSource *source)
{
NSDictionary *dict = @{
@"width": @(source.size.width),
@"height": @(source.size.height),
@"url": source.request.URL.absoluteString,
};
return @{ @"source": dict };
}
@interface RCTImageView ()
@property (nonatomic, strong) RCTImageSource *imageSource;
@ -317,7 +331,7 @@ RCT_NOT_IMPLEMENTED(- (instancetype)init)
}
if (self->_onLoad) {
self->_onLoad(nil);
self->_onLoad(onLoadParamsForSource(source));
}
if (self->_onLoadEnd) {
self->_onLoadEnd(nil);