From 74ab8f6e5a61999f1132351ff52df43c91360a09 Mon Sep 17 00:00:00 2001 From: Tim Yung Date: Tue, 16 Jun 2020 14:58:01 -0700 Subject: [PATCH] RN: Consistent API for Image Events Summary: Changes the `onLoad` and `onError` events on `Image` to be consistent with each other and with the `ImageSource` type. Changelog: [Android][Breaking] - On `Image`, `onLoad` and `onError` event objects will no longer have an extra `uri` property. [Android][Breaking] - On `Image`, `onLoad` event objects' `source.url` is now renamed to `source.uri`. [iOS][Breaking] - On `Image`, `onLoad` event objects' `source.url` is now renamed to `source.uri`. Reviewed By: mdvacca Differential Revision: D22023565 fbshipit-source-id: 5ea7904c697f87e01118bdb81ed50ab0a5aecdce --- Libraries/Image/ImageProps.js | 3 +-- Libraries/Image/RCTImageView.mm | 2 +- RNTester/js/examples/Image/ImageExample.js | 4 ++-- .../java/com/facebook/react/views/image/ImageLoadEvent.java | 6 +----- 4 files changed, 5 insertions(+), 10 deletions(-) diff --git a/Libraries/Image/ImageProps.js b/Libraries/Image/ImageProps.js index 8f8512e06c..c7bf077c1f 100644 --- a/Libraries/Image/ImageProps.js +++ b/Libraries/Image/ImageProps.js @@ -21,9 +21,8 @@ export type ImageLoadEvent = SyntheticEvent< source: $ReadOnly<{| width: number, height: number, - url: string, + uri: string, |}>, - uri?: string, // Only on Android |}>, >; diff --git a/Libraries/Image/RCTImageView.mm b/Libraries/Image/RCTImageView.mm index fca211934d..c0b23f78f5 100644 --- a/Libraries/Image/RCTImageView.mm +++ b/Libraries/Image/RCTImageView.mm @@ -41,9 +41,9 @@ static BOOL RCTShouldReloadImageForSizeChange(CGSize currentSize, CGSize idealSi static NSDictionary *onLoadParamsForSource(RCTImageSource *source) { NSDictionary *dict = @{ + @"uri": source.request.URL.absoluteString, @"width": @(source.size.width), @"height": @(source.size.height), - @"url": source.request.URL.absoluteString, }; return @{ @"source": dict }; } diff --git a/RNTester/js/examples/Image/ImageExample.js b/RNTester/js/examples/Image/ImageExample.js index da56f1865f..32b9c58db9 100644 --- a/RNTester/js/examples/Image/ImageExample.js +++ b/RNTester/js/examples/Image/ImageExample.js @@ -76,7 +76,7 @@ class NetworkImageCallbackExample extends React.Component< } onLoad={event => { if (event.nativeEvent.source) { - const url = event.nativeEvent.source.url; + const url = event.nativeEvent.source.uri; this._loadEventFired( `✔ onLoad (+${new Date() - mountTime}ms) for URL ${url}`, ); @@ -127,7 +127,7 @@ class NetworkImageCallbackExample extends React.Component< onLoad={event => { // Currently this image source feature is only available on iOS. if (event.nativeEvent.source) { - const url = event.nativeEvent.source.url; + const url = event.nativeEvent.source.uri; this._loadEventFired( `✔ (prefetched) onLoad (+${new Date() - mountTime}ms) for URL ${url}`, diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/image/ImageLoadEvent.java b/ReactAndroid/src/main/java/com/facebook/react/views/image/ImageLoadEvent.java index 271f6838e8..6e900a432a 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/image/ImageLoadEvent.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/image/ImageLoadEvent.java @@ -107,14 +107,10 @@ public class ImageLoadEvent extends Event { switch (mEventType) { case ON_LOAD: eventData = Arguments.createMap(); - // TODO: Remove this (to be less redundant and to be consistent with iOS). - eventData.putString("uri", mSourceUri); eventData.putMap("source", createEventDataSource()); break; case ON_ERROR: eventData = Arguments.createMap(); - // TODO: Remove this (to be less redundant and to be consistent with iOS). - eventData.putString("uri", mSourceUri); eventData.putString("error", mErrorMessage); break; } @@ -124,9 +120,9 @@ public class ImageLoadEvent extends Event { private WritableMap createEventDataSource() { WritableMap source = Arguments.createMap(); + source.putString("uri", mSourceUri); source.putDouble("width", mWidth); source.putDouble("height", mHeight); - source.putString("url", mSourceUri); return source; } }