react-native-fast-image 8.14.0 → 8.16.0

package/README.md

@@ -146,6 +146,23 @@ Indicates the load order priority of an image. Images with `FastImage.priority.h
 
 ---
 
+### `source.cacheKey?: string`
+
+The key the image is cached under, instead of its uri. Use it for urls that change while the image stays the same, e.g. signed urls with a token or an expiry. Use something that identifies the image, and change it when the image changes (e.g. include a version or the time it was updated), or the old image keeps showing:
+
+```jsx
+<FastImage
+    source={{
+        uri: signedUrl,
+        cacheKey: `avatar-${user.id}-${user.avatarUpdatedAt}`,
+    }}
+/>
+```
+
+Not used with `cache: 'web'`, which follows the HTTP cache (keyed by url).
+
+---
+
 ### `defaultSource?: number`
 
 - An asset loaded with `require(...)`.
@@ -242,9 +259,19 @@ e.g. `onError={e => console.log(e.nativeEvent.error)}`
 
 ---
 
-### `onLoadEnd?: () => void`
+### `onLoadEnd?: (result) => void`
+
+Called when the image finishes loading, whether it was successful or an error, with the result: `{ ok: true, width, height }` (the image's size, as `onLoad` gets it) or `{ ok: false, error }` (as `onError` gets it). TypeScript makes you check `ok` before reading the size or the error.
 
-Called when the image finishes loading, whether it was successful or an error.
+```jsx
+<FastImage
+    source={{ uri }}
+    onLoadEnd={(result) => {
+        if (result.ok) setAspectRatio(result.width / result.height)
+        else setFailed(result.error)
+    }}
+/>
+```
 
 ---
 

package/android/src/main/java/com/dylanvann/fastimage/FastImageEvents.java

@@ -26,6 +26,24 @@ final class FastImageEvents {
         send(view, name, Arguments.createMap());
     }
 
+    // onLoadEnd with the load's result: ok with the image's size, as onLoad
+    // sent it.
+    static void sendLoadEnd(View view, int width, int height) {
+        WritableMap event = Arguments.createMap();
+        event.putBoolean("ok", true);
+        event.putInt("width", width);
+        event.putInt("height", height);
+        send(view, FastImageRequestListener.REACT_ON_LOAD_END_EVENT, event);
+    }
+
+    // onLoadEnd with the load's result: not ok, with the error onError sent.
+    static void sendLoadEnd(View view, String error) {
+        WritableMap event = Arguments.createMap();
+        event.putBoolean("ok", false);
+        event.putString("error", error);
+        send(view, FastImageRequestListener.REACT_ON_LOAD_END_EVENT, event);
+    }
+
     static void send(View view, String name, WritableMap data) {
         ReactContext context = FastImageViewManager.getReactContext(view.getContext());
         if (context == null) return;

package/android/src/main/java/com/dylanvann/fastimage/FastImageKeyedGlideUrl.java

@@ -0,0 +1,37 @@
+package com.dylanvann.fastimage;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import com.bumptech.glide.load.model.GlideUrl;
+import com.bumptech.glide.load.model.Headers;
+
+// A url cached under the source's `cacheKey` instead of the url. Glide keys
+// its disk cache by getCacheKey(), and its memory cache by equals() and
+// hashCode(), which also compare the headers: here they only use the key, so
+// a url whose token or headers change still hits both caches. The request
+// still uses the url and headers.
+class FastImageKeyedGlideUrl extends GlideUrl {
+    private final String mCacheKey;
+
+    FastImageKeyedGlideUrl(String url, Headers headers, @NonNull String cacheKey) {
+        super(url, headers);
+        mCacheKey = cacheKey;
+    }
+
+    @Override
+    public String getCacheKey() {
+        return mCacheKey;
+    }
+
+    @Override
+    public boolean equals(@Nullable Object other) {
+        return other instanceof FastImageKeyedGlideUrl
+                && mCacheKey.equals(((FastImageKeyedGlideUrl) other).mCacheKey);
+    }
+
+    @Override
+    public int hashCode() {
+        return mCacheKey.hashCode();
+    }
+}

package/android/src/main/java/com/dylanvann/fastimage/FastImageRequestListener.java

@@ -41,10 +41,11 @@ public class FastImageRequestListener implements RequestListener<Drawable> {
         }
         FastImageViewWithUrl view = (FastImageViewWithUrl) ((ImageViewTarget) target).getView();
         view.onImageFailed(thumbnail);
+        String error = errorMessage(e);
         WritableMap event = new WritableNativeMap();
-        event.putString("error", errorMessage(e));
+        event.putString("error", error);
         FastImageEvents.send(view, REACT_ON_ERROR_EVENT, event);
-        FastImageEvents.send(view, REACT_ON_LOAD_END_EVENT);
+        FastImageEvents.sendLoadEnd(view, error);
         return false;
     }
 
@@ -98,6 +99,6 @@ public class FastImageRequestListener implements RequestListener<Drawable> {
         event.putInt("width", size[0]);
         event.putInt("height", size[1]);
         FastImageEvents.send(view, REACT_ON_LOAD_EVENT, event);
-        FastImageEvents.send(view, REACT_ON_LOAD_END_EVENT);
+        FastImageEvents.sendLoadEnd(view, size[0], size[1]);
     }
 }

package/android/src/main/java/com/dylanvann/fastimage/FastImageSource.java

@@ -124,9 +124,23 @@ public class FastImageSource extends ImageSource {
         mWebCache = webCache;
     }
 
+    // `cacheKey`: the key to cache the image under instead of its url.
+    @Nullable
+    private String mCacheKey = null;
+
+    void setCacheKey(@Nullable String cacheKey) {
+        mCacheKey = cacheKey == null || cacheKey.isEmpty() ? null : cacheKey;
+    }
+
     public GlideUrl getGlideUrl() {
-        return mWebCache
-                ? new FastImageWebGlideUrl(getUri().toString(), getHeaders())
-                : new GlideUrl(getUri().toString(), getHeaders());
+        String url = getUri().toString();
+        if (mWebCache) {
+            // Follows the HTTP cache, which is keyed by url.
+            return new FastImageWebGlideUrl(url, getHeaders());
+        }
+        if (mCacheKey != null) {
+            return new FastImageKeyedGlideUrl(url, getHeaders(), mCacheKey);
+        }
+        return new GlideUrl(url, getHeaders());
     }
 }

package/android/src/main/java/com/dylanvann/fastimage/FastImageViewConverter.java

@@ -19,6 +19,7 @@ import com.facebook.react.bridge.JSApplicationIllegalArgumentException;
 import com.facebook.react.bridge.NoSuchKeyException;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.ReadableMapKeySetIterator;
+import com.facebook.react.bridge.ReadableType;
 
 import java.util.HashMap;
 import java.util.Map;
@@ -63,6 +64,9 @@ class FastImageViewConverter {
         if (source == null) return null;
         FastImageSource imageSource = new FastImageSource(context, source.getString("uri"), getHeaders(source));
         imageSource.setWebCache(getCacheControl(source) == FastImageCacheControl.WEB);
+        if (source.hasKey("cacheKey") && source.getType("cacheKey") == ReadableType.String) {
+            imageSource.setCacheKey(source.getString("cacheKey"));
+        }
         return imageSource;
     }
 

package/android/src/main/java/com/dylanvann/fastimage/FastImageViewWithUrl.java

@@ -1,7 +1,6 @@
 package com.dylanvann.fastimage;
 
 import static com.dylanvann.fastimage.FastImageRequestListener.REACT_ON_ERROR_EVENT;
-import static com.dylanvann.fastimage.FastImageRequestListener.REACT_ON_LOAD_END_EVENT;
 
 import android.annotation.SuppressLint;
 import android.content.Context;
@@ -376,10 +375,11 @@ class FastImageViewWithUrl extends AppCompatImageView {
         // resolved: fire onError and onLoadEnd and show defaultSource, as on iOS
         // (#1028, #945).
         if (mSource != null && (imageSource == null || imageSource.getUri().toString().length() == 0)) {
+            String error = "Invalid source: " + mSource;
             WritableMap event = new WritableNativeMap();
-            event.putString("error", "Invalid source: " + mSource);
+            event.putString("error", error);
             FastImageEvents.send(this, REACT_ON_ERROR_EVENT, event);
-            FastImageEvents.send(this, REACT_ON_LOAD_END_EVENT);
+            FastImageEvents.sendLoadEnd(this, error);
 
             // Cancel existing requests.
             clearView(requestManager);

package/dist/index.cjs.js

@@ -73,12 +73,24 @@ function loopCount(loop) {
 	if (loop === false) return 1;
 	return Number.isFinite(loop) ? Math.max(1, Math.floor(loop)) : 0;
 }
+function loadResult(event) {
+	var _event$width, _event$height, _event$error;
+	return event.ok ? {
+		ok: true,
+		width: (_event$width = event.width) !== null && _event$width !== void 0 ? _event$width : 0,
+		height: (_event$height = event.height) !== null && _event$height !== void 0 ? _event$height : 0
+	} : {
+		ok: false,
+		error: (_event$error = event.error) !== null && _event$error !== void 0 ? _event$error : "Failed to load the image"
+	};
+}
 function withoutCache(source) {
 	const { cache: _cache, ...rest } = source || {};
 	return rest;
 }
 function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgress, onLoad, onError, onLoadEnd, style, fallback, children, resizeMode = "cover", loop, forwardedRef, onLayout, pointerEvents, ...viewProps }) {
 	const { onClick, ...props } = viewProps;
+	const fallbackResult = (0, react.useRef)(void 0);
 	const wrapperProps = {
 		onLayout,
 		onClick,
@@ -103,9 +115,29 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 			defaultSource,
 			onLoadStart,
 			onProgress,
-			onLoad,
-			onError,
-			onLoadEnd,
+			onLoad: onLoadEnd ? (event) => {
+				const { width, height } = event.nativeEvent.source;
+				fallbackResult.current = {
+					ok: true,
+					width,
+					height
+				};
+				onLoad === null || onLoad === void 0 || onLoad(event);
+			} : onLoad,
+			onError: onLoadEnd ? (event) => {
+				fallbackResult.current = {
+					ok: false,
+					error: String(event.nativeEvent.error)
+				};
+				onError === null || onError === void 0 || onError(event);
+			} : onError,
+			onLoadEnd: onLoadEnd && (() => {
+				var _fallbackResult$curre;
+				return onLoadEnd((_fallbackResult$curre = fallbackResult.current) !== null && _fallbackResult$curre !== void 0 ? _fallbackResult$curre : {
+					ok: false,
+					error: "Failed to load the image"
+				});
+			}),
 			resizeMode
 		}), children);
 	}
@@ -126,7 +158,7 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 		onFastImageProgress: onProgress,
 		onFastImageLoad: onLoad,
 		onFastImageError: onError,
-		onFastImageLoadEnd: onLoadEnd,
+		onFastImageLoadEnd: onLoadEnd && ((event) => onLoadEnd(loadResult(event.nativeEvent))),
 		resizeMode
 	}), children);
 }

package/dist/index.cjs.js.flow

@@ -49,6 +49,10 @@ export type ResizeModes = $Values<ResizeMode>
 export type Priorities = $Values<Priority>
 export type CacheControls = $Values<CacheControl>
 
+export type LoadResult =
+    | {| ok: true, width: number, height: number |}
+    | {| ok: false, error: string |}
+
 export type PreloadSuccess = {|
     uri: string,
     ok: true,
@@ -72,13 +76,14 @@ export type FastImageSource = {
     headers?: Object,
     priority?: Priorities,
     cache?: CacheControls,
+    cacheKey?: string,
 }
 
 export type FastImageProps = $ReadOnly<{|
     ...ViewProps,
     onError?: ?(event: OnErrorEvent) => void,
     onLoad?: ?(event: OnLoadEvent) => void,
-    onLoadEnd?: ?() => void,
+    onLoadEnd?: ?(result: LoadResult) => void,
     onLoadStart?: ?() => void,
     onProgress?: ?(event: OnProgressEvent) => void,
 

package/dist/index.d.ts

@@ -27,6 +27,12 @@ export type Source = {
     };
     priority?: Priority;
     cache?: Cache;
+    /**
+     * The key the image is cached under, instead of its uri. For urls that
+     * change while the image stays the same, e.g. signed urls with a token or
+     * an expiry: use something stable, like the image's id.
+     */
+    cacheKey?: string;
 };
 export interface OnLoadEvent {
     nativeEvent: {
@@ -40,6 +46,14 @@ export interface OnErrorEvent {
         error: string;
     };
 }
+export type LoadResult = {
+    ok: true;
+    width: number;
+    height: number;
+} | {
+    ok: false;
+    error: string;
+};
 export interface OnProgressEvent {
     nativeEvent: {
         loaded: number;
@@ -105,7 +119,11 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
     onProgress?(event: OnProgressEvent): void;
     onLoad?(event: OnLoadEvent): void;
     onError?(event: OnErrorEvent): void;
-    onLoadEnd?(): void;
+    /**
+     * Called once the image has loaded or failed to, with the result: `ok` and
+     * the image's size, or not `ok` and the error.
+     */
+    onLoadEnd?(result: LoadResult): void;
     /**
      * onLayout function
      *

package/dist/index.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, memo } from "react";
+import React, { forwardRef, memo, useRef } from "react";
 import { Image, NativeModules, Platform, StyleSheet, View, requireNativeComponent } from "react-native";
 //#region src/index.tsx
 const resizeMode = {
@@ -46,12 +46,24 @@ function loopCount(loop) {
 	if (loop === false) return 1;
 	return Number.isFinite(loop) ? Math.max(1, Math.floor(loop)) : 0;
 }
+function loadResult(event) {
+	var _event$width, _event$height, _event$error;
+	return event.ok ? {
+		ok: true,
+		width: (_event$width = event.width) !== null && _event$width !== void 0 ? _event$width : 0,
+		height: (_event$height = event.height) !== null && _event$height !== void 0 ? _event$height : 0
+	} : {
+		ok: false,
+		error: (_event$error = event.error) !== null && _event$error !== void 0 ? _event$error : "Failed to load the image"
+	};
+}
 function withoutCache(source) {
 	const { cache: _cache, ...rest } = source || {};
 	return rest;
 }
 function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgress, onLoad, onError, onLoadEnd, style, fallback, children, resizeMode = "cover", loop, forwardedRef, onLayout, pointerEvents, ...viewProps }) {
 	const { onClick, ...props } = viewProps;
+	const fallbackResult = useRef(void 0);
 	const wrapperProps = {
 		onLayout,
 		onClick,
@@ -76,9 +88,29 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 			defaultSource,
 			onLoadStart,
 			onProgress,
-			onLoad,
-			onError,
-			onLoadEnd,
+			onLoad: onLoadEnd ? (event) => {
+				const { width, height } = event.nativeEvent.source;
+				fallbackResult.current = {
+					ok: true,
+					width,
+					height
+				};
+				onLoad === null || onLoad === void 0 || onLoad(event);
+			} : onLoad,
+			onError: onLoadEnd ? (event) => {
+				fallbackResult.current = {
+					ok: false,
+					error: String(event.nativeEvent.error)
+				};
+				onError === null || onError === void 0 || onError(event);
+			} : onError,
+			onLoadEnd: onLoadEnd && (() => {
+				var _fallbackResult$curre;
+				return onLoadEnd((_fallbackResult$curre = fallbackResult.current) !== null && _fallbackResult$curre !== void 0 ? _fallbackResult$curre : {
+					ok: false,
+					error: "Failed to load the image"
+				});
+			}),
 			resizeMode
 		}), children);
 	}
@@ -99,7 +131,7 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 		onFastImageProgress: onProgress,
 		onFastImageLoad: onLoad,
 		onFastImageError: onError,
-		onFastImageLoadEnd: onLoadEnd,
+		onFastImageLoadEnd: onLoadEnd && ((event) => onLoadEnd(loadResult(event.nativeEvent))),
 		resizeMode
 	}), children);
 }

package/dist/index.js.flow

@@ -49,6 +49,10 @@ export type ResizeModes = $Values<ResizeMode>
 export type Priorities = $Values<Priority>
 export type CacheControls = $Values<CacheControl>
 
+export type LoadResult =
+    | {| ok: true, width: number, height: number |}
+    | {| ok: false, error: string |}
+
 export type PreloadSuccess = {|
     uri: string,
     ok: true,
@@ -72,13 +76,14 @@ export type FastImageSource = {
     headers?: Object,
     priority?: Priorities,
     cache?: CacheControls,
+    cacheKey?: string,
 }
 
 export type FastImageProps = $ReadOnly<{|
     ...ViewProps,
     onError?: ?(event: OnErrorEvent) => void,
     onLoad?: ?(event: OnLoadEvent) => void,
-    onLoadEnd?: ?() => void,
+    onLoadEnd?: ?(result: LoadResult) => void,
     onLoadStart?: ?() => void,
     onProgress?: ?(event: OnProgressEvent) => void,
 

package/ios/FastImage/FFFDownsampledImage.h

@@ -14,8 +14,8 @@
 + (NSURL*) loadURLForURL: (NSURL*)url;
 
 // Sets a load's context to decode the image for a box (in pixels) to cover
-// or fit in.
-+ (void) addToContext: (SDWebImageMutableContext*)context forURL: (NSURL*)url box: (CGSize)box cover: (BOOL)cover;
+// or fit in. `key` is the source's cache key (its url, or its cacheKey).
++ (void) addToContext: (SDWebImageMutableContext*)context forKey: (NSString*)key box: (CGSize)box cover: (BOOL)cover;
 
 // The size of the full image (in points, like UIImage's size) that an image
 // loaded this way was decoded from, for onLoad, or zero for other images.

package/ios/FastImage/FFFDownsampledImage.m

@@ -100,11 +100,11 @@ static CGSize FFFPixelSize(NSData* data) {
     return components.URL ?: url;
 }
 
-+ (void) addToContext: (SDWebImageMutableContext*)context forURL: (NSURL*)url box: (CGSize)box cover: (BOOL)cover {
++ (void) addToContext: (SDWebImageMutableContext*)context forKey: (NSString*)key box: (CGSize)box cover: (BOOL)cover {
     context[SDWebImageContextAnimatedImageClass] = [FFFDownsampledImage class];
-    // Cached under the url itself (see loadURLForURL:), so the disk cache
-    // keeps one download for every size and for loads that aren't downsampled.
-    NSString* key = url.absoluteString;
+    // Cached under the source's own key (not the url from loadURLForURL:),
+    // so the disk cache keeps one download for every size and for loads
+    // that aren't downsampled.
     context[SDWebImageContextCacheKeyFilter] = [SDWebImageCacheKeyFilter cacheKeyFilterWithBlock: ^NSString* (NSURL* _Nonnull loadURL) {
         return key;
     }];

package/ios/FastImage/FFFastImageSource.h

@@ -1,6 +1,7 @@
 #import <Foundation/Foundation.h>
 #import <UIKit/UIKit.h>
 #import <SDWebImage/SDWebImageDownloaderRequestModifier.h>
+#import <SDWebImage/SDWebImageCacheKeyFilter.h>
 
 typedef NS_ENUM(NSInteger, FFFPriority) {
     FFFPriorityLow,
@@ -27,6 +28,8 @@ typedef NS_ENUM(NSInteger, FFFCacheControl) {
 @property (nonatomic) NSDictionary *headers;
 // cache control mode
 @property (nonatomic) FFFCacheControl cacheControl;
+// The key to cache the image under instead of its url, or nil.
+@property (nonatomic, copy) NSString *cacheKey;
 
 - (instancetype)initWithURL:(NSURL *)url
                    priority:(FFFPriority)priority
@@ -36,4 +39,7 @@ typedef NS_ENUM(NSInteger, FFFCacheControl) {
 // Adds this source's headers to its image requests.
 - (SDWebImageDownloaderRequestModifier *)requestModifier;
 
+// Caches the image under cacheKey, or nil without one.
+- (SDWebImageCacheKeyFilter *)cacheKeyFilter;
+
 @end

package/ios/FastImage/FFFastImageSource.m

@@ -17,6 +17,18 @@
     return self;
 }
 
+- (SDWebImageCacheKeyFilter *)cacheKeyFilter
+{
+    NSString* cacheKey = _cacheKey;
+    // `cache: 'web'` follows the HTTP cache, which is keyed by url.
+    if (cacheKey.length == 0 || _cacheControl == FFFCacheControlWeb) {
+        return nil;
+    }
+    return [SDWebImageCacheKeyFilter cacheKeyFilterWithBlock: ^NSString* _Nullable (NSURL* _Nonnull url) {
+        return cacheKey;
+    }];
+}
+
 - (SDWebImageDownloaderRequestModifier *)requestModifier
 {
     NSDictionary* headers = _headers;

package/ios/FastImage/FFFastImageView.m

@@ -161,7 +161,7 @@ static CFTimeInterval FFFEnteredBackgroundAt = 0;
 - (void) setOnFastImageLoadEnd: (RCTDirectEventBlock)onFastImageLoadEnd {
     _onFastImageLoadEnd = onFastImageLoadEnd;
     if (self.hasCompleted && _onFastImageLoadEnd) {
-        _onFastImageLoadEnd(@{});
+        _onFastImageLoadEnd([self loadEndEvent: YES]);
     }
 }
 
@@ -284,6 +284,14 @@ NSString *FFFErrorMessage(NSError *error)
     }
 }
 
+// onLoadEnd's event: the load's result, as onLoad or onError sent it (ok: its
+// size, or not ok: the error).
+- (NSDictionary*) loadEndEvent: (BOOL)ok {
+    NSMutableDictionary* event = [NSMutableDictionary dictionaryWithDictionary: (ok ? self.onLoadEvent : self.onErrorEvent) ?: @{}];
+    event[@"ok"] = @(ok);
+    return event;
+}
+
 - (void) setSource: (FFFastImageSource*)source {
     if (_source != source) {
         _source = source;
@@ -429,7 +437,7 @@ NSString *FFFErrorMessage(NSError *error)
                 self.showsLoadedImage = NO;
                 [self sendOnError: @"Failed to decode the image"];
                 if (self.onFastImageLoadEnd) {
-                    self.onFastImageLoadEnd(@{});
+                    self.onFastImageLoadEnd([self loadEndEvent: NO]);
                 }
                 return;
             }
@@ -445,7 +453,7 @@ NSString *FFFErrorMessage(NSError *error)
             [self sendOnLoad: image];
 
             if (self.onFastImageLoadEnd) {
-                self.onFastImageLoadEnd(@{});
+                self.onFastImageLoadEnd([self loadEndEvent: YES]);
             }
             return;
         }
@@ -510,6 +518,7 @@ NSString *FFFErrorMessage(NSError *error)
 - (SDWebImageContext*) loadContext {
     SDWebImageMutableContext* context = [NSMutableDictionary dictionary];
     context[SDWebImageContextDownloadRequestModifier] = _source.requestModifier;
+    context[SDWebImageContextCacheKeyFilter] = _source.cacheKeyFilter;
     CGSize box = [self decodeBox];
     self.decodedBox = box;
     self.decodedCover = [self decodeCovers];
@@ -517,7 +526,8 @@ NSString *FFFErrorMessage(NSError *error)
         context[SDWebImageContextAnimatedImageClass] = [SDAnimatedImage class];
         return context;
     }
-    [FFFDownsampledImage addToContext: context forURL: _source.url box: box cover: self.decodedCover];
+    NSString* key = _source.cacheKeyFilter ? _source.cacheKey : _source.url.absoluteString;
+    [FFFDownsampledImage addToContext: context forKey: key box: box cover: self.decodedCover];
     return context;
 }
 
@@ -621,14 +631,14 @@ NSString *FFFErrorMessage(NSError *error)
                     weakSelf.showsLoadedImage = NO;
                     [weakSelf sendOnError: FFFErrorMessage(error)];
                     if (weakSelf.onFastImageLoadEnd) {
-                        weakSelf.onFastImageLoadEnd(@{});
+                        weakSelf.onFastImageLoadEnd([weakSelf loadEndEvent: NO]);
                     }
                 } else {
                     weakSelf.hasCompleted = YES;
                     weakSelf.showsLoadedImage = YES;
                     [weakSelf sendOnLoad: image];
                     if (weakSelf.onFastImageLoadEnd) {
-                        weakSelf.onFastImageLoadEnd(@{});
+                        weakSelf.onFastImageLoadEnd([weakSelf loadEndEvent: YES]);
                     }
                 }
             }];

package/ios/FastImage/FFFastImageViewManager.m

@@ -37,6 +37,15 @@ RCT_REMAP_VIEW_PROPERTY(tintColor, imageColor, UIColor)
 static NSMutableArray<dispatch_block_t> *FFFPendingPreloads;
 static NSUInteger FFFPreloadsInFlight;
 
+// A preload's context: the source's headers and cache key.
+static SDWebImageMutableContext *FFFPreloadContext(FFFastImageSource *source)
+{
+    SDWebImageMutableContext *context = [NSMutableDictionary dictionary];
+    context[SDWebImageContextDownloadRequestModifier] = source.requestModifier;
+    context[SDWebImageContextCacheKeyFilter] = source.cacheKeyFilter;
+    return context;
+}
+
 static NSUInteger FFFPreloadLimit(void)
 {
     NSUInteger limit = [SDWebImagePrefetcher sharedImagePrefetcher].maxConcurrentPrefetchCount;
@@ -109,7 +118,7 @@ RCT_EXPORT_METHOD(preload:(nonnull NSArray<FFFastImageSource *> *)sources
                 __block BOOL done = NO;
                 [[SDWebImageManager sharedManager] loadImageWithURL:source.url
                                                             options:options
-                                                            context:@{SDWebImageContextDownloadRequestModifier: source.requestModifier}
+                                                            context:[FFFPreloadContext(source) copy]
                                                            progress:nil
                                                           completed:^(UIImage *image, NSData *data, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
                     if (!finished || done) {

package/ios/FastImage/RCTConvert+FFFastImage.m

@@ -47,6 +47,8 @@ RCT_ENUM_CONVERTER(FFFCacheControl, (@{
     FFFastImageSource *imageSource = [[FFFastImageSource alloc] initWithURL:uri priority:priority headers:headers cacheControl:cacheControl];
     id priorityJSON = json[@"priority"];
     imageSource.hasPriority = priorityJSON && priorityJSON != (id)kCFNull;
+    NSString *cacheKey = [self NSString:json[@"cacheKey"]];
+    imageSource.cacheKey = cacheKey.length > 0 ? cacheKey : nil;
     
     return imageSource;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-fast-image",
-    "version": "8.14.0",
+    "version": "8.16.0",
     "description": "🚩 FastImage, performant React Native image component.",
     "keywords": [
         "cache",