Possible cause for image caching issue in RCTImageCache.m

Description:

Hi, I like others, have been having issues with understanding why some images won’t cache as expected. So, I started poking around in RCTImageCache.m looking for the actual max size limit for an image. Which the code referenced below says the max size is 2MB and I was having issues with an image that is ~634Kb in size.

static const NSUInteger RCTMaxCachableDecodedImageSizeInBytes = 2097152; // 2 MB

I then bumped this up to 4MB and recompiled. This then allowed my ~634Kb image to cache properly. So then I added the following log statement to see what size react thinks my image actually is.

- (void)addImageToCache:(UIImage *)image
                 forKey:(NSString *)cacheKey
{
  if (!image) {
    return;
  }
  NSInteger bytes = image.reactDecodedImageBytes;

//see what size react thinks the image is
  NSLog(@"CHECK IMAGE SIZE `%@` `%ld` <= `%lu`", cacheKey, bytes, RCTMaxCachableDecodedImageSizeInBytes);
  
  if (bytes <= RCTMaxCachableDecodedImageSizeInBytes) {
    [self->_decodedImageCache setObject:image
                                 forKey:cacheKey
                                   cost:bytes];
  }
}

which resulted in the following log statement for the aforementioned image:

CHECK IMAGE SIZE `http://[snip]/avatar/216615f1-92bd-4dd6-8483-62e6984d260b?1580932881|414|896|3|2` `3279360` <= `2097152`

This may be the same issue mentioned in #27527. @PeteTheHeat, any ideas on this one? I hope all this helps!

React Native version:

System: OS: macOS 10.15.3 CPU: (8) x64 Intel® Core™ i7-4790K CPU @ 4.00GHz Memory: 49.63 MB / 32.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 10.16.3 - /opt/local/bin/node Yarn: 1.19.0 - /opt/local/bin/yarn npm: 6.11.3 - /opt/local/bin/npm Watchman: 4.7.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1 IDEs: Android Studio: 3.4 AI-183.5429.30.34.5452501 Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild npmGlobalPackages: react-native-cli: 2.0.1 react-native: 0.61.5

[ftKnox]

Thanks for the update, I ended up increasing the total cache size and modifying that calculation for this particular app with good results. I will try some of the recommendations from the NSHipster post and report back any findings.

[caisd1998]

@ftKnox RN has three layers cache, it maintains a DecodedImageCache by itself, and uses iOS’s memory and disk cache to store original image data. Even if the image is not in DecodedImageCache, it still can be loaded from iOS’ cache if using correctly. If you are seeing app re-requesting the same image on every request, there are two possible reasons:

1. You set the cache control to reload in Image component, see this: https://reactnative.dev/docs/images#cache-control-ios-only
2. The image you’re loading doesn’t support cache, you can check it by proxying network request and checking the response header.

I have finished reading the source code related to Image download and cache, and done some tests, I can confirm what I said above. For my company’s app, we will also do some enhancements, we will not only increase RCTMaxCachableDecodedImageSizeInBytes and the DecodedImageCache, but also increase iOS’ NSURLCache.defaultCache’s memory and disk cache. We’re also thinking about using some third party image library, like react-native-fast-image, the underlying iOS SDK is SDWebImage, which has very aggressive cache.