react-native-fast-image 10.4.0 → 10.6.0

package/README.md

@@ -26,7 +26,7 @@ React Native's `Image` component handles image caching like browsers for the mos
 - **Responsive images**: give several sizes, and the one that fits the view loads ([`source`](#source)).
 - **Animated images** (GIF, WebP, APNG and AVIF) that can [loop](#loop) and [pause](#paused).
 - **Fades** in and between images ([`transition`](#transition)).
-- **Placeholders**: a blurred preview from a [ThumbHash](#sourcethumbhash) or a [tiny image](#sourceblurdatauri) while an image loads, or a bundled image ([`placeholder`](#placeholder)).
+- **Placeholders**: a blurred preview from a [ThumbHash](#sourcethumbhash) or a [tiny image](#sourceblurdatauri) while an image loads, a bundled image, or a url, e.g. a thumbnail that's already cached ([`placeholder`](#placeholder)).
 - [**SVG**](docs/formats.md#svg-images) and [**photo library**](#photo-library-images-ios-and-tvos) images.
 - [**`FastImageBackground`**](#fastimagebackground) for content over an image.
 - **Expo and web support**, with a [config plugin](#expo-config-plugin) for Expo.
@@ -107,7 +107,7 @@ It's a single native view, which also takes React Native's View props, such as a
 
 #### `source`
 
-**Type:** `number | Source | Source[]`
+**Type:** `number | Source | (number | Source)[]`
 
 Source for the remote image to load: a `Source`, a `require()`d image, or an array of the same image at different sizes.
 
@@ -129,6 +129,7 @@ When `source` changes, the image that's showing stays until the new one has load
 - When the view's size changes so that another size fits better, it loads that one (with its load events), and keeps showing the current image until then, without a `transition`.
 - Each size is cached separately. A `cacheKey` applies to its own entry: give each size its own key (or none), or the sizes would replace each other in the cache.
 - `FastImage.preload`, `getCachePath` and `writeToCache` take one size: pass the one a view will show. An array fails with `{ ok: false, error }`.
+- 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.
 
 ---
@@ -266,7 +267,7 @@ With several sources, the scale `width` and `height` are multiplied by.
 
 #### `placeholder`
 
-**Type:** `string | number | SourcePlaceholder`
+**Type:** `string | number | PlaceholderSource | SourcePlaceholder`
 
 A placeholder shown while the image loads, and if it fails to load:
 
@@ -275,13 +276,15 @@ A placeholder shown while the image loads, and if it fails to load:
 - The name of an image bundled with the app (an iOS asset catalog image or an Android drawable): `placeholder="gray"`.
 - A [ThumbHash](#sourcethumbhash), shown blurred: `placeholder={{ thumbhash }}`.
 - A tiny image as a data uri, shown blurred: `placeholder={{ blurDataUri }}`.
+- A url, loaded and cached like a source: `placeholder="https://example.com/placeholder.png"`, or a source with `headers` or a `cacheKey`: `placeholder={{ uri, headers }}`.
+- A url only shown if it's already cached, e.g. a list's thumbnail while the full-size image loads: `placeholder={{ uri, cache: 'cacheOnly' }}`.
 
-A source's own `thumbhash` or `blurDataUri` is shown instead, if it has one.
+A source's own `thumbhash` or `blurDataUri` is shown instead, if it has one; a url placeholder shows over it once it has loaded.
 
 Notes:
 
-- A url isn't loaded: it's ignored, with a warning in development.
 - On Android, a `require()`d image doesn't show in debug builds, where the dev server serves it. Release builds show it.
+- On the web, a url loads like any image, also with `'cacheOnly'`: a browser can't look only in its cache.
 
 ---
 
@@ -289,7 +292,7 @@ Notes:
 
 **Type:** `number`
 
-**Deprecated:** Use `placeholder`, which does the same.
+**Deprecated:** Use `placeholder`, which does the same. With both, `placeholder` shows.
 
 ---
 
@@ -844,6 +847,14 @@ Where the image is in the view: see [`objectPosition`](#objectposition).
 
 ---
 
+### `PlaceholderSource`
+
+**Type:** `Pick<Source, 'uri' | 'headers' | 'cacheKey' | 'cache'>`
+
+A url as `placeholder`, loaded like a source (see `placeholder`).
+
+---
+
 ### `PositionLength`
 
 **Type:** `` number | `${number}%` ``

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

@@ -27,7 +27,7 @@ import java.util.Map;
 import javax.annotation.Nullable;
 
 class FastImageViewConverter {
-    private static final Drawable TRANSPARENT_DRAWABLE = new ColorDrawable(Color.TRANSPARENT);
+    static final Drawable TRANSPARENT_DRAWABLE = new ColorDrawable(Color.TRANSPARENT);
 
     private static final Map<String, FastImageCacheControl> FAST_IMAGE_CACHE_CONTROL_MAP =
             new HashMap<String, FastImageCacheControl>() {{

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

@@ -21,6 +21,7 @@ import com.bumptech.glide.RequestManager;
 import com.facebook.react.bridge.ColorPropConverter;
 import com.facebook.react.bridge.Dynamic;
 import com.facebook.react.bridge.DynamicFromObject;
+import com.facebook.react.bridge.JavaOnlyArray;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.ReadableType;
@@ -307,17 +308,27 @@ class FastImageViewManager extends SimpleViewManager<FastImageViewWithUrl>
 
     @Override
     public void setSource(FastImageViewWithUrl view, Dynamic source) {
-        view.setSource(source.isNull() ? null : source.asMap());
+        // One source, or several (an array).
+        view.setSource(source.isNull() ? null
+                : source.getType() == ReadableType.Array ? source.asArray()
+                : JavaOnlyArray.of(source.asMap()));
     }
 
-    @Override
-    public void setSources(FastImageViewWithUrl view, Dynamic sources) {
-        view.setSources(sources.isNull() ? null : sources.asArray());
-    }
-
-    // The `placeholder` prop: the resolved asset's uri, or a data uri.
+    // The `placeholder` prop: a thumbhash or blurDataUri, or a url to load
+    // apart from the image, as a source (a map), or the resolved asset's uri
+    // or a data uri (a string).
     @Override
     public void setPlaceholder(FastImageViewWithUrl view, Dynamic source) {
+        if (source.getType() == ReadableType.Map) {
+            ReadableMap map = source.asMap();
+            boolean hash = map.hasKey("thumbhash") || map.hasKey("blurDataUri");
+            view.setPlaceholder(null);
+            view.setPlaceholderHash(hash ? FastImageViewWithUrl.sourcePlaceholder(map) : null);
+            view.setPlaceholderSource(hash ? null : map);
+            return;
+        }
+        view.setPlaceholderHash(null);
+        view.setPlaceholderSource(null);
         String uri = source.isNull() ? null : source.asString();
         if (uri != null && FastImageThumbHash.isDataUri(uri)) {
             Bitmap bitmap = FastImageThumbHash.dataUri(uri);
@@ -344,11 +355,6 @@ class FastImageViewManager extends SimpleViewManager<FastImageViewWithUrl>
         view.setRecyclingKey(recyclingKey);
     }
 
-    @Override
-    public void setSourcePlaceholders(FastImageViewWithUrl view, @Nullable ReadableArray placeholders) {
-        view.setSourcePlaceholders(placeholders);
-    }
-
     @Override
     public void setLoopCount(FastImageViewWithUrl view, int loopCount) {
         view.setLoopCount(loopCount);

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

@@ -30,6 +30,7 @@ import androidx.annotation.RequiresApi;
 import androidx.appcompat.widget.AppCompatImageView;
 
 import com.bumptech.glide.GenericTransitionOptions;
+import com.bumptech.glide.Priority;
 import com.bumptech.glide.RequestBuilder;
 import com.bumptech.glide.RequestManager;
 import com.bumptech.glide.load.DataSource;
@@ -39,6 +40,7 @@ import com.bumptech.glide.load.resource.drawable.DrawableTransitionOptions;
 import com.bumptech.glide.load.resource.gif.GifDrawable;
 import com.bumptech.glide.request.Request;
 import com.bumptech.glide.request.RequestOptions;
+import com.bumptech.glide.request.target.CustomTarget;
 import com.bumptech.glide.request.target.DrawableImageViewTarget;
 import com.bumptech.glide.request.target.SizeReadyCallback;
 import com.bumptech.glide.request.transition.NoTransition;
@@ -46,6 +48,7 @@ import com.bumptech.glide.request.transition.Transition;
 import com.bumptech.glide.request.transition.TransitionFactory;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.bridge.ReadableType;
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.bridge.WritableNativeMap;
 import com.facebook.react.modules.i18nmanager.I18nUtil;
@@ -56,6 +59,10 @@ import com.facebook.react.uimanager.PointerEvents;
 import com.facebook.react.uimanager.ReactPointerEventsView;
 import com.facebook.react.uimanager.style.LogicalEdge;
 
+import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Objects;
 import javax.annotation.Nonnull;
 
 class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEventsView, ReactHitSlopView {
@@ -211,16 +218,72 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         return false;
     }
 
-    public void setSource(@Nullable ReadableMap source) {
-        mNeedsReload = true;
-        mPropSource = source;
-        if (mSources == null) mSource = source;
+    // The `source` prop: one source, or several (sizes of one image), each
+    // with its thumbhash or blurDataUri if it has one. Only a change besides
+    // those loads again: a new thumbhash for the same image (e.g. one that
+    // arrives later) shows at once (see updatePlaceholder).
+    public void setSource(@Nullable ReadableArray sources) {
+        List<Object> key = sourceKey(sources);
+        if (!mHasSource || !Objects.equals(key, mSourceKey)) {
+            mHasSource = true;
+            mSourceKey = key;
+            mNeedsReload = true;
+            mSources = sources != null && sources.size() > 1 ? sources : null;
+            mSourceIndex = -1;
+            if (mSources == null) mSource = sources != null && sources.size() == 1 ? map(sources, 0) : null;
+        }
+        mSourcePlaceholders = new ArrayList<>();
+        for (int i = 0; sources != null && i < sources.size(); i++) {
+            mSourcePlaceholders.add(sourcePlaceholder(map(sources, i)));
+        }
+        updatePlaceholder();
+    }
+
+    // The sources without their thumbhashes and blurDataUris, to compare.
+    private boolean mHasSource = false;
+    @Nullable
+    private List<Object> mSourceKey = null;
+
+    @Nullable
+    private static List<Object> sourceKey(@Nullable ReadableArray sources) {
+        if (sources == null) return null;
+        List<Object> key = new ArrayList<>();
+        for (int i = 0; i < sources.size(); i++) {
+            ReadableMap source = map(sources, i);
+            key.add(source == null ? null : withoutPlaceholders(source));
+        }
+        return key;
+    }
+
+    // A source without its thumbhash and blurDataUri.
+    private static HashMap<String, Object> withoutPlaceholders(ReadableMap source) {
+        HashMap<String, Object> map = source.toHashMap();
+        map.remove("thumbhash");
+        map.remove("blurDataUri");
+        return map;
+    }
+
+    @Nullable
+    private static ReadableMap map(ReadableArray array, int index) {
+        return array.getType(index) == ReadableType.Map ? array.getMap(index) : null;
     }
 
-    // The `source` prop. With several `sources`, mSource is the one picked for
-    // the view's size instead.
+    // A source's (or `placeholder`'s) ThumbHash, or its blurDataUri if it's a
+    // data uri (JS warns about another), or null.
     @Nullable
-    private ReadableMap mPropSource = null;
+    static String sourcePlaceholder(@Nullable ReadableMap source) {
+        if (source == null) return null;
+        String thumbhash = string(source, "thumbhash");
+        if (thumbhash != null && !thumbhash.isEmpty()) return thumbhash;
+        String blurDataUri = string(source, "blurDataUri");
+        return blurDataUri != null && FastImageThumbHash.isDataUri(blurDataUri) ? blurDataUri : null;
+    }
+
+    @Nullable
+    private static String string(ReadableMap map, String key) {
+        return map.hasKey(key) && map.getType(key) == ReadableType.String ? map.getString(key) : null;
+    }
+
     // Several sources (2 or more) of the same image at different sizes, or
     // null: the view loads the one whose size is closest to its own.
     @Nullable
@@ -238,13 +301,6 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
     @Nullable
     private FastImageViewManager mManager;
 
-    public void setSources(@Nullable ReadableArray sources) {
-        mNeedsReload = true;
-        mSources = sources != null && sources.size() > 1 ? sources : null;
-        mSourceIndex = -1;
-        if (mSources == null) mSource = mPropSource;
-    }
-
     // The box the image is drawn in: the view inside its padding, which is the
     // border widths (see updateBorderPadding).
     private int contentWidth() {
@@ -308,17 +364,20 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         return true;
     }
 
+    // Shows at once, as a new source placeholder does (see updatePlaceholder),
+    // without loading the image again.
     public void setPlaceholder(@Nullable Drawable placeholder) {
-        mNeedsReload = true;
         mPlaceholder = placeholder;
+        updatePlaceholder();
     }
 
-    // The `sourcePlaceholders` prop, by the source's index ("" for none; one
-    // for a single source): the picked source's ThumbHash or blurDataUri (a
-    // data uri) shows instead of the placeholder prop. JS sends them apart from
-    // the sources, so a new one for the same image doesn't reload it.
+    // The sources' ThumbHashes or blurDataUris, by the source's index (null
+    // for none): the picked source's shows instead of the placeholder prop.
+    private List<String> mSourcePlaceholders = new ArrayList<>();
+    // `placeholder` as a thumbhash or blurDataUri: shows for the sources
+    // without their own.
     @Nullable
-    private ReadableArray mSourcePlaceholders = null;
+    private String mPlaceholderHash = null;
     // What shows while the image loads and if it fails: the picked source's
     // ThumbHash or blurDataUri decoded (FastImageThumbHash), or the placeholder
     // prop. FastImage's own drawable either way, which Glide doesn't recycle.
@@ -333,18 +392,129 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
     @Nullable
     private String mInvalidPlaceholder = null;
 
-    public void setSourcePlaceholders(@Nullable ReadableArray placeholders) {
-        mSourcePlaceholders = placeholders;
+    public void setPlaceholderHash(@Nullable String hash) {
+        if (Objects.equals(hash, mPlaceholderHash)) return;
+        mPlaceholderHash = hash;
+        updatePlaceholder();
+    }
+
+    // `placeholder` as a url (a source): loaded apart from the image, at the
+    // most urgent priority, as it only helps if it comes before the image (or
+    // only from Glide's caches, with cache cacheOnly).
+    // Once it has, a copy shows instead of the other placeholders: FastImage's
+    // own drawable, which Glide doesn't recycle, so a fade can still draw it
+    // after its request is cleared. A failure shows nothing more.
+    @Nullable
+    private ReadableMap mPlaceholderSource = null;
+    @Nullable
+    private Drawable mUrlPlaceholder = null;
+    @Nullable
+    private CustomTarget<Drawable> mUrlPlaceholderTarget = null;
+
+    // Its load waits for the view's size (see startUrlPlaceholderLoad).
+    private boolean mUrlPlaceholderWaitsForSize = false;
+
+    public void setPlaceholderSource(@Nullable ReadableMap source) {
+        if (source == null && mPlaceholderSource == null) return;
+        mPlaceholderSource = source;
+        clearUrlPlaceholderTarget();
+        mUrlPlaceholderWaitsForSize = false;
+        mUrlPlaceholder = null;
         updatePlaceholder();
+        scheduleUrlPlaceholderLoad();
+    }
+
+    // Starts placeholderSource's load once the current callbacks have run: an
+    // image from the memory cache has shown by then, and needs none.
+    private void scheduleUrlPlaceholderLoad() {
+        post(new Runnable() {
+            @Override
+            public void run() {
+                startUrlPlaceholderLoad();
+            }
+        });
+    }
+
+    // Loads placeholderSource's image while the image loads (or after it
+    // failed), at the view's size, once it has one: not if the image showed,
+    // or it's already loaded or loading.
+    private void startUrlPlaceholderLoad() {
+        if (requestManager == null || mDropped || mUrlPlaceholder != null || mUrlPlaceholderTarget != null
+                || !FastImageViewConverter.hasUri(mPlaceholderSource)) return;
+        if (mLoadEnded && mShownRequest != null) return;
+        if (getWidth() <= 0 || getHeight() <= 0) {
+            mUrlPlaceholderWaitsForSize = true;
+            return;
+        }
+        FastImageSource imageSource = FastImageViewConverter.getImageSource(getContext(), mPlaceholderSource);
+        if (imageSource == null) return;
+        CustomTarget<Drawable> target = new CustomTarget<Drawable>(getWidth(), getHeight()) {
+            @Override
+            public void onResourceReady(@NonNull Drawable resource, @Nullable Transition<? super Drawable> transition) {
+                if (this != mUrlPlaceholderTarget) return;
+                mUrlPlaceholder = ownCopy(resource);
+                updatePlaceholder();
+                // With the copy, Glide's can go back to its pools (a load
+                // can't be cleared from its own callback).
+                final CustomTarget<Drawable> done = this;
+                post(new Runnable() {
+                    @Override
+                    public void run() {
+                        if (requestManager != null) requestManager.clear(done);
+                    }
+                });
+            }
+
+            @Override
+            public void onLoadCleared(@Nullable Drawable placeholder) {
+            }
+        };
+        mUrlPlaceholderTarget = target;
+        requestManager
+                .load(imageSource.getSourceForLoad())
+                .apply(FastImageViewConverter.getOptions(getContext(), imageSource, mPlaceholderSource)
+                        .priority(Priority.IMMEDIATE)
+                        // Copied on a software canvas (see ownCopy).
+                        .disallowHardwareConfig())
+                .into(target);
     }
 
-    // The picked source's ThumbHash or blurDataUri, or null.
+    private void clearUrlPlaceholderTarget() {
+        if (mUrlPlaceholderTarget != null && requestManager != null) requestManager.clear(mUrlPlaceholderTarget);
+        mUrlPlaceholderTarget = null;
+    }
+
+    // A bitmap of the drawable (an animated one's first frame), scaled up
+    // smoothly as the other placeholders are, or null for one with no size.
+    @Nullable
+    private Drawable ownCopy(Drawable drawable) {
+        int width = drawable.getIntrinsicWidth();
+        int height = drawable.getIntrinsicHeight();
+        if (width <= 0 || height <= 0) return null;
+        try {
+            Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
+            Canvas canvas = new Canvas(bitmap);
+            Drawable copy = drawable.getConstantState() != null ? drawable.getConstantState().newDrawable().mutate() : drawable;
+            copy.setBounds(0, 0, width, height);
+            copy.draw(canvas);
+            BitmapDrawable own = new BitmapDrawable(getResources(), bitmap);
+            own.setFilterBitmap(true);
+            return own;
+        } catch (OutOfMemoryError | IllegalStateException e) {
+            // As startFade: out of memory, or a hardware bitmap after all.
+            return null;
+        }
+    }
+
+    // The picked source's ThumbHash or blurDataUri, or `placeholder`'s, or
+    // null.
     @Nullable
     private String pickedSourcePlaceholder() {
         int index = mSources == null ? 0 : mSourceIndex;
-        String key = mSourcePlaceholders != null && index >= 0 && index < mSourcePlaceholders.size()
-                && !mSourcePlaceholders.isNull(index) ? mSourcePlaceholders.getString(index) : null;
-        return key == null || key.isEmpty() ? null : key;
+        // None until one is picked.
+        if (index < 0) return null;
+        String key = index < mSourcePlaceholders.size() ? mSourcePlaceholders.get(index) : null;
+        return key != null ? key : mPlaceholderHash;
     }
 
     // Sets mShownPlaceholder for the picked source. A view showing the previous
@@ -372,10 +542,16 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
                 mInvalidPlaceholder = key;
             }
         }
+        // placeholderSource's image, once it has loaded, shows instead.
+        if (mUrlPlaceholder != null) placeholder = mUrlPlaceholder;
         if (placeholder == mShownPlaceholder) return;
         boolean showing = mShowsPlaceholder;
         mShownPlaceholder = placeholder;
-        if (showing) setImageDrawable(placeholder);
+        // Also one that arrives while the view shows nothing (no placeholder
+        // while the image loads, or after it failed): never over an image.
+        Drawable shown = getDrawable();
+        boolean showsNothing = shown == null || shown == FastImageViewConverter.TRANSPARENT_DRAWABLE;
+        if (showing || (placeholder != null && showsNothing)) setImageDrawable(placeholder);
     }
 
     // The events JS has a handler for (the handledEvents prop): the view only
@@ -449,6 +625,7 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
     void drop() {
         mDropped = true;
         clearView(requestManager);
+        clearUrlPlaceholderTarget();
         endProgress();
     }
 
@@ -1183,10 +1360,11 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
             setImageMatrix(matrix);
             return;
         }
-        // A source's placeholder (a ThumbHash or a blurDataUri) stands for an
-        // image whose size isn't known yet: with scale-down and none (which
-        // show an image at its own size), it's shown as with contain.
-        boolean hashFits = drawable == mShownPlaceholder && mPlaceholderKey != null;
+        // A source's placeholder (a ThumbHash or a blurDataUri), or
+        // placeholderSource's image, stands for an image whose size isn't
+        // known yet: with scale-down and none (which show an image at its own
+        // size), it's shown as with contain.
+        boolean hashFits = drawable == mShownPlaceholder && (mPlaceholderKey != null || drawable == mUrlPlaceholder);
         if (mLayoutScaleType == ScaleType.CENTER_CROP || mLayoutScaleType == ScaleType.FIT_CENTER || hashFits) {
             float x = viewWidth / drawableWidth;
             float y = viewHeight / drawableHeight;
@@ -1352,6 +1530,17 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
     // The loading image loaded (FastImageRequestListener).
     void onImageLoaded() {
         mLoadEnded = true;
+        // The image came first: its placeholder isn't needed (not from
+        // within Glide's callback).
+        if (mUrlPlaceholder == null) {
+            mUrlPlaceholderWaitsForSize = false;
+            post(new Runnable() {
+                @Override
+                public void run() {
+                    if (mUrlPlaceholder == null && mLoadEnded && mShownRequest != null) clearUrlPlaceholderTarget();
+                }
+            });
+        }
         endProgress();
         // Before the view shows it (the target does once this returns).
         applyObjectFit();
@@ -1380,6 +1569,10 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
             invalidate();
         }
         if (!switchSourceIfResized()) reloadIfResized();
+        if (mUrlPlaceholderWaitsForSize && w > 0 && h > 0) {
+            mUrlPlaceholderWaitsForSize = false;
+            scheduleUrlPlaceholderLoad();
+        }
     }
 
     private void reloadIfResized() {
@@ -1508,6 +1701,7 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
             }
         });
         builder.into(target);
+        if (!quiet) scheduleUrlPlaceholderLoad();
     }
 
     // Loading the image that's showing again (at a new size, or with another
@@ -1524,6 +1718,8 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         endProgress();
         applyObjectFit();
         mShownRequest = null;
+        // Shows instead of the other placeholders once it loads.
+        scheduleUrlPlaceholderLoad();
         final int load = mLoadCount;
         // Not from within Glide's callback. Without a thumbnail Glide shows the
         // placeholder the request started with: a source placeholder that changed since
@@ -1605,6 +1801,7 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
 
             // Clear the image.
             setImageDrawable(null);
+            scheduleUrlPlaceholderLoad();
             return;
         }
 
@@ -1620,7 +1817,8 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
         // resolved: fire onError and onLoadEnd and show the placeholder prop,
         // as on iOS (#1028, #945).
         if (mSource != null && (imageSource == null || imageSource.getUri().toString().length() == 0)) {
-            String error = "Invalid source: " + mSource;
+            // Without its thumbhash or blurDataUri (a data uri can be long).
+            String error = "Invalid source: " + withoutPlaceholders(mSource);
             WritableMap event = new WritableNativeMap();
             event.putString("error", error);
             FastImageEvents.send(this, REACT_ON_ERROR_EVENT, event);
@@ -1632,6 +1830,7 @@ class FastImageViewWithUrl extends AppCompatImageView implements ReactPointerEve
 
             endProgress();
             setImageDrawable(mShownPlaceholder);
+            scheduleUrlPlaceholderLoad();
             return;
         }
 

package/dist/index.cjs.js

@@ -261,8 +261,14 @@ var FastImageViewNativeComponent_default = (0, react_native.codegenNativeCompone
 var NativeFastImageModule_default = react_native.TurboModuleRegistry.get("FastImageModule");
 //#endregion
 //#region src/placeholders.ts
+const SCHEME = /^[a-z][a-z\d+.-]*:/i;
 function isImageName(value) {
-	return !/^[a-z][a-z\d+.-]*:/i.test(value) && !value.startsWith("/");
+	return !SCHEME.test(value) && !value.startsWith("/");
+}
+function placeholderSource(value) {
+	const uri = typeof value === "string" ? value : value && typeof value === "object" ? value.uri : void 0;
+	if (typeof uri !== "string" || !/^https?:/i.test(uri)) return void 0;
+	return typeof value === "string" ? { uri } : value;
 }
 function hasSourcePlaceholder(value) {
 	return !!value && typeof value === "object" && ("thumbhash" in value || "blurDataUri" in value);
@@ -270,20 +276,10 @@ function hasSourcePlaceholder(value) {
 function dataUri(value) {
 	if (typeof value !== "string" || value === "") return void 0;
 	if (/^data:/i.test(value)) return value;
-	if (typeof __DEV__ !== "undefined" && __DEV__) warnOnce("placeholder-url", `react-native-fast-image: \`placeholder\` and \`blurDataUri\` don't load urls: "${value.slice(0, 60)}" is ignored. Use a data uri (data:image/…), or for \`placeholder\`, a require()d image or the name of an image bundled with the app.`, "warn");
+	if (typeof __DEV__ !== "undefined" && __DEV__) warnOnce("placeholder-url", `react-native-fast-image: \`blurDataUri\` takes a data uri (data:image/…): "${value.slice(0, 60)}" is ignored. For a placeholder loaded from a url, use \`placeholder\`.`, "warn");
 }
 //#endregion
 //#region src/index.tsx
-function withoutPlaceholders(source) {
-	if (!hasSourcePlaceholder(source)) return source;
-	const { thumbhash: _thumbhash, blurDataUri: _blurDataUri, ...rest } = source;
-	return rest;
-}
-function sourcePlaceholder(source) {
-	if (!source || typeof source !== "object") return "";
-	const { thumbhash, blurDataUri } = source;
-	return thumbhash || dataUri(blurDataUri) || "";
-}
 const resolvePlaceholder = (placeholder) => {
 	if (typeof placeholder === "string") {
 		if (isImageName(placeholder)) return react_native.Platform.OS === "android" ? placeholder : { uri: placeholder };
@@ -348,25 +344,19 @@ function builtInTransition() {
 }
 let defaultTransition;
 function FastImageBase({ source, placeholder, defaultSource, tintColor, onLoadStart, onProgress, onLoad, onError, onLoadEnd, style, children, objectFit, objectPosition, loop, transition, loading: _loading, sizes: _sizes, forwardedRef, ...viewProps }) {
-	var _props$recyclingKey, _defaultTransition;
+	var _placeholderSource, _props$recyclingKey, _defaultTransition;
 	const { fallback, resizeMode: _resizeMode, ...props } = viewProps;
 	if (__DEV__ && fallback !== void 0) warnOnce("fallback", "react-native-fast-image: `fallback` was removed in 10.0, and does nothing: images always load natively. Remove it, or use React Native's Image for those images.", "warn");
 	if (__DEV__) warnIfChildren(children);
 	const resolvedTintColor = tintColor != null ? tintColor : fromStyle(style, "tintColor");
 	const fit = resolveObjectFit(objectFit, style);
 	const position = objectPositionOrCentered(objectPosition);
-	const shared = hasSourcePlaceholder(placeholder) ? sourcePlaceholder(placeholder) : "";
-	const { resolvedSource, sources, sourcePlaceholders } = (0, react.useMemo)(() => {
-		const sources = Array.isArray(source) ? source.length === 1 ? void 0 : source : void 0;
-		const single = Array.isArray(source) ? source[0] : source;
-		const placeholders = (sources !== null && sources !== void 0 ? sources : [single]).map((entry) => sourcePlaceholder(entry) || shared);
-		return {
-			resolvedSource: sources ? void 0 : react_native.Image.resolveAssetSource(withoutPlaceholders(single)),
-			sources: (sources === null || sources === void 0 ? void 0 : sources.some(hasSourcePlaceholder)) ? sources.map(withoutPlaceholders) : sources,
-			sourcePlaceholders: placeholders.some(Boolean) ? placeholders : void 0
-		};
-	}, [source, shared]);
-	const resolvedPlaceholder = resolvePlaceholder(hasSourcePlaceholder(placeholder) ? defaultSource : placeholder !== null && placeholder !== void 0 ? placeholder : defaultSource);
+	const resolvedSource = (0, react.useMemo)(() => {
+		for (const entry of [source].flat()) dataUri(entry === null || entry === void 0 ? void 0 : entry.blurDataUri);
+		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]);
+	const resolvedPlaceholder = hasSourcePlaceholder(placeholder) ? placeholder.thumbhash || dataUri(placeholder.blurDataUri) ? placeholder : resolvePlaceholder(defaultSource) : (_placeholderSource = placeholderSource(placeholder)) !== null && _placeholderSource !== void 0 ? _placeholderSource : resolvePlaceholder(placeholder !== null && placeholder !== void 0 ? placeholder : defaultSource);
 	return /* @__PURE__ */ react.default.createElement(FastImageViewNativeComponent_default, {
 		...props,
 		ref: forwardedRef,
@@ -375,8 +365,6 @@ function FastImageBase({ source, placeholder, defaultSource, tintColor, onLoadSt
 		loopCount: loopCount(loop),
 		...resolveTransition(transition, (_defaultTransition = defaultTransition) !== null && _defaultTransition !== void 0 ? _defaultTransition : builtInTransition()),
 		source: resolvedSource,
-		sources,
-		sourcePlaceholders,
 		placeholder: resolvedPlaceholder,
 		onFastImageLoadStart: onLoadStart,
 		onFastImageProgress: onProgress,

package/dist/index.cjs.js.flow

@@ -110,6 +110,13 @@ export type PreloadResult = PreloadSuccess | PreloadFailure
 export type PreloadFn = (
     sources: Array<FastImageSource>,
 ) => Promise<Array<PreloadResult>>
+export type PlaceholderSource = {
+    uri?: string,
+    headers?: Object,
+    cacheKey?: string,
+    cache?: CacheControls,
+}
+
 export type SourcePlaceholder = {
     thumbhash?: string,
     blurDataUri?: string,
@@ -138,8 +145,8 @@ export type FastImageProps = $ReadOnly<{|
     onLoadStart?: ?() => void,
     onProgress?: ?(event: OnProgressEvent) => void,
 
-    source?: ?(FastImageSource | Array<FastImageSource> | number),
-    placeholder?: ?(number | string | SourcePlaceholder),
+    source?: ?(FastImageSource | Array<FastImageSource | number> | number),
+    placeholder?: ?(number | string | SourcePlaceholder | PlaceholderSource),
     // Deprecated: use placeholder, which is the same.
     defaultSource?: ?number,