img events fixes for ios and android (facebook#43945)

netmaxt3r · facebook-github-bot · commit 78ab5f4b836d · 2024-04-24T16:25:37.000-07:00
Summary: fixes Image events in new architecture facebook#43874 ## Changelog: [iOS] [Fixed] - Missing `source` in `onLoad` native event arguments [iOS] [Fixed] - Missing `error`, `responseCode`, and `httpResponseHeaders` in `onError` native event arguments [iOS] [Fixed] - Missing `loaded` and `total` in `onProgress` native event arguments [Android] [Fixed] - Missing `progress` in `onProgress` native event arguments Pull Request resolved: facebook#43945 Test Plan: test using Image section of rn-tester app before ![image](https://github.com/facebook/react-native/assets/1734518/8f7d714b-2ddf-4db0-a539-7be52e3fd948) after ![image](https://github.com/facebook/react-native/assets/1734518/50f14906-1b65-447f-ae84-634989c1bfc7) Reviewed By: rozele Differential Revision: D55945341 Pulled By: NickGerleman fbshipit-source-id: da4e0e68a78ec8566d94e6df63e17f0436972a4f
diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/Image/RCTImageComponentView.mm b/packages/react-native/React/Fabric/Mounting/ComponentViews/Image/RCTImageComponentView.mm
@@ -136,7 +136,7 @@ - (void)didReceiveImage:(UIImage *)image metadata:(id)metadata fromObserver:(con
     return;
   }
 
-  static_cast<const ImageEventEmitter &>(*_eventEmitter).onLoad();
+  static_cast<const ImageEventEmitter &>(*_eventEmitter).onLoad(_state->getData().getImageSource());
   static_cast<const ImageEventEmitter &>(*_eventEmitter).onLoadEnd();
 
   const auto &imageProps = static_cast<const ImageProps &>(*_props);
@@ -168,24 +168,44 @@ - (void)didReceiveImage:(UIImage *)image metadata:(id)metadata fromObserver:(con
   }
 }
 
-- (void)didReceiveProgress:(float)progress fromObserver:(const void *)observer
+- (void)didReceiveProgress:(float)progress
+                    loaded:(int64_t)loaded
+                     total:(int64_t)total
+              fromObserver:(const void *)observer
 {
   if (!_eventEmitter) {
     return;
   }
 
-  static_cast<const ImageEventEmitter &>(*_eventEmitter).onProgress(progress);
+  static_cast<const ImageEventEmitter &>(*_eventEmitter).onProgress(progress, loaded, total);
 }
 
-- (void)didReceiveFailureFromObserver:(const void *)observer
+- (void)didReceiveFailure:(NSError *)error fromObserver:(const void *)observer
 {
   _imageView.image = nil;
 
   if (!_eventEmitter) {
     return;
   }
 
-  static_cast<const ImageEventEmitter &>(*_eventEmitter).onError();
+  ImageErrorInfo info;
+
+  if (error) {
+    info.error = std::string([error.localizedDescription UTF8String]);
+    id code = error.userInfo[@"httpStatusCode"];
+    if (code) {
+      info.responseCode = [code intValue];
+    }
+    id rspHeaders = error.userInfo[@"httpResponseHeaders"];
+    if (rspHeaders) {
+      for (NSString *key in rspHeaders) {
+        id value = rspHeaders[key];
+        info.httpResponseHeaders.push_back(
+            std::pair<std::string, std::string>(std::string([key UTF8String]), std::string([value UTF8String])));
+      }
+    }
+  }
+  static_cast<const ImageEventEmitter &>(*_eventEmitter).onError(ImageErrorInfo(info));
   static_cast<const ImageEventEmitter &>(*_eventEmitter).onLoadEnd();
 }
 
diff --git a/packages/react-native/React/Fabric/RCTImageResponseDelegate.h b/packages/react-native/React/Fabric/RCTImageResponseDelegate.h
@@ -12,8 +12,11 @@ NS_ASSUME_NONNULL_BEGIN
 @protocol RCTImageResponseDelegate <NSObject>
 
 - (void)didReceiveImage:(UIImage *)image metadata:(id)metadata fromObserver:(const void *)observer;
-- (void)didReceiveProgress:(float)progress fromObserver:(const void *)observer;
-- (void)didReceiveFailureFromObserver:(const void *)observer;
+- (void)didReceiveProgress:(float)progress
+                    loaded:(int64_t)loaded
+                     total:(int64_t)total
+              fromObserver:(const void *)observer;
+- (void)didReceiveFailure:(NSError *)error fromObserver:(const void *)observer;
 
 @end
 
diff --git a/packages/react-native/React/Fabric/RCTImageResponseObserverProxy.h b/packages/react-native/React/Fabric/RCTImageResponseObserverProxy.h
@@ -20,8 +20,8 @@ class RCTImageResponseObserverProxy final : public ImageResponseObserver {
   RCTImageResponseObserverProxy(id<RCTImageResponseDelegate> delegate = nil);
 
   void didReceiveImage(const ImageResponse &imageResponse) const override;
-  void didReceiveProgress(float progress) const override;
-  void didReceiveFailure() const override;
+  void didReceiveProgress(float progress, int64_t loaded, int64_t total) const override;
+  void didReceiveFailure(const ImageLoadError &error) const override;
 
  private:
   __weak id<RCTImageResponseDelegate> delegate_;
diff --git a/packages/react-native/React/Fabric/RCTImageResponseObserverProxy.mm b/packages/react-native/React/Fabric/RCTImageResponseObserverProxy.mm
@@ -30,21 +30,22 @@
   });
 }
 
-void RCTImageResponseObserverProxy::didReceiveProgress(float progress) const
+void RCTImageResponseObserverProxy::didReceiveProgress(float progress, int64_t loaded, int64_t total) const
 {
   auto this_ = this;
   id<RCTImageResponseDelegate> delegate = delegate_;
   RCTExecuteOnMainQueue(^{
-    [delegate didReceiveProgress:progress fromObserver:this_];
+    [delegate didReceiveProgress:progress loaded:loaded total:total fromObserver:this_];
   });
 }
 
-void RCTImageResponseObserverProxy::didReceiveFailure() const
+void RCTImageResponseObserverProxy::didReceiveFailure(const ImageLoadError &errorResponse) const
 {
   auto this_ = this;
+  NSError *error = (NSError *)unwrapManagedObject(errorResponse.getError());
   id<RCTImageResponseDelegate> delegate = delegate_;
   RCTExecuteOnMainQueue(^{
-    [delegate didReceiveFailureFromObserver:this_];
+    [delegate didReceiveFailure:error fromObserver:this_];
   });
 }
 
diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/image/ImageLoadEvent.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/image/ImageLoadEvent.kt
@@ -41,6 +41,7 @@ private constructor(
           ON_PROGRESS -> {
             putInt("loaded", loaded)
             putInt("total", total)
+            putDouble("progress", loaded / total.toDouble())
           }
           ON_LOAD -> putMap("source", createEventDataSource())
           ON_ERROR -> putString("error", errorMessage)
diff --git a/packages/react-native/ReactCommon/react/renderer/components/image/ImageEventEmitter.cpp b/packages/react-native/ReactCommon/react/renderer/components/image/ImageEventEmitter.cpp
@@ -13,24 +13,53 @@ void ImageEventEmitter::onLoadStart() const {
   dispatchEvent("loadStart");
 }
 
-void ImageEventEmitter::onLoad() const {
-  dispatchEvent("load");
+void ImageEventEmitter::onLoad(const ImageSource& source) const {
+  dispatchEvent("load", [source](jsi::Runtime& runtime) {
+    auto src = jsi::Object(runtime);
+    src.setProperty(runtime, "uri", source.uri);
+    src.setProperty(runtime, "width", source.size.width);
+    src.setProperty(runtime, "height", source.size.height);
+    auto payload = jsi::Object(runtime);
+    payload.setProperty(runtime, "source", src);
+    return payload;
+  });
 }
 
 void ImageEventEmitter::onLoadEnd() const {
   dispatchEvent("loadEnd");
 }
 
-void ImageEventEmitter::onProgress(double progress) const {
-  dispatchEvent("progress", [=](jsi::Runtime& runtime) {
+void ImageEventEmitter::onProgress(
+    double progress,
+    int64_t loaded,
+    int64_t total) const {
+  dispatchEvent("progress", [progress, loaded, total](jsi::Runtime& runtime) {
     auto payload = jsi::Object(runtime);
     payload.setProperty(runtime, "progress", progress);
+    payload.setProperty(runtime, "loaded", (double)loaded);
+    payload.setProperty(runtime, "total", (double)total);
     return payload;
   });
 }
 
-void ImageEventEmitter::onError() const {
-  dispatchEvent("error");
+void ImageEventEmitter::onError(const ImageErrorInfo& error) const {
+  dispatchEvent("error", [error](jsi::Runtime& runtime) {
+    auto payload = jsi::Object(runtime);
+    if (!error.error.empty()) {
+      payload.setProperty(runtime, "error", error.error);
+    }
+    if (error.responseCode != 0) {
+      payload.setProperty(runtime, "responseCode", error.responseCode);
+    }
+    if (!error.httpResponseHeaders.empty()) {
+      auto headers = jsi::Object(runtime);
+      for (const auto& x : error.httpResponseHeaders) {
+        headers.setProperty(runtime, x.first.c_str(), x.second);
+      }
+      payload.setProperty(runtime, "httpResponseHeaders", headers);
+    }
+    return payload;
+  });
 }
 
 void ImageEventEmitter::onPartialLoad() const {
diff --git a/packages/react-native/ReactCommon/react/renderer/components/image/ImageEventEmitter.h b/packages/react-native/ReactCommon/react/renderer/components/image/ImageEventEmitter.h
@@ -8,6 +8,7 @@
 #pragma once
 
 #include <react/renderer/components/view/ViewEventEmitter.h>
+#include <react/renderer/imagemanager/primitives.h>
 
 namespace facebook::react {
 
@@ -16,10 +17,10 @@ class ImageEventEmitter : public ViewEventEmitter {
   using ViewEventEmitter::ViewEventEmitter;
 
   void onLoadStart() const;
-  void onLoad() const;
+  void onLoad(const ImageSource& source) const;
   void onLoadEnd() const;
-  void onProgress(double) const;
-  void onError() const;
+  void onProgress(double progress, int64_t loaded, int64_t total) const;
+  void onError(const ImageErrorInfo& error) const;
   void onPartialLoad() const;
 };
 
diff --git a/packages/react-native/ReactCommon/react/renderer/imagemanager/ImageResponse.cpp b/packages/react-native/ReactCommon/react/renderer/imagemanager/ImageResponse.cpp
@@ -24,4 +24,11 @@ std::shared_ptr<void> ImageResponse::getMetadata() const {
   return metadata_;
 }
 
+ImageLoadError::ImageLoadError(std::shared_ptr<void> error)
+    : error_(std::move(error)) {}
+
+std::shared_ptr<void> ImageLoadError::getError() const {
+  return error_;
+}
+
 } // namespace facebook::react
diff --git a/packages/react-native/ReactCommon/react/renderer/imagemanager/ImageResponse.h b/packages/react-native/ReactCommon/react/renderer/imagemanager/ImageResponse.h
@@ -34,4 +34,13 @@ class ImageResponse final {
   std::shared_ptr<void> metadata_{};
 };
 
+class ImageLoadError {
+ public:
+  explicit ImageLoadError(std::shared_ptr<void> error);
+  std::shared_ptr<void> getError() const;
+
+ private:
+  std::shared_ptr<void> error_{};
+};
+
 } // namespace facebook::react
diff --git a/packages/react-native/ReactCommon/react/renderer/imagemanager/ImageResponseObserver.h b/packages/react-native/ReactCommon/react/renderer/imagemanager/ImageResponseObserver.h
@@ -19,9 +19,10 @@ class ImageResponseObserver {
  public:
   virtual ~ImageResponseObserver() noexcept = default;
 
-  virtual void didReceiveProgress(float progress) const = 0;
+  virtual void didReceiveProgress(float progress, int64_t loaded, int64_t total)
+      const = 0;
   virtual void didReceiveImage(const ImageResponse& imageResponse) const = 0;
-  virtual void didReceiveFailure() const = 0;
+  virtual void didReceiveFailure(const ImageLoadError& error) const = 0;
 };
 
 } // namespace facebook::react
diff --git a/packages/react-native/ReactCommon/react/renderer/imagemanager/ImageResponseObserverCoordinator.cpp b/packages/react-native/ReactCommon/react/renderer/imagemanager/ImageResponseObserverCoordinator.cpp
@@ -30,8 +30,9 @@ void ImageResponseObserverCoordinator::addObserver(
       break;
     }
     case ImageResponse::Status::Failed: {
+      auto imageErrorData = imageErrorData_;
       mutex_.unlock();
-      observer.didReceiveFailure();
+      observer.didReceiveFailure(ImageLoadError{imageErrorData});
       break;
     }
   }
@@ -49,14 +50,16 @@ void ImageResponseObserverCoordinator::removeObserver(
 }
 
 void ImageResponseObserverCoordinator::nativeImageResponseProgress(
-    float progress) const {
+    float progress,
+    int64_t loaded,
+    int64_t total) const {
   mutex_.lock();
   auto observers = observers_;
   react_native_assert(status_ == ImageResponse::Status::Loading);
   mutex_.unlock();
 
   for (auto observer : observers) {
-    observer->didReceiveProgress(progress);
+    observer->didReceiveProgress(progress, loaded, total);
   }
 }
 
@@ -75,15 +78,17 @@ void ImageResponseObserverCoordinator::nativeImageResponseComplete(
   }
 }
 
-void ImageResponseObserverCoordinator::nativeImageResponseFailed() const {
+void ImageResponseObserverCoordinator::nativeImageResponseFailed(
+    const ImageLoadError& loadError) const {
   mutex_.lock();
   react_native_assert(status_ == ImageResponse::Status::Loading);
   status_ = ImageResponse::Status::Failed;
+  imageErrorData_ = loadError.getError();
   auto observers = observers_;
   mutex_.unlock();
 
   for (auto observer : observers) {
-    observer->didReceiveFailure();
+    observer->didReceiveFailure(loadError);
   }
 }
 
diff --git a/packages/react-native/ReactCommon/react/renderer/imagemanager/ImageResponseObserverCoordinator.h b/packages/react-native/ReactCommon/react/renderer/imagemanager/ImageResponseObserverCoordinator.h
@@ -38,7 +38,10 @@ class ImageResponseObserverCoordinator {
   /*
    * Platform-specific image loader will call this method with progress updates.
    */
-  void nativeImageResponseProgress(float progress) const;
+  void nativeImageResponseProgress(
+      float progress,
+      int64_t loaded,
+      int64_t total) const;
 
   /*
    * Platform-specific image loader will call this method with a completed image
@@ -50,7 +53,7 @@ class ImageResponseObserverCoordinator {
    * Platform-specific image loader will call this method in case of any
    * failures.
    */
-  void nativeImageResponseFailed() const;
+  void nativeImageResponseFailed(const ImageLoadError& loadError) const;
 
  private:
   /*
@@ -77,6 +80,12 @@ class ImageResponseObserverCoordinator {
    */
   mutable std::shared_ptr<void> imageMetadata_;
 
+  /*
+   * Cache image error Data.
+   * Mutable: protected by mutex_.
+   */
+  mutable std::shared_ptr<void> imageErrorData_;
+
   /*
    * Observer and data mutex.
    */
diff --git a/packages/react-native/ReactCommon/react/renderer/imagemanager/platform/ios/react/renderer/imagemanager/RCTImageManager.mm b/packages/react-native/ReactCommon/react/renderer/imagemanager/platform/ios/react/renderer/imagemanager/RCTImageManager.mm
@@ -74,7 +74,8 @@ - (ImageRequest)requestImage:(ImageSource)imageSource surfaceId:(SurfaceId)surfa
         auto wrappedMetadata = metadata ? wrapManagedObject(metadata) : nullptr;
         observerCoordinator->nativeImageResponseComplete(ImageResponse(wrapManagedObject(image), wrappedMetadata));
       } else {
-        observerCoordinator->nativeImageResponseFailed();
+        auto wrappedError = error ? wrapManagedObject(error) : nullptr;
+        observerCoordinator->nativeImageResponseFailed(ImageLoadError(wrappedError));
       }
     };
 
@@ -84,7 +85,7 @@ - (ImageRequest)requestImage:(ImageSource)imageSource surfaceId:(SurfaceId)surfa
         return;
       }
 
-      observerCoordinator->nativeImageResponseProgress((float)progress / (float)total);
+      observerCoordinator->nativeImageResponseProgress((float)progress / (float)total, progress, total);
     };
 
     RCTImageURLLoaderRequest *loaderRequest =
diff --git a/packages/react-native/ReactCommon/react/renderer/imagemanager/platform/ios/react/renderer/imagemanager/RCTSyncImageManager.mm b/packages/react-native/ReactCommon/react/renderer/imagemanager/platform/ios/react/renderer/imagemanager/RCTSyncImageManager.mm
@@ -58,7 +58,8 @@ - (ImageRequest)requestImage:(ImageSource)imageSource surfaceId:(SurfaceId)surfa
       auto wrappedMetadata = metadata ? wrapManagedObject(metadata) : nullptr;
       observerCoordinator->nativeImageResponseComplete(ImageResponse(wrapManagedObject(image), wrappedMetadata));
     } else {
-      observerCoordinator->nativeImageResponseFailed();
+      auto wrappedError = error ? wrapManagedObject(error) : nullptr;
+      observerCoordinator->nativeImageResponseFailed(ImageLoadError(wrappedError));
     }
     dispatch_group_leave(imageWaitGroup);
   };
@@ -69,7 +70,7 @@ - (ImageRequest)requestImage:(ImageSource)imageSource surfaceId:(SurfaceId)surfa
       return;
     }
 
-    observerCoordinator->nativeImageResponseProgress((float)progress / (float)total);
+    observerCoordinator->nativeImageResponseProgress((float)progress / (float)total, progress, total);
   };
 
   RCTImageURLLoaderRequest *loaderRequest =
diff --git a/packages/react-native/ReactCommon/react/renderer/imagemanager/primitives.h b/packages/react-native/ReactCommon/react/renderer/imagemanager/primitives.h
@@ -44,4 +44,11 @@ enum class ImageResizeMode {
   Repeat,
 };
 
+class ImageErrorInfo {
+ public:
+  std::string error{};
+  int responseCode{};
+  std::vector<std::pair<std::string, std::string>> httpResponseHeaders{};
+};
+
 } // namespace facebook::react

Original file line number	Diff line number	Diff line change
`@@ -136,7 +136,7 @@ - (void)didReceiveImage:(UIImage *)image metadata:(id)metadata fromObserver:(con`
`136`	`136`	`return;`
`137`	`137`	`}`
`138`	`138`
`139`		`- static_cast<const ImageEventEmitter &>(*_eventEmitter).onLoad();`
	`139`	`+ static_cast<const ImageEventEmitter &>(*_eventEmitter).onLoad(_state->getData().getImageSource());`
`140`	`140`	`static_cast<const ImageEventEmitter &>(*_eventEmitter).onLoadEnd();`
`141`	`141`
`142`	`142`	`const auto &imageProps = static_cast<const ImageProps &>(*_props);`
`@@ -168,24 +168,44 @@ - (void)didReceiveImage:(UIImage *)image metadata:(id)metadata fromObserver:(con`
`168`	`168`	`}`
`169`	`169`	`}`
`170`	`170`
`171`		`-- (void)didReceiveProgress:(float)progress fromObserver:(const void *)observer`
	`171`	`+- (void)didReceiveProgress:(float)progress`
	`172`	`+ loaded:(int64_t)loaded`
	`173`	`+ total:(int64_t)total`
	`174`	`+ fromObserver:(const void *)observer`
`172`	`175`	`{`
`173`	`176`	`if (!_eventEmitter) {`
`174`	`177`	`return;`
`175`	`178`	`}`
`176`	`179`
`177`		`- static_cast<const ImageEventEmitter &>(*_eventEmitter).onProgress(progress);`
	`180`	`+ static_cast<const ImageEventEmitter &>(*_eventEmitter).onProgress(progress, loaded, total);`
`178`	`181`	`}`
`179`	`182`
`180`		`-- (void)didReceiveFailureFromObserver:(const void *)observer`
	`183`	`+- (void)didReceiveFailure:(NSError )error fromObserver:(const void )observer`
`181`	`184`	`{`
`182`	`185`	`_imageView.image = nil;`
`183`	`186`
`184`	`187`	`if (!_eventEmitter) {`
`185`	`188`	`return;`
`186`	`189`	`}`
`187`	`190`
`188`		`- static_cast<const ImageEventEmitter &>(*_eventEmitter).onError();`
	`191`	`+ ImageErrorInfo info;`
	`192`	`+`
	`193`	`+ if (error) {`
	`194`	`+ info.error = std::string([error.localizedDescription UTF8String]);`
	`195`	`+ id code = error.userInfo[@"httpStatusCode"];`
	`196`	`+ if (code) {`
	`197`	`+ info.responseCode = [code intValue];`
	`198`	`+ }`
	`199`	`+ id rspHeaders = error.userInfo[@"httpResponseHeaders"];`
	`200`	`+ if (rspHeaders) {`
	`201`	`+ for (NSString *key in rspHeaders) {`
	`202`	`+ id value = rspHeaders[key];`
	`203`	`+ info.httpResponseHeaders.push_back(`
	`204`	`+ std::pair<std::string, std::string>(std::string([key UTF8String]), std::string([value UTF8String])));`
	`205`	`+ }`
	`206`	`+ }`
	`207`	`+ }`
	`208`	`+ static_cast<const ImageEventEmitter &>(*_eventEmitter).onError(ImageErrorInfo(info));`
`189`	`209`	`static_cast<const ImageEventEmitter &>(*_eventEmitter).onLoadEnd();`
`190`	`210`	`}`
`191`	`211`
Original file line number	Diff line number	Diff line change
`@@ -30,21 +30,22 @@`
`30`	`30`	`});`
`31`	`31`	`}`
`32`	`32`
`33`		`-void RCTImageResponseObserverProxy::didReceiveProgress(float progress) const`
	`33`	`+void RCTImageResponseObserverProxy::didReceiveProgress(float progress, int64_t loaded, int64_t total) const`
`34`	`34`	`{`
`35`	`35`	`auto this_ = this;`
`36`	`36`	`id<RCTImageResponseDelegate> delegate = delegate_;`
`37`	`37`	`RCTExecuteOnMainQueue(^{`
`38`		`- [delegate didReceiveProgress:progress fromObserver:this_];`
	`38`	`+ [delegate didReceiveProgress:progress loaded:loaded total:total fromObserver:this_];`
`39`	`39`	`});`
`40`	`40`	`}`
`41`	`41`
`42`		`-void RCTImageResponseObserverProxy::didReceiveFailure() const`
	`42`	`+void RCTImageResponseObserverProxy::didReceiveFailure(const ImageLoadError &errorResponse) const`
`43`	`43`	`{`
`44`	`44`	`auto this_ = this;`
	`45`	`+ NSError error = (NSError )unwrapManagedObject(errorResponse.getError());`
`45`	`46`	`id<RCTImageResponseDelegate> delegate = delegate_;`
`46`	`47`	`RCTExecuteOnMainQueue(^{`
`47`		`- [delegate didReceiveFailureFromObserver:this_];`
	`48`	`+ [delegate didReceiveFailure:error fromObserver:this_];`
`48`	`49`	`});`
`49`	`50`	`}`
`50`	`51`
Original file line number	Diff line number	Diff line change
`@@ -41,6 +41,7 @@ private constructor(`
`41`	`41`	`ON_PROGRESS -> {`
`42`	`42`	`putInt("loaded", loaded)`
`43`	`43`	`putInt("total", total)`
	`44`	`+ putDouble("progress", loaded / total.toDouble())`
`44`	`45`	`}`
`45`	`46`	`ON_LOAD -> putMap("source", createEventDataSource())`
`46`	`47`	`ON_ERROR -> putString("error", errorMessage)`