react-native-fast-image 10.7.0 → 10.8.1

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

@@ -16,7 +16,6 @@ import com.bumptech.glide.load.model.LazyHeaders;
 import com.bumptech.glide.request.RequestOptions;
 import com.bumptech.glide.signature.ApplicationVersionSignature;
 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;
@@ -34,6 +33,10 @@ class FastImageViewConverter {
                 put("immutable", FastImageCacheControl.IMMUTABLE);
                 put("web", FastImageCacheControl.WEB);
                 put("cacheOnly", FastImageCacheControl.CACHE_ONLY);
+                // React Native's ImageURISource value, which views take. Its
+                // others (e.g. 'reload') are immutable, as any value this map
+                // doesn't have (see getValueFromSource).
+                put("only-if-cached", FastImageCacheControl.CACHE_ONLY);
             }};
 
     private static final Map<String, Priority> FAST_IMAGE_PRIORITY_MAP =
@@ -189,13 +192,12 @@ class FastImageViewConverter {
         return value;
     }
 
+    // A value the map doesn't have (e.g. React Native's `cache: 'reload'`, or
+    // one that isn't a string) gets the default, as on iOS.
     private static <T> T getValueFromSource(String propName, String defaultProp, Map<String, T> map, ReadableMap source) {
-        String propValue;
-        try {
-            propValue = source != null ? source.getString(propName) : null;
-        } catch (NoSuchKeyException e) {
-            propValue = null;
-        }
-        return getValue(propName, defaultProp, map, propValue);
+        T value = source != null && source.hasKey(propName) && source.getType(propName) == ReadableType.String
+                ? map.get(source.getString(propName))
+                : null;
+        return value != null ? value : map.get(defaultProp);
     }
 }

package/dist/index.cjs.js

@@ -301,6 +301,11 @@ function composeRefs(...refs) {
 	};
 }
 //#endregion
+//#region src/reactNativeCache.ts
+function warnIfReload(source) {
+	if (typeof __DEV__ !== "undefined" && __DEV__ && (source === null || source === void 0 ? void 0 : source.cache) === "reload") warnOnce("cache-reload", "react-native-fast-image: `cache: 'reload'` loads the image as the default, `'immutable'`: it isn't loaded again each time. For an image that changes at the same url, use `cache: 'web'` (it follows the server's cache headers), or change its `cacheKey`.", "warn");
+}
+//#endregion
 //#region src/index.tsx
 const resolvePlaceholder = (placeholder) => {
 	if (typeof placeholder === "string") {
@@ -374,7 +379,10 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, onLoadSt
 	const fit = resolveObjectFit(objectFit, style);
 	const position = objectPositionOrCentered(objectPosition);
 	const resolvedSource = (0, react.useMemo)(() => {
-		for (const entry of [source].flat()) dataUri(entry === null || entry === void 0 ? void 0 : entry.blurDataUri);
+		for (const entry of [source].flat()) {
+			dataUri(entry === null || entry === void 0 ? void 0 : entry.blurDataUri);
+			warnIfReload(entry);
+		}
 		const single = Array.isArray(source) && source.length === 1 ? source[0] : source;
 		return Array.isArray(single) ? single.map((entry) => react_native.Image.resolveAssetSource(entry)) : react_native.Image.resolveAssetSource(single);
 	}, [source]);

package/dist/index.cjs.js.flow

@@ -137,6 +137,15 @@ export type FastImageSource = {
     scale?: number,
 }
 
+// React Native's ImageURISource cache values, which the views' `source` takes
+// so a React Native source works as it is: native reads 'only-if-cached' as
+// 'cacheOnly', and the others as the default, 'immutable'.
+type ReactNativeCache = 'default' | 'reload' | 'force-cache' | 'only-if-cached'
+type ViewSource = {
+    ...FastImageSource,
+    cache?: CacheControls | ReactNativeCache,
+}
+
 export type FastImageProps = $ReadOnly<{|
     ...ViewProps,
     onError?: ?(event: OnErrorEvent) => void,
@@ -145,7 +154,7 @@ export type FastImageProps = $ReadOnly<{|
     onLoadStart?: ?() => void,
     onProgress?: ?(event: OnProgressEvent) => void,
 
-    source?: ?(FastImageSource | Array<FastImageSource | number> | number),
+    source?: ?(ViewSource | Array<ViewSource | number> | number),
     placeholder?: ?(number | string | SourcePlaceholder | PlaceholderSource),
     // Deprecated: use placeholder, which is the same.
     defaultSource?: ?number,

package/dist/index.cjs.web.js.flow

@@ -137,6 +137,15 @@ export type FastImageSource = {
     scale?: number,
 }
 
+// React Native's ImageURISource cache values, which the views' `source` takes
+// so a React Native source works as it is: native reads 'only-if-cached' as
+// 'cacheOnly', and the others as the default, 'immutable'.
+type ReactNativeCache = 'default' | 'reload' | 'force-cache' | 'only-if-cached'
+type ViewSource = {
+    ...FastImageSource,
+    cache?: CacheControls | ReactNativeCache,
+}
+
 export type FastImageProps = $ReadOnly<{|
     ...ViewProps,
     onError?: ?(event: OnErrorEvent) => void,
@@ -145,7 +154,7 @@ export type FastImageProps = $ReadOnly<{|
     onLoadStart?: ?() => void,
     onProgress?: ?(event: OnProgressEvent) => void,
 
-    source?: ?(FastImageSource | Array<FastImageSource | number> | number),
+    source?: ?(ViewSource | Array<ViewSource | number> | number),
     placeholder?: ?(number | string | SourcePlaceholder | PlaceholderSource),
     // Deprecated: use placeholder, which is the same.
     defaultSource?: ?number,

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { ColorValue, View, StyleProp, ViewStyle, ImageRequireSource, AccessibilityProps, ViewProps } from 'react-native';
 import { cacheControl, priority, resizeMode } from './constants';
 import { type ObjectPosition } from './objectPosition';
+import { type ReactNativeCache } from './reactNativeCache';
 /** How the image fits the view: see [`objectFit`](#objectfit). */
 export type ObjectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
 export type { ObjectPosition, PositionLength } from './objectPosition';
@@ -152,6 +153,9 @@ export type Source = {
     /** With several sources, the scale `width` and `height` are multiplied by. */
     scale?: number;
 };
+type ViewSource = Source | (Omit<Source, 'cache'> & {
+    cache?: ReactNativeCache;
+});
 /** A `thumbhash` or `blurDataUri` as `placeholder`. */
 export type SourcePlaceholder = Pick<Source, 'thumbhash' | 'blurDataUri'>;
 /** A url as `placeholder`, loaded like a source (see `placeholder`). */
@@ -334,7 +338,7 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      * - A `require()`d image can be one of the sizes: its size is the file's.
      * - An array of one is the same as that source.
      */
-    source?: Source | Array<Source | ImageRequireSource> | ImageRequireSource;
+    source?: ViewSource | Array<ViewSource | ImageRequireSource> | ImageRequireSource;
     /**
      * A placeholder shown while the image loads, and if it fails to load:
      *

package/dist/index.js

@@ -274,6 +274,11 @@ function composeRefs(...refs) {
 	};
 }
 //#endregion
+//#region src/reactNativeCache.ts
+function warnIfReload(source) {
+	if (typeof __DEV__ !== "undefined" && __DEV__ && (source === null || source === void 0 ? void 0 : source.cache) === "reload") warnOnce("cache-reload", "react-native-fast-image: `cache: 'reload'` loads the image as the default, `'immutable'`: it isn't loaded again each time. For an image that changes at the same url, use `cache: 'web'` (it follows the server's cache headers), or change its `cacheKey`.", "warn");
+}
+//#endregion
 //#region src/index.tsx
 const resolvePlaceholder = (placeholder) => {
 	if (typeof placeholder === "string") {
@@ -347,7 +352,10 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, onLoadSt
 	const fit = resolveObjectFit(objectFit, style);
 	const position = objectPositionOrCentered(objectPosition);
 	const resolvedSource = useMemo(() => {
-		for (const entry of [source].flat()) dataUri(entry === null || entry === void 0 ? void 0 : entry.blurDataUri);
+		for (const entry of [source].flat()) {
+			dataUri(entry === null || entry === void 0 ? void 0 : entry.blurDataUri);
+			warnIfReload(entry);
+		}
 		const single = Array.isArray(source) && source.length === 1 ? source[0] : source;
 		return Array.isArray(single) ? single.map((entry) => Image.resolveAssetSource(entry)) : Image.resolveAssetSource(single);
 	}, [source]);

package/dist/index.js.flow

@@ -137,6 +137,15 @@ export type FastImageSource = {
     scale?: number,
 }
 
+// React Native's ImageURISource cache values, which the views' `source` takes
+// so a React Native source works as it is: native reads 'only-if-cached' as
+// 'cacheOnly', and the others as the default, 'immutable'.
+type ReactNativeCache = 'default' | 'reload' | 'force-cache' | 'only-if-cached'
+type ViewSource = {
+    ...FastImageSource,
+    cache?: CacheControls | ReactNativeCache,
+}
+
 export type FastImageProps = $ReadOnly<{|
     ...ViewProps,
     onError?: ?(event: OnErrorEvent) => void,
@@ -145,7 +154,7 @@ export type FastImageProps = $ReadOnly<{|
     onLoadStart?: ?() => void,
     onProgress?: ?(event: OnProgressEvent) => void,
 
-    source?: ?(FastImageSource | Array<FastImageSource | number> | number),
+    source?: ?(ViewSource | Array<ViewSource | number> | number),
     placeholder?: ?(number | string | SourcePlaceholder | PlaceholderSource),
     // Deprecated: use placeholder, which is the same.
     defaultSource?: ?number,

package/dist/index.web.js.flow

@@ -137,6 +137,15 @@ export type FastImageSource = {
     scale?: number,
 }
 
+// React Native's ImageURISource cache values, which the views' `source` takes
+// so a React Native source works as it is: native reads 'only-if-cached' as
+// 'cacheOnly', and the others as the default, 'immutable'.
+type ReactNativeCache = 'default' | 'reload' | 'force-cache' | 'only-if-cached'
+type ViewSource = {
+    ...FastImageSource,
+    cache?: CacheControls | ReactNativeCache,
+}
+
 export type FastImageProps = $ReadOnly<{|
     ...ViewProps,
     onError?: ?(event: OnErrorEvent) => void,
@@ -145,7 +154,7 @@ export type FastImageProps = $ReadOnly<{|
     onLoadStart?: ?() => void,
     onProgress?: ?(event: OnProgressEvent) => void,
 
-    source?: ?(FastImageSource | Array<FastImageSource | number> | number),
+    source?: ?(ViewSource | Array<ViewSource | number> | number),
     placeholder?: ?(number | string | SourcePlaceholder | PlaceholderSource),
     // Deprecated: use placeholder, which is the same.
     defaultSource?: ?number,

package/dist/reactNativeCache.d.ts

@@ -0,0 +1,2 @@
+export type ReactNativeCache = 'default' | 'reload' | 'force-cache' | 'only-if-cached';
+export declare function warnIfReload(source: unknown): void;

package/ios/FastImage/FFFastImageModule.mm

@@ -505,7 +505,7 @@ static NSDictionary *FFFFile(NSString *path)
 - (void)clearDiskCache:(RCTPromiseResolveBlock)resolve reject:(__unused RCTPromiseRejectBlock)reject
 {
     // And the HTTP cache of `cache: 'web'` images.
-    [FFFastImageSource.webURLCache removeAllCachedResponses];
+    [FFFastImageSource clearWebURLCache];
     [SDImageCache.sharedImageCache clearDiskOnCompletion:^(){
         resolve(@{@"ok": @YES});
     }];

package/ios/FastImage/FFFastImageSource.h

@@ -84,6 +84,14 @@ typedef NS_ENUM(NSInteger, FFFCacheControl) {
 // responses. 50 MB, as on Android.
 + (NSURLCache *)webURLCache;
 
+// Empties webURLCache (for clearDiskCache). Its removal takes effect a few
+// milliseconds after removeAllCachedResponses returns, and NSURLCache doesn't
+// say when: until then a `cache: 'web'` load could still get a response from
+// before the clear. So each response the web loader stores records the clear
+// it came after, and for 5 s after a clear, a load ignores a cached response
+// stored before it.
++ (void)clearWebURLCache;
+
 // After a load of this source failed: for a `cache: 'web'` image whose data
 // isn't an image, removes the response from the HTTP cache, which stored it as
 // it downloaded. Otherwise the next loads would get it from there until it

package/ios/FastImage/FFFastImageSource.m

@@ -215,6 +215,31 @@ static NSString *FFFBundleAssetName(NSURL *url)
 @interface FFFWebDownloaderOperation : SDWebImageDownloaderOperation
 @end
 
+// The key, in a stored response's userInfo, of the clear it came after (see
+// clearWebURLCache).
+static NSString *const FFFCacheTokenKey = @"FFFastImageCacheToken";
+
+// A new value at each clearWebURLCache (and one for the launch until then).
+// Not the time: a change of the device's clock would move it.
+static NSString *FFFWebURLCacheToken;
+
+// When clearWebURLCache last ran, in seconds since the device started, or 0.
+static NSTimeInterval FFFWebURLCacheClearedAt;
+
+// How long after a clear loads check the response they'd get: the removal
+// takes about 10 ms, longer on a busy device. Each check is a cache lookup.
+static const NSTimeInterval FFFWebURLCacheClearCheck = 5;
+
+static NSString *FFFCurrentWebURLCacheToken(void)
+{
+    @synchronized ([FFFastImageSource class]) {
+        if (!FFFWebURLCacheToken) {
+            FFFWebURLCacheToken = NSUUID.UUID.UUIDString;
+        }
+        return FFFWebURLCacheToken;
+    }
+}
+
 @implementation FFFWebDownloaderOperation
 
 // Whether data is an SVG document: its first element (after an XML
@@ -279,7 +304,14 @@ static BOOL FFFLooksLikeSVG(NSData *data)
         completionHandler(nil);
         return;
     }
-    [super URLSession:session dataTask:dataTask willCacheResponse:proposedResponse completionHandler:completionHandler];
+    // The clear it came after (see clearWebURLCache).
+    NSMutableDictionary *userInfo = [proposedResponse.userInfo mutableCopy] ?: [NSMutableDictionary dictionary];
+    userInfo[FFFCacheTokenKey] = FFFCurrentWebURLCacheToken();
+    NSCachedURLResponse *response = [[NSCachedURLResponse alloc] initWithResponse:proposedResponse.response
+                                                                             data:proposedResponse.data
+                                                                         userInfo:userInfo
+                                                                    storagePolicy:proposedResponse.storagePolicy];
+    [super URLSession:session dataTask:dataTask willCacheResponse:response completionHandler:completionHandler];
 }
 
 @end
@@ -481,15 +513,46 @@ static BOOL FFFLooksLikeSVG(NSData *data)
     return cache;
 }
 
++ (void)clearWebURLCache
+{
+    @synchronized (self) {
+        FFFWebURLCacheToken = NSUUID.UUID.UUIDString;
+        FFFWebURLCacheClearedAt = NSProcessInfo.processInfo.systemUptime;
+    }
+    [self.webURLCache removeAllCachedResponses];
+}
+
+// Whether the HTTP cache's response to the request was stored before the last
+// clearWebURLCache (or has no token: stored by an app's own operation class),
+// in the few seconds after it.
++ (BOOL)isCachedBeforeClear:(NSURLRequest *)request
+{
+    NSString *token;
+    NSTimeInterval clearedAt;
+    @synchronized (self) {
+        token = FFFWebURLCacheToken;
+        clearedAt = FFFWebURLCacheClearedAt;
+    }
+    if (clearedAt == 0 || NSProcessInfo.processInfo.systemUptime - clearedAt > FFFWebURLCacheClearCheck) {
+        return NO;
+    }
+    NSCachedURLResponse *cached = [self.webURLCache cachedResponseForRequest:request];
+    return cached && ![cached.userInfo[FFFCacheTokenKey] isEqual:token];
+}
+
 - (SDWebImageDownloaderRequestModifier *)requestModifier
 {
     NSDictionary* headers = _headers;
+    BOOL web = _cacheControl == FFFCacheControlWeb;
     return [SDWebImageDownloaderRequestModifier requestModifierWithBlock: ^NSURLRequest* _Nullable (NSURLRequest* _Nonnull request) {
         NSMutableURLRequest* mutableRequest = [request mutableCopy];
         for (NSString* header in headers) {
             NSString* value = headers[header];
             [mutableRequest setValue: value forHTTPHeaderField: header];
         }
+        if (web && [FFFastImageSource isCachedBeforeClear:mutableRequest]) {
+            mutableRequest.cachePolicy = NSURLRequestReloadIgnoringLocalCacheData;
+        }
         return [mutableRequest copy];
     }];
 }

package/ios/FastImage/RCTConvert+FFFastImage.m

@@ -21,6 +21,9 @@ RCT_ENUM_CONVERTER(FFFCacheControl, (@{
                                        @"immutable": @(FFFCacheControlImmutable),
                                        @"web": @(FFFCacheControlWeb),
                                        @"cacheOnly": @(FFFCacheControlCacheOnly),
+                                       // React Native's ImageURISource value, which views
+                                       // take. Its others (e.g. 'reload') are the default.
+                                       @"only-if-cached": @(FFFCacheControlCacheOnly),
                                        }), FFFCacheControlImmutable, integerValue);
 
 + (FFFastImageSource *)FFFastImageSource:(id)json {

package/package.json

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

package/src/index.js.flow

@@ -137,6 +137,15 @@ export type FastImageSource = {
     scale?: number,
 }
 
+// React Native's ImageURISource cache values, which the views' `source` takes
+// so a React Native source works as it is: native reads 'only-if-cached' as
+// 'cacheOnly', and the others as the default, 'immutable'.
+type ReactNativeCache = 'default' | 'reload' | 'force-cache' | 'only-if-cached'
+type ViewSource = {
+    ...FastImageSource,
+    cache?: CacheControls | ReactNativeCache,
+}
+
 export type FastImageProps = $ReadOnly<{|
     ...ViewProps,
     onError?: ?(event: OnErrorEvent) => void,
@@ -145,7 +154,7 @@ export type FastImageProps = $ReadOnly<{|
     onLoadStart?: ?() => void,
     onProgress?: ?(event: OnProgressEvent) => void,
 
-    source?: ?(FastImageSource | Array<FastImageSource | number> | number),
+    source?: ?(ViewSource | Array<ViewSource | number> | number),
     placeholder?: ?(number | string | SourcePlaceholder | PlaceholderSource),
     // Deprecated: use placeholder, which is the same.
     defaultSource?: ?number,

package/src/index.tsx

@@ -23,6 +23,7 @@ import {
     placeholderSource,
 } from './placeholders'
 import { composeRefs } from './composeRefs'
+import { type ReactNativeCache, warnIfReload } from './reactNativeCache'
 import { warnIfChildren, warnOnce } from './warnings'
 
 /** How the image fits the view: see [`objectFit`](#objectfit). */
@@ -178,6 +179,14 @@ export type Source = {
     scale?: number
 }
 
+// What the views' `source` takes: a Source, or one with React Native's cache
+// values (see reactNativeCache.ts), so a React Native `ImageURISource` works as
+// it is. Only the views: preload, getCachePath, writeToCache and placeholder
+// take Fast Image's values.
+type ViewSource =
+    | Source
+    | (Omit<Source, 'cache'> & { cache?: ReactNativeCache })
+
 /** A `thumbhash` or `blurDataUri` as `placeholder`. */
 export type SourcePlaceholder = Pick<Source, 'thumbhash' | 'blurDataUri'>
 
@@ -366,7 +375,10 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      * - A `require()`d image can be one of the sizes: its size is the file's.
      * - An array of one is the same as that source.
      */
-    source?: Source | Array<Source | ImageRequireSource> | ImageRequireSource
+    source?:
+        | ViewSource
+        | Array<ViewSource | ImageRequireSource>
+        | ImageRequireSource
     /**
      * A placeholder shown while the image loads, and if it fails to load:
      *
@@ -901,9 +913,11 @@ function FastImageBase({
     // only those change. Memoized on source, so an unchanged source reaches
     // the native view as the same object, and React's prop diff stops at it.
     const resolvedSource = useMemo(() => {
-        // A blurDataUri that isn't a data uri is ignored, with a warning.
+        // A blurDataUri that isn't a data uri is ignored, with a warning, and
+        // React Native's cache: 'reload' warns (native reads its cache values).
         for (const entry of [source].flat()) {
             dataUri((entry as Source | undefined)?.blurDataUri)
+            warnIfReload(entry)
         }
         const single =
             Array.isArray(source) && source.length === 1 ? source[0] : source

package/src/index.web.tsx

@@ -399,10 +399,13 @@ function assetScale(asset: PackagerAsset): number {
     )
 }
 
+// What sizedSources reads of a source.
+type SizedSource = Pick<Source, 'uri' | 'width' | 'height' | 'scale'>
+
 // One of several sizes: a require()d image in react-native-web's asset
 // registry as a source with its file's size (Expo's web builds make it a
 // { uri, width, height } object already).
-function sizedSource(source: Source | number): Source | undefined {
+function sizedSource(source: SizedSource | number): SizedSource | undefined {
     if (typeof source !== 'number') return source
     const asset: PackagerAsset | undefined = getAssetByID(source)
     return asset
@@ -422,10 +425,12 @@ function sizedSource(source: Source | number): Source | undefined {
 // is laid out at; it only applies to lazy images, and otherwise, or in
 // browsers without it, the next value, 100vw (the viewport's width). src is the largest, for browsers without
 // srcset.
-function sizedSources(entries: (Source | number)[]) {
+function sizedSources(entries: (SizedSource | number)[]) {
     const sources = entries.map(sizedSource)
     const widths = sources
-        .filter((source): source is Source => !!source?.uri && !!source.width)
+        .filter(
+            (source): source is SizedSource => !!source?.uri && !!source.width,
+        )
         .map((source) => ({
             uri: source.uri as string,
             width: Math.round((source.width ?? 0) * (source.scale ?? 1)),

package/src/reactNativeCache.ts

@@ -0,0 +1,28 @@
+// React Native's `ImageURISource` cache values, which the views' `source`
+// takes so a source typed for React Native's Image works as it is. Not
+// documented: Fast Image's own values are the ones to use. Native reads
+// 'only-if-cached' as 'cacheOnly', and the others as the default, 'immutable'.
+import { warnOnce } from './warnings'
+
+declare const __DEV__: boolean | undefined
+
+export type ReactNativeCache =
+    | 'default'
+    | 'reload'
+    | 'force-cache'
+    | 'only-if-cached'
+
+// Warns for a source with 'reload', as the image isn't loaded again each time.
+export function warnIfReload(source: unknown) {
+    if (
+        typeof __DEV__ !== 'undefined' &&
+        __DEV__ &&
+        (source as { cache?: unknown } | null | undefined)?.cache === 'reload'
+    ) {
+        warnOnce(
+            'cache-reload',
+            "react-native-fast-image: `cache: 'reload'` loads the image as the default, `'immutable'`: it isn't loaded again each time. For an image that changes at the same url, use `cache: 'web'` (it follows the server's cache headers), or change its `cacheKey`.",
+            'warn',
+        )
+    }
+}