Honor cache: 'reload' for bundled images on iOS so they leave the system image cache

Bundled images are loaded with +[UIImage imageNamed:], whose system cache keeps
every image ever shown, even after it is unmounted and across memory warnings.
When the image source sets cache: 'reload', the bundle asset loaders now read
the file directly instead. Default behavior is unchanged.

Fixes #12220

Author: isaaclins

packages/react-native/Libraries/Image/ImageSource.js

@@ -56,6 +56,8 @@ export interface ImageURISource {
    *
    * - `reload`: The data for the URL will be loaded from the originating source.
    * No existing cache data should be used to satisfy a URL load request.
+   * On iOS, images bundled with the app are then also not kept in the system
+   * image cache once they are no longer shown.
    *
    * - `force-cache`: The existing cached data will be used to satisfy the request,
    * regardless of its age or expiration date. If there is no existing data in the cache

packages/react-native/Libraries/Image/RCTBundleAssetImageLoader.mm

@@ -18,6 +18,24 @@
 @interface RCTBundleAssetImageLoader () <RCTTurboModule>
 @end
 
+static void RCTCompleteLocalAssetLoad(
+    UIImage *image,
+    NSURL *imageURL,
+    RCTImageLoaderProgressBlock progressHandler,
+    RCTImageLoaderCompletionBlock completionHandler)
+{
+  if (image != nullptr) {
+    if (progressHandler != nullptr) {
+      progressHandler(1, 1);
+    }
+    completionHandler(nil, image);
+  } else {
+    NSString *message = [NSString stringWithFormat:@"Could not find image %@", imageURL];
+    RCTLogWarn(@"%@", message);
+    completionHandler(RCTErrorWithMessage(message), nil);
+  }
+}
+
 @implementation RCTBundleAssetImageLoader
 
 RCT_EXPORT_MODULE()
@@ -49,18 +67,26 @@ - (nullable RCTImageLoaderCancellationBlock)loadImageForURL:(NSURL *)imageURL
                                          partialLoadHandler:(RCTImageLoaderPartialLoadBlock)partialLoadHandler
                                           completionHandler:(RCTImageLoaderCompletionBlock)completionHandler
 {
-  UIImage *image = RCTImageFromLocalAssetURL(imageURL);
-  if (image != nullptr) {
-    if (progressHandler != nullptr) {
-      progressHandler(1, 1);
-    }
-    completionHandler(nil, image);
-  } else {
-    NSString *message = [NSString stringWithFormat:@"Could not find image %@", imageURL];
-    RCTLogWarn(@"%@", message);
-    completionHandler(RCTErrorWithMessage(message), nil);
-  }
+  RCTCompleteLocalAssetLoad(RCTImageFromLocalAssetURL(imageURL), imageURL, progressHandler, completionHandler);
+  return nil;
+}
 
+- (nullable RCTImageLoaderCancellationBlock)
+     loadImageIgnoringCacheForURL:(NSURL *)imageURL
+                             size:(CGSize)size
+                            scale:(CGFloat)scale
+                       resizeMode:(RCTResizeMode)resizeMode
+                  progressHandler:(RCTImageLoaderProgressBlock)progressHandler
+               partialLoadHandler:(RCTImageLoaderPartialLoadBlock)partialLoadHandler
+    completionHandlerWithMetadata:(RCTImageLoaderCompletionBlockWithMetadata)completionHandler
+{
+  RCTCompleteLocalAssetLoad(
+      RCTImageFromLocalAssetURLIgnoringSystemCache(imageURL),
+      imageURL,
+      progressHandler,
+      ^(NSError *error, UIImage *image) {
+        completionHandler(error, image, nil);
+      });
   return nil;
 }
 

packages/react-native/Libraries/Image/RCTImageLoader.mm

@@ -335,13 +335,27 @@ - (void)setImageCache:(id<RCTImageCache>)cache
 static RCTImageLoaderCancellationBlock RCTLoadImageURLFromLoader(
     id<RCTImageURLLoader> loadHandler,
     NSURL *imageURL,
+    BOOL ignoreCache,
     CGSize size,
     CGFloat scale,
     RCTResizeMode resizeMode,
     RCTImageLoaderProgressBlock progressHandler,
     RCTImageLoaderPartialLoadBlock partialLoadHandler,
     RCTImageLoaderCompletionBlockWithMetadata completionHandler)
 {
+  if (ignoreCache &&
+      [loadHandler respondsToSelector:@selector
+                   (loadImageIgnoringCacheForURL:
+                                            size:scale:resizeMode:progressHandler:partialLoadHandler
+                                                :completionHandlerWithMetadata:)]) {
+    return [loadHandler loadImageIgnoringCacheForURL:imageURL
+                                                size:size
+                                               scale:scale
+                                          resizeMode:resizeMode
+                                     progressHandler:progressHandler
+                                  partialLoadHandler:partialLoadHandler
+                       completionHandlerWithMetadata:completionHandler];
+  }
   if ([loadHandler
           respondsToSelector:@selector
           (loadImageForURL:size:scale:resizeMode:progressHandler:partialLoadHandler:completionHandlerWithMetadata:)]) {
@@ -619,6 +633,7 @@ - (RCTImageURLLoaderRequest *)_loadImageOrDataWithURLRequest:(NSURLRequest *)req
     RCTImageLoaderCancellationBlock cb = RCTLoadImageURLFromLoader(
         loadHandler,
         request.URL,
+        request.cachePolicy == NSURLRequestReloadIgnoringLocalCacheData,
         size,
         scale,
         resizeMode,
@@ -663,6 +678,7 @@ - (RCTImageURLLoaderRequest *)_loadImageOrDataWithURLRequest:(NSURLRequest *)req
         cancelLoadLocal = RCTLoadImageURLFromLoader(
             loadHandler,
             request.URL,
+            request.cachePolicy == NSURLRequestReloadIgnoringLocalCacheData,
             size,
             scale,
             resizeMode,

packages/react-native/Libraries/Image/RCTImageURLLoader.h

@@ -71,6 +71,21 @@ typedef dispatch_block_t RCTImageLoaderCancellationBlock;
                               completionHandlerWithMetadata:
                                   (RCTImageLoaderCompletionBlockWithMetadata)completionHandlerWithMetadata;
 
+/*
+ * Load the image without using any cache the loader keeps of its own (for
+ * example the system cache behind +[UIImage imageNamed:]). Called instead of
+ * the methods above when the image source asks to ignore local caches
+ * (`cache: 'reload'`). Loaders that don't implement it are called as usual.
+ */
+- (nullable RCTImageLoaderCancellationBlock)
+     loadImageIgnoringCacheForURL:(NSURL *)imageURL
+                             size:(CGSize)size
+                            scale:(CGFloat)scale
+                       resizeMode:(RCTResizeMode)resizeMode
+                  progressHandler:(RCTImageLoaderProgressBlock)progressHandler
+               partialLoadHandler:(RCTImageLoaderPartialLoadBlock)partialLoadHandler
+    completionHandlerWithMetadata:(RCTImageLoaderCompletionBlockWithMetadata)completionHandlerWithMetadata;
+
 /**
  * If more than one RCTImageURLLoader responds YES to `-canLoadImageURL:`
  * then `loaderPriority` is used to determine which one to use. The loader

packages/react-native/Libraries/Image/RCTLocalAssetImageLoader.mm

@@ -18,6 +18,24 @@
 @interface RCTLocalAssetImageLoader () <RCTTurboModule>
 @end
 
+static void RCTCompleteLocalAssetLoad(
+    UIImage *image,
+    NSURL *imageURL,
+    RCTImageLoaderProgressBlock progressHandler,
+    RCTImageLoaderCompletionBlock completionHandler)
+{
+  if (image != nullptr) {
+    if (progressHandler != nullptr) {
+      progressHandler(1, 1);
+    }
+    completionHandler(nil, image);
+  } else {
+    NSString *message = [NSString stringWithFormat:@"Could not find image %@", imageURL];
+    RCTLogWarn(@"%@", message);
+    completionHandler(RCTErrorWithMessage(message), nil);
+  }
+}
+
 @implementation RCTLocalAssetImageLoader
 
 RCT_EXPORT_MODULE()
@@ -49,18 +67,26 @@ - (nullable RCTImageLoaderCancellationBlock)loadImageForURL:(NSURL *)imageURL
                                          partialLoadHandler:(RCTImageLoaderPartialLoadBlock)partialLoadHandler
                                           completionHandler:(RCTImageLoaderCompletionBlock)completionHandler
 {
-  UIImage *image = RCTImageFromLocalAssetURL(imageURL);
-  if (image != nullptr) {
-    if (progressHandler != nullptr) {
-      progressHandler(1, 1);
-    }
-    completionHandler(nil, image);
-  } else {
-    NSString *message = [NSString stringWithFormat:@"Could not find image %@", imageURL];
-    RCTLogWarn(@"%@", message);
-    completionHandler(RCTErrorWithMessage(message), nil);
-  }
+  RCTCompleteLocalAssetLoad(RCTImageFromLocalAssetURL(imageURL), imageURL, progressHandler, completionHandler);
+  return nil;
+}
 
+- (nullable RCTImageLoaderCancellationBlock)
+     loadImageIgnoringCacheForURL:(NSURL *)imageURL
+                             size:(CGSize)size
+                            scale:(CGFloat)scale
+                       resizeMode:(RCTResizeMode)resizeMode
+                  progressHandler:(RCTImageLoaderProgressBlock)progressHandler
+               partialLoadHandler:(RCTImageLoaderPartialLoadBlock)partialLoadHandler
+    completionHandlerWithMetadata:(RCTImageLoaderCompletionBlockWithMetadata)completionHandler
+{
+  RCTCompleteLocalAssetLoad(
+      RCTImageFromLocalAssetURLIgnoringSystemCache(imageURL),
+      imageURL,
+      progressHandler,
+      ^(NSError *error, UIImage *image) {
+        completionHandler(error, image, nil);
+      });
   return nil;
 }
 

packages/react-native/React/Base/RCTUtils.h

@@ -167,6 +167,12 @@ RCT_EXTERN BOOL RCTIsLocalAssetURL(NSURL *__nullable imageURL);
 // does not correspond to a local asset.
 RCT_EXTERN UIImage *__nullable RCTImageFromLocalAssetURL(NSURL *imageURL);
 
+// Same as RCTImageFromLocalAssetURL, but reads the image file directly instead of
+// using +[UIImage imageNamed:], so the image is not kept in the system image cache
+// after it is no longer used. Images compiled into an asset catalog can only be
+// loaded by name and still go through the system cache.
+RCT_EXTERN UIImage *__nullable RCTImageFromLocalAssetURLIgnoringSystemCache(NSURL *imageURL);
+
 // Only used in case when RCTImageFromLocalAssetURL fails to get an image
 // This method basically checks for the image in the bundle location, instead
 // of the CodePush location

packages/react-native/React/Base/RCTUtils.mm

@@ -1115,7 +1115,7 @@ static BOOL RCTUseAssetCatalog(void)
   return RCTImageFromLocalAssetURL(bundleImageUrl);
 }
 
-UIImage *__nullable RCTImageFromLocalAssetURL(NSURL *imageURL)
+static UIImage *__nullable RCTImageFromLocalAssetURLWithSystemCache(NSURL *imageURL, BOOL useSystemCache)
 {
   if (RCTUseAssetCatalog()) {
     NSString *catalogName = RCTAssetCatalogNameForURL(imageURL);
@@ -1158,7 +1158,7 @@ static BOOL RCTUseAssetCatalog(void)
   }
 
   UIImage *image = nil;
-  if (imageName) {
+  if (imageName && useSystemCache) {
     if (bundle) {
       image = [UIImage imageNamed:imageName inBundle:bundle compatibleWithTraitCollection:nil];
     } else {
@@ -1187,7 +1187,11 @@ static BOOL RCTUseAssetCatalog(void)
                                                            error:nil];
     for (NSURL *frameworkURL in possibleFrameworks) {
       bundle = [NSBundle bundleWithURL:frameworkURL];
-      image = [UIImage imageNamed:imageName inBundle:bundle compatibleWithTraitCollection:nil];
+      if (useSystemCache) {
+        image = [UIImage imageNamed:imageName inBundle:bundle compatibleWithTraitCollection:nil];
+      } else {
+        image = [UIImage imageWithContentsOfFile:[bundle.bundlePath stringByAppendingPathComponent:imageName]];
+      }
       if (image) {
         RCTLogWarn(@"Image %@ not found in mainBundle, but found in %@", imageName, bundle);
         break;
@@ -1197,6 +1201,16 @@ static BOOL RCTUseAssetCatalog(void)
   return image;
 }
 
+UIImage *__nullable RCTImageFromLocalAssetURL(NSURL *imageURL)
+{
+  return RCTImageFromLocalAssetURLWithSystemCache(imageURL, YES);
+}
+
+UIImage *__nullable RCTImageFromLocalAssetURLIgnoringSystemCache(NSURL *imageURL)
+{
+  return RCTImageFromLocalAssetURLWithSystemCache(imageURL, NO);
+}
+
 RCT_EXTERN NSString *__nullable RCTTempFilePath(NSString *extension, NSError **error)
 {
   static NSError *setupError = nil;

packages/react-native/types_DEPRECATED/Libraries/Image/ImageSource.d.ts

@@ -41,6 +41,8 @@ export interface ImageURISource {
    *
    * - `reload`: The data for the URL will be loaded from the originating source.
    * No existing cache data should be used to satisfy a URL load request.
+   * On iOS, images bundled with the app are then also not kept in the system
+   * image cache once they are no longer shown.
    *
    * - `force-cache`: The existing cached data will be used to satisfy the request,
    * regardless of its age or expiration date. If there is no existing data in the cache