Ignore stale image callbacks after an Image view is recycled on iOS

RCTImageResponseObserverProxy dispatches image, progress and failure
callbacks to the main queue. RCTImageComponentView used one proxy for its
whole lifetime and only checked that it still had a state, so a callback
that was already queued when the view was recycled and reused for another
<Image> was applied to the new image. With a cached new source (applied
synchronously on subscribe) the late old image stayed on screen.

Create a new proxy per subscription and ignore callbacks from any other
proxy. The queued blocks keep their proxy alive, so a freed proxy's
address cannot be reused while its callbacks are still pending.

Author: mattijsf

packages/react-native/React/Fabric/Mounting/ComponentViews/Image/RCTImageComponentView.mm

@@ -38,8 +38,6 @@ - (instancetype)initWithFrame:(CGRect)frame
     _imageView.layer.minificationFilter = kCAFilterTrilinear;
     _imageView.layer.magnificationFilter = kCAFilterTrilinear;
 
-    _imageResponseObserverProxy = std::make_shared<RCTImageResponseObserverProxy>(self);
-
     self.contentView = _imageView;
   }
 
@@ -124,6 +122,9 @@ - (void)_setStateAndResubscribeImageResponseObserver:(const ImageShadowNode::Con
   _state = state;
 
   if (_state) {
+    // A new observer per subscription: callbacks of a previous request can still be queued on the
+    // main queue (e.g. after this view was recycled and reused), and must not be applied here.
+    _imageResponseObserverProxy = std::make_shared<RCTImageResponseObserverProxy>(self);
     auto &observerCoordinator = _state->getData().getImageRequest().getObserverCoordinator();
     observerCoordinator.addObserver(_imageResponseObserverProxy);
   }
@@ -140,8 +141,9 @@ - (void)prepareForRecycle
 
 - (void)didReceiveImage:(UIImage *)image metadata:(id)metadata fromObserver:(const void *)observer
 {
-  if (!_eventEmitter || !_state) {
-    // Notifications are delivered asynchronously and might arrive after the view is already recycled.
+  if (!_eventEmitter || !_state || observer != _imageResponseObserverProxy.get()) {
+    // Notifications are delivered asynchronously and might arrive after the view is already recycled,
+    // or after it has been reused for another image.
     // In the future, we should incorporate an `EventEmitter` into a separate object owned by `ImageRequest` or `State`.
     // See for more info: T46311063.
     return;
@@ -187,7 +189,7 @@ - (void)didReceiveProgress:(float)progress
                      total:(int64_t)total
               fromObserver:(const void *)observer
 {
-  if (!_eventEmitter) {
+  if (!_eventEmitter || observer != _imageResponseObserverProxy.get()) {
     return;
   }
 
@@ -196,6 +198,10 @@ - (void)didReceiveProgress:(float)progress
 
 - (void)didReceiveFailure:(NSError *)error fromObserver:(const void *)observer
 {
+  if (observer != _imageResponseObserverProxy.get()) {
+    return;
+  }
+
   _imageView.image = nil;
 
   if (!_eventEmitter) {

packages/react-native/React/Fabric/RCTImageResponseObserverProxy.h

@@ -11,11 +11,16 @@
 
 #include <react/renderer/imagemanager/ImageResponseObserver.h>
 
+#include <memory>
+
 NS_ASSUME_NONNULL_BEGIN
 
 namespace facebook::react {
 
-class RCTImageResponseObserverProxy final : public ImageResponseObserver {
+// Must be owned by a std::shared_ptr: callbacks queued to the main queue keep the
+// proxy alive, so its address can identify the subscription they belong to.
+class RCTImageResponseObserverProxy final : public ImageResponseObserver,
+                                            public std::enable_shared_from_this<RCTImageResponseObserverProxy> {
  public:
   RCTImageResponseObserverProxy(id<RCTImageResponseDelegate> delegate = nil);
 

packages/react-native/React/Fabric/RCTImageResponseObserverProxy.mm

@@ -24,28 +24,28 @@
   UIImage *image = (UIImage *)unwrapManagedObject(imageResponse.getImage());
   id metadata = unwrapManagedObject(imageResponse.getMetadata());
   id<RCTImageResponseDelegate> delegate = delegate_;
-  auto this_ = this;
+  auto strongThis = shared_from_this();
   RCTExecuteOnMainQueue(^{
-    [delegate didReceiveImage:image metadata:metadata fromObserver:this_];
+    [delegate didReceiveImage:image metadata:metadata fromObserver:strongThis.get()];
   });
 }
 
 void RCTImageResponseObserverProxy::didReceiveProgress(float progress, int64_t loaded, int64_t total) const
 {
-  auto this_ = this;
+  auto strongThis = shared_from_this();
   id<RCTImageResponseDelegate> delegate = delegate_;
   RCTExecuteOnMainQueue(^{
-    [delegate didReceiveProgress:progress loaded:loaded total:total fromObserver:this_];
+    [delegate didReceiveProgress:progress loaded:loaded total:total fromObserver:strongThis.get()];
   });
 }
 
 void RCTImageResponseObserverProxy::didReceiveFailure(const ImageLoadError &errorResponse) const
 {
-  auto this_ = this;
+  auto strongThis = shared_from_this();
   NSError *error = (NSError *)unwrapManagedObject(errorResponse.getError());
   id<RCTImageResponseDelegate> delegate = delegate_;
   RCTExecuteOnMainQueue(^{
-    [delegate didReceiveFailure:error fromObserver:this_];
+    [delegate didReceiveFailure:error fromObserver:strongThis.get()];
   });
 }