react-native: Image prefetch does not work on iOS

I found the cause of this issue.

1. prefetch method will call imageLoader’s loadImageWithURLRequest method.
2. This method will set size to CGSizeZero and scale to 1 by default.
3. Image cache will use url string, size and scale to create a key for storage.
4. When you set Image’s source, size is image’s size, scale is screen’s scale. So it will never hit the cache.

RCT_EXPORT_METHOD(prefetchImage:(NSURLRequest *)request
                  resolve:(RCTPromiseResolveBlock)resolve
                  reject:(RCTPromiseRejectBlock)reject)
{
  if (!request) {
    reject(@"E_INVALID_URI", @"Cannot prefetch an image for an empty URI", nil);
    return;
  }
    id<RCTImageLoaderProtocol> imageLoader = (id<RCTImageLoaderProtocol>)[self.bridge
                                                                          moduleForName:@"ImageLoader" lazilyLoadIfNecessary:YES];
    [imageLoader loadImageWithURLRequest:request
                                priority:RCTImageLoaderPriorityPrefetch
                                callback:^(NSError *error, UIImage *image) {
        if (error) {
            reject(@"E_PREFETCH_FAILURE", nil, error);
            return;
        }
        resolve(@YES);
    }];
}

- (nullable RCTImageLoaderCancellationBlock)loadImageWithURLRequest:(NSURLRequest *)imageURLRequest
                                                           priority:(RCTImageLoaderPriority)priority
                                                           callback:(RCTImageLoaderCompletionBlock)callback {
    return [self loadImageWithURLRequest:imageURLRequest
                                    size:CGSizeZero
                                   scale:1
                                 clipped:YES
                              resizeMode:RCTResizeModeStretch
                                priority:priority
                           progressBlock:nil
                        partialLoadBlock:nil
                         completionBlock:callback];
}

It’s 2021, still issue here

Can confirm this on RN 0.61.4! Interesting discovery: the Image.queryCache does show images which are smaller in size…

Measured behavior: Loading large images (eg. Unsplash wallpapers ~1.3MB): no file stored in the fsCachedData folder Loading normal size images (~200KB): file stored in fsCachedData & appears in Image.queryCache

Any movement on this? I’m using Expo and most, if not all of the other options require a bare project to work.

same here it take sometimes for image to load up even queryCache show that image are already cache