A propper way to load images

Problem

Currently, if we have multiple images with the same URL, we will fire multiple requests for them. It's okay when we have different small images. But if someone, for some reason, inserts a lot of full hd images with the same url it will take longer to download all of them separately.

Critical problems:

1. Unnecessary CPU pressure
2. Additional work for servers
3. Additional network data usage.

Solution

We should implement/extend react-native's Imageloader or add our own image loader with SDWebImage for ios or GlideLoader for Android.

Here is a simple example with SDWebImageLoader that we currently use in our app:

#import "EnrichedImageLoader.h"
#import <React/RCTUtils.h>

@implementation EnrichedImageLoader
+ (instancetype)shared {
  static EnrichedImageLoader *shared;
  static dispatch_once_t onceToken;
  dispatch_once(&onceToken, ^{
    shared = [self new];
    shared.sdManager = [SDWebImageManager sharedManager];
  });
  return shared;
}

- (void)loadImage:(NSURL *)url completion:(void (^)(UIImage *))completion {
  if (!url) {
    completion(nil);
    return;
  }

  if (RCTIsLocalAssetURL(url)) {
    completion(RCTImageFromLocalAssetURL(url));
    return;
  }

  [self.sdManager
      loadImageWithURL:url
               options:SDWebImageHighPriority
              progress:nil
             completed:^(UIImage *_Nullable image, NSData *_Nullable data,
                         NSError *_Nullable error, SDImageCacheType cacheType,
                         BOOL finished, NSURL *_Nullable imageURL) {
               completion(image);
             }];
}

- (void)loadImage:(NSURL *)url
          headers:(NSDictionary<NSString *, NSString *> *)headers
       completion:(void (^)(UIImage *image))completion {
  if (!url) {
    completion(nil);
    return;
  }

  SDWebImageDownloaderRequestModifier *requestModifier =
      [SDWebImageDownloaderRequestModifier
          requestModifierWithBlock:^NSURLRequest *_Nullable(
              NSURLRequest *_Nonnull request) {
            NSMutableURLRequest *modifiedRequest = [request mutableCopy];
            for (NSString *key in headers) {
              [modifiedRequest setValue:headers[key] forHTTPHeaderField:key];
            }
            return modifiedRequest;
          }];

  SDWebImageContext *context =
      @{SDWebImageContextDownloadRequestModifier : requestModifier};

  [self.sdManager
      loadImageWithURL:url
               options:SDWebImageHighPriority
               context:context
              progress:nil
             completed:^(UIImage *_Nullable image, NSData *_Nullable data,
                         NSError *_Nullable error, SDImageCacheType cacheType,
                         BOOL finished, NSURL *_Nullable imageURL) {
               completion(image);
             }];
}

@end

Start by reviewing React Native's image-loader integration and the provided EnrichedImageLoader example, including its local-asset and header-handling paths. Determine how the iOS and Android loaders should be integrated; done means repeated requests for the same image URL are deduplicated without breaking local assets or request headers.