react-native-fast-image 9.3.6 → 9.4.0

package/android/src/main/java/com/dylanvann/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 =
@@ -174,13 +177,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/android/src/main/java/com/dylanvann/fastimage/FastImageViewWithUrl.java

@@ -780,13 +780,15 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
     private ScaleType mLayoutScaleType = ScaleType.FIT_CENTER;
 
     // Glide crops or fits the bitmap for the scale type when it loads, so a
-    // new resizeMode needs a reload to take effect (#762).
+    // new resizeMode needs a reload to take effect (#762): the image that's
+    // showing, loaded again quietly (see reblur), as for a new blurRadius,
+    // without the load events, as on iOS.
     public void setResizeMode(ScaleType scaleType, boolean repeat, boolean inPixels) {
         if (scaleType == mResizeScaleType && repeat == mRepeat && inPixels == mInPixels) return;
         mResizeScaleType = scaleType;
         mInPixels = inPixels;
         mRepeat = repeat;
-        mNeedsReload = true;
+        mFitChanged = true;
         // A loaded image on screen was cropped or fitted for the old scale
         // type: it keeps its layout until the image for the new one is ready
         // (onImageLoaded), or the load fails. Laid out for the new one, a
@@ -946,6 +948,8 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
     // reblur for a change).
     private float mBlurRadius = 0;
     private boolean mBlurChanged = false;
+    // resizeMode or objectFit changed (setResizeMode).
+    private boolean mFitChanged = false;
 
     public void setBlurRadius(float blurRadius) {
         if (blurRadius == mBlurRadius) return;
@@ -1123,10 +1127,11 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         into(shown, builder, meanwhile, true);
     }
 
-    // blurRadius changed, and nothing else that needs a reload: the image
-    // that's showing, blurred again, with no events, as reloadForSize does: it's
-    // decoded again from the cache and blurred on Glide's threads, and the view
-    // keeps the current image until then. If that fails, it shows the image
+    // blurRadius or resizeMode changed, and nothing else that needs a reload:
+    // the image that's showing, blurred or fitted again, with no events, as
+    // reloadForSize does: it's decoded again from the cache and blurred or
+    // fitted on Glide's threads, and the view keeps the current image (and its
+    // layout, see onImageLoaded) until then. If that fails, it shows the image
     // from Glide's caches; cache: 'web' skips them, so the view shows
     // defaultSource (or nothing) then. Also while it's loading again that way
     // (e.g. the blur changes every frame): that load is replaced. A load that
@@ -1240,8 +1245,9 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
             @Nullable RequestManager requestManager) {
         if (mDropped) return;
         mManager = manager;
-        if (mBlurChanged && !mNeedsReload) {
+        if ((mBlurChanged || mFitChanged) && !mNeedsReload) {
             mBlurChanged = false;
+            mFitChanged = false;
             reblur();
         }
         if (!mNeedsReload)
@@ -1272,6 +1278,7 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         // defaultSource, resizeMode), not for every prop update.
         mNeedsReload = false;
         mBlurChanged = false;
+        mFitChanged = false;
         boolean switching = mSwitchesSource;
         mSwitchesSource = false;
         boolean restarting = mRestarting;

package/dist/index.cjs.js

@@ -82,6 +82,24 @@ function resolveObjectFit(objectFit, style, resizeMode) {
 	return (_RESIZE_MODE_FIT$resi = RESIZE_MODE_FIT[resizeMode]) !== null && _RESIZE_MODE_FIT$resi !== void 0 ? _RESIZE_MODE_FIT$resi : "cover";
 }
 //#endregion
+//#region src/reactNativeCache.ts
+const REACT_NATIVE_CACHE = [
+	"default",
+	"reload",
+	"force-cache",
+	"only-if-cached"
+];
+const isReactNativeCache = (cache) => REACT_NATIVE_CACHE.includes(cache);
+let warnedReload = false;
+function warnIfReload(source) {
+	if (warnedReload || typeof __DEV__ === "undefined" || !__DEV__) return;
+	for (const entry of Array.isArray(source) ? source : [source]) if ((entry === null || entry === void 0 ? void 0 : entry.cache) === "reload") {
+		warnedReload = true;
+		console.warn("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`.");
+		return;
+	}
+}
+//#endregion
 //#region src/index.tsx
 const resolveDefaultSource = (defaultSource) => {
 	if (!defaultSource) return null;
@@ -139,8 +157,11 @@ function transitionProps(transition) {
 	};
 }
 function withoutCache(source) {
-	const { cache: _cache, ...rest } = source || {};
-	return rest;
+	const { cache, ...rest } = source || {};
+	return isReactNativeCache(cache) ? {
+		...rest,
+		cache
+	} : rest;
 }
 function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgress, onLoad, onError, onLoadEnd, style, fallback, children, objectFit, resizeMode = "cover", loop, transition, forwardedRef, onLayout, pointerEvents, hitSlop, onStartShouldSetResponder, onStartShouldSetResponderCapture, onMoveShouldSetResponder, onMoveShouldSetResponderCapture, onResponderGrant, onResponderReject, onResponderStart, onResponderMove, onResponderEnd, onResponderRelease, onResponderTerminationRequest, onResponderTerminate, onTouchStart, onTouchMove, onTouchEnd, onTouchCancel, onTouchEndCapture, ...viewProps }) {
 	const { onClick, ...props } = viewProps;
@@ -214,6 +235,7 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 			resizeMode: mode === "none" || mode === "scale-down" ? "center" : mode
 		}), children);
 	}
+	warnIfReload(source);
 	const sources = Array.isArray(source) ? source.length === 1 ? void 0 : source : void 0;
 	const single = Array.isArray(source) ? source[0] : source;
 	const resolvedSource = sources ? void 0 : react_native.Image.resolveAssetSource(single);

package/dist/index.cjs.js.flow

@@ -112,6 +112,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,
@@ -120,7 +129,7 @@ export type FastImageProps = $ReadOnly<{|
     onLoadStart?: ?() => void,
     onProgress?: ?(event: OnProgressEvent) => void,
 
-    source?: ?(FastImageSource | Array<FastImageSource> | number),
+    source?: ?(ViewSource | Array<ViewSource> | number),
     defaultSource?: ?number,
 
     tintColor?: number | string,

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

@@ -112,6 +112,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,
@@ -120,7 +129,7 @@ export type FastImageProps = $ReadOnly<{|
     onLoadStart?: ?() => void,
     onProgress?: ?(event: OnProgressEvent) => void,
 
-    source?: ?(FastImageSource | Array<FastImageSource> | number),
+    source?: ?(ViewSource | Array<ViewSource> | number),
     defaultSource?: ?number,
 
     tintColor?: number | string,

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ColorValue, View, StyleProp, ViewStyle, ImageRequireSource, AccessibilityProps, ViewProps } from 'react-native';
 import { cacheControl, priority, resizeMode } from './constants';
+import { type ReactNativeCache } from './reactNativeCache';
 /** How the image fits the view: see [`objectFit`](#objectfit). */
 export type ObjectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
 /** How the image fits the view: see [`resizeMode`](#resizemode). */
@@ -99,6 +100,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;
+});
 /** How the image fades in: see [`transition`](#transition). */
 export type Transition = {
     /**
@@ -277,7 +281,7 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
      *   `{ ok: false, error }`.
      * - An array of one is the same as that source.
      */
-    source?: Source | Source[] | ImageRequireSource;
+    source?: ViewSource | ViewSource[] | ImageRequireSource;
     /**
      * An asset loaded with `require(...)`, shown while the first image loads,
      * and if an image fails to load. When `source` changes, the previous image

package/dist/index.js

@@ -55,6 +55,24 @@ function resolveObjectFit(objectFit, style, resizeMode) {
 	return (_RESIZE_MODE_FIT$resi = RESIZE_MODE_FIT[resizeMode]) !== null && _RESIZE_MODE_FIT$resi !== void 0 ? _RESIZE_MODE_FIT$resi : "cover";
 }
 //#endregion
+//#region src/reactNativeCache.ts
+const REACT_NATIVE_CACHE = [
+	"default",
+	"reload",
+	"force-cache",
+	"only-if-cached"
+];
+const isReactNativeCache = (cache) => REACT_NATIVE_CACHE.includes(cache);
+let warnedReload = false;
+function warnIfReload(source) {
+	if (warnedReload || typeof __DEV__ === "undefined" || !__DEV__) return;
+	for (const entry of Array.isArray(source) ? source : [source]) if ((entry === null || entry === void 0 ? void 0 : entry.cache) === "reload") {
+		warnedReload = true;
+		console.warn("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`.");
+		return;
+	}
+}
+//#endregion
 //#region src/index.tsx
 const resolveDefaultSource = (defaultSource) => {
 	if (!defaultSource) return null;
@@ -112,8 +130,11 @@ function transitionProps(transition) {
 	};
 }
 function withoutCache(source) {
-	const { cache: _cache, ...rest } = source || {};
-	return rest;
+	const { cache, ...rest } = source || {};
+	return isReactNativeCache(cache) ? {
+		...rest,
+		cache
+	} : rest;
 }
 function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgress, onLoad, onError, onLoadEnd, style, fallback, children, objectFit, resizeMode = "cover", loop, transition, forwardedRef, onLayout, pointerEvents, hitSlop, onStartShouldSetResponder, onStartShouldSetResponderCapture, onMoveShouldSetResponder, onMoveShouldSetResponderCapture, onResponderGrant, onResponderReject, onResponderStart, onResponderMove, onResponderEnd, onResponderRelease, onResponderTerminationRequest, onResponderTerminate, onTouchStart, onTouchMove, onTouchEnd, onTouchCancel, onTouchEndCapture, ...viewProps }) {
 	const { onClick, ...props } = viewProps;
@@ -187,6 +208,7 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 			resizeMode: mode === "none" || mode === "scale-down" ? "center" : mode
 		}), children);
 	}
+	warnIfReload(source);
 	const sources = Array.isArray(source) ? source.length === 1 ? void 0 : source : void 0;
 	const single = Array.isArray(source) ? source[0] : source;
 	const resolvedSource = sources ? void 0 : Image.resolveAssetSource(single);

package/dist/index.js.flow

@@ -112,6 +112,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,
@@ -120,7 +129,7 @@ export type FastImageProps = $ReadOnly<{|
     onLoadStart?: ?() => void,
     onProgress?: ?(event: OnProgressEvent) => void,
 
-    source?: ?(FastImageSource | Array<FastImageSource> | number),
+    source?: ?(ViewSource | Array<ViewSource> | number),
     defaultSource?: ?number,
 
     tintColor?: number | string,

package/dist/index.web.js.flow

@@ -112,6 +112,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,
@@ -120,7 +129,7 @@ export type FastImageProps = $ReadOnly<{|
     onLoadStart?: ?() => void,
     onProgress?: ?(event: OnProgressEvent) => void,
 
-    source?: ?(FastImageSource | Array<FastImageSource> | number),
+    source?: ?(ViewSource | Array<ViewSource> | number),
     defaultSource?: ?number,
 
     tintColor?: number | string,

package/dist/reactNativeCache.d.ts

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

package/ios/FastImage/RCTConvert+FFFastImage.m

@@ -24,6 +24,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": "9.3.6",
+    "version": "9.4.0",
     "description": "FastImage, performant React Native image component.",
     "keywords": [
         "cache",