react-native-fast-image 8.25.0 → 8.27.0

package/README.md

@@ -124,6 +124,26 @@ With Expo, add it with [expo-build-properties](https://docs.expo.dev/versions/la
 
 The app needs access to the photo library, which it has if it got the url from there. A photo library image is decoded at about the view's size, since photos are large and usually shown small; `onLoad` still reports the photo's own size. `FastImage.preload` of a `ph://` source loads the full-size photo (there's no view to size it for), which doesn't make a view's smaller copy load faster, so preloading photo library images usually isn't worth it. Without the plugin, a `ph://` source fails with `onError`, saying so. `assets-library://` urls aren't supported. On Android, photo pickers give `content://` urls, which load as they are.
 
+#### SVG images
+
+SVG images (remote, bundled with `require()`, or local files) load when the app has an SVG library: SDWebImageSVGCoder on iOS and AndroidSVG on Android. Add them to the app:
+
+```ruby
+# ios/Podfile
+pod 'SDWebImageSVGCoder'
+```
+
+```groovy
+// android/app/build.gradle
+dependencies {
+    implementation 'com.caverock:androidsvg-aar:1.4'
+}
+```
+
+On Android either of AndroidSVG's packages works (`com.caverock:androidsvg-aar` or `com.caverock:androidsvg`), so an app that already has one (e.g. from another library) needs nothing more. With Expo, add the pod with [expo-build-properties](https://docs.expo.dev/versions/latest/sdk/build-properties/) (`{ "ios": { "extraPods": [{ "name": "SDWebImageSVGCoder" }] } }`); an app that uses `expo-image` already has both.
+
+An SVG is drawn at the size it's shown at, so it's sharp at any size, and then works like any other image: `resizeMode`, `tintColor`, `blurRadius`, `transition` and caching. `onLoad` reports the SVG's own size: its `width` and `height`, or its `viewBox`'s (300x150 if it has neither). Animated SVGs (SMIL or CSS animations) show their first state. On iOS, SVG images need iOS 13 or later. Without the SVG library, an SVG image fails with `onError`, saying what to add (on iOS, for a url that ends in `.svg`).
+
 ---
 
 ### `source.headers?: object`
@@ -175,6 +195,33 @@ Whether the decoded image is kept in the memory cache. **Default: true.** With `
 
 ---
 
+### Several sizes of an image
+
+`source` can also be an array of the same image at different sizes, each with its `width` and `height` in pixels (times `scale`, if it has one). The view loads the one whose size is closest to its own, in pixels, so a small view downloads a small image:
+
+```jsx
+<FastImage
+    style={{ width: 120, height: 120 }}
+    source={[
+        { uri: 'https://example.com/photo-200.jpg', width: 200, height: 200 },
+        { uri: 'https://example.com/photo-800.jpg', width: 800, height: 800 },
+        {
+            uri: 'https://example.com/photo-2000.jpg',
+            width: 2000,
+            height: 2000,
+        },
+    ]}
+/>
+```
+
+- The view picks once it has been laid out. One that has no size (e.g. sized from `onLoad`) loads the largest.
+- 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 }`.
+- An array of one is the same as that source.
+
+---
+
 ### `defaultSource?: number`
 
 - An asset loaded with `require(...)`.
@@ -512,8 +559,9 @@ With [react-native-web](https://necolas.github.io/react-native-web/), FastImage
 
 Support is minimal:
 
-- Props that work: `source` (a `uri`, or a `require()`d image), `defaultSource`, `resizeMode`, `tintColor`, `blurRadius`, `style`, children, `onLoadStart`, `onLoad`, `onError`, `onLoadEnd`, and View props such as `testID`, accessibility props, `onLayout` and `pointerEvents`.
+- Props that work: `source` (a `uri`, a `require()`d image, or several sizes), `defaultSource`, `resizeMode`, `tintColor`, `blurRadius`, `style`, children, `onLoadStart`, `onLoad`, `onError`, `onLoadEnd`, and View props such as `testID`, accessibility props, `onLayout` and `pointerEvents`.
 - Ignored: `source.headers` (a browser can't send them for an image), `source.priority`, `source.cache`, `source.cacheKey`, `source.memoryCache`, `recyclingKey`, `loop`, `imageRendering`, `paused`, `transition`, `downsample`, `fallback` and `onProgress`.
+- Several sizes are shown with a lazily loaded `<img>` whose `srcset` lists them, with `sizes="auto, 100vw"`: the browser loads the one for the width the image is shown at, in device pixels (usually the smallest that's at least as wide). Browsers that don't support `sizes="auto"` use the viewport's width. `tintColor`, `defaultSource` and `resizeMode="repeat"` don't apply to them.
 - `FastImage.preload` loads the images into the browser's cache and resolves with a result per source. `clearMemoryCache`, `clearDiskCache` and `configureCache` resolve without doing anything (the browser manages its cache), and `getCachePath` and `writeToCache` resolve with `{ ok: false, error: 'Not supported on the web' }`.
 
 ## Troubleshooting

package/android/build.gradle

@@ -81,4 +81,7 @@ dependencies {
     implementation "com.github.bumptech.glide:annotations:${glideVersion}"
     implementation "com.github.bumptech.glide:okhttp3-integration:${glideVersion}"
     annotationProcessor "com.github.bumptech.glide:compiler:${glideVersion}"
+    // SVG images, when the app has AndroidSVG (either package): not shipped,
+    // so there's never a second copy of it (see FastImageSvg).
+    compileOnly 'com.caverock:androidsvg-aar:1.4'
 }

package/android/consumer-rules.pro

@@ -41,3 +41,8 @@
 -keep class com.facebook.react.uimanager.UIManagerHelper {
   public static *** getEventDispatcherForReactTag(com.facebook.react.bridge.ReactContext, int);
 }
+
+# AndroidSVG, which FastImage uses for SVG images when the app has it
+# (FastImageSvgRenderer), and doesn't ship. Without it, R8 would stop at the
+# missing classes.
+-dontwarn com.caverock.androidsvg.**

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

@@ -120,6 +120,7 @@ public class FastImageOkHttpProgressGlideModule extends LibraryGlideModule {
         }
         OkHttpClient client = builder.build();
         registry.replace(GlideUrl.class, InputStream.class, new UrlLoaderFactory(client));
+        FastImageSvg.register(registry, glide.getBitmapPool());
 
         // `cache: 'web'` skips Glide's caches and relies on HTTP caching, so
         // those urls get a client with an HTTP cache (#280): one of their own,
@@ -202,7 +203,7 @@ public class FastImageOkHttpProgressGlideModule extends LibraryGlideModule {
 
     // Fails a successful response that's clearly not an image: its type isn't
     // an image's (text, JSON, XML other than SVG) and its first bytes aren't a
-    // format Glide recognizes, e.g. a captive portal's or a proxy's HTML page
+    // format Glide recognizes or an SVG's, e.g. a captive portal's or a proxy's HTML page
     // sent with status 200. Glide keeps the bytes it downloads in its disk
     // cache before decoding them (and doesn't remove them when that fails), as
     // does the HTTP cache of `web` images, so every later load of the url
@@ -227,6 +228,10 @@ public class FastImageOkHttpProgressGlideModule extends LibraryGlideModule {
                 if (imageType != ImageHeaderParser.ImageType.UNKNOWN) {
                     return response;
                 }
+                byte[] head = response.peekBody(1024).bytes();
+                if (FastImageSvg.looksLikeSvg(head, head.length)) {
+                    return response;
+                }
                 response.close();
                 throw new IOException("Not an image (Content-Type: " + type + ")");
             }

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

@@ -54,11 +54,14 @@ public class FastImageRequestListener implements RequestListener<Drawable> {
         return false;
     }
 
-    // The first root cause's message, e.g. "Not Found, status code: 404".
     // The first root cause's message, e.g. "Not Found, status code: 404" (also
-    // for preload results).
+    // for preload results). For an SVG without AndroidSVG, what to add: other
+    // decoders (e.g. Glide's video one) also tried it, and failed first.
     static String errorMessage(@androidx.annotation.Nullable GlideException e) {
         if (e != null) {
+            for (Throwable cause : e.getRootCauses()) {
+                if (FastImageSvg.MISSING.equals(cause.getMessage())) return FastImageSvg.MISSING;
+            }
             for (Throwable cause : e.getRootCauses()) {
                 if (cause.getMessage() != null) return cause.getMessage();
             }

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

@@ -57,6 +57,13 @@ public class FastImageSource extends ImageSource {
         super(context, source, width, height);
         mHeaders = headers == null ? Headers.DEFAULT : headers;
         mUri = super.getUri();
+        if (mUri == null || TextUtils.isEmpty(mUri.toString())) {
+            // A bundled image that release builds package as a raw resource
+            // (e.g. an SVG, which isn't a drawable): React Native's
+            // ImageSource only looks for drawables.
+            Uri raw = rawResourceUri(context, source);
+            if (raw != null) mUri = raw;
+        }
 
         if (isResource() && TextUtils.isEmpty(mUri.toString())) {
             throw new Resources.NotFoundException("Local Resource Not Found. Resource: '" + getSource() + "'.");
@@ -76,6 +83,16 @@ public class FastImageSource extends ImageSource {
     }
 
 
+    // The raw resource with the source's name (a bundled image's source is
+    // its resource name, e.g. src_images_logo), or null.
+    @Nullable
+    private static Uri rawResourceUri(Context context, @Nullable String source) {
+        if (source == null || source.isEmpty() || source.contains(":")) return null;
+        int id = context.getResources().getIdentifier(source, "raw", context.getPackageName());
+        if (id == 0) return null;
+        return Uri.parse(ANDROID_RESOURCE_SCHEME + "://" + context.getPackageName() + "/" + id);
+    }
+
     public boolean isBase64Resource() {
         return mUri != null && FastImageSource.isBase64Uri(mUri);
     }

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

@@ -0,0 +1,161 @@
+package com.dylanvann.fastimage;
+
+import android.graphics.Bitmap;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import com.bumptech.glide.Registry;
+import com.bumptech.glide.load.Options;
+import com.bumptech.glide.load.ResourceDecoder;
+import com.bumptech.glide.load.engine.Resource;
+import com.bumptech.glide.load.engine.bitmap_recycle.BitmapPool;
+import com.bumptech.glide.util.ByteBufferUtil;
+
+import java.io.ByteArrayOutputStream;
+import java.io.IOException;
+import java.io.InputStream;
+import java.nio.ByteBuffer;
+import java.nio.charset.StandardCharsets;
+import java.util.Locale;
+
+// SVG images (static), drawn with AndroidSVG when the app has it: either of
+// its packages (com.caverock:androidsvg or com.caverock:androidsvg-aar).
+// FastImage compiles against it but doesn't ship it, so an app never gets a
+// second copy of it (from another library, or its own). Without it, an SVG
+// image fails with a message saying what to add.
+//
+// The decoders come after Glide's own, so they're only asked about data
+// Glide couldn't decode, and only take data that starts like an SVG. This
+// class doesn't use AndroidSVG itself (FastImageSvgRenderer does), so it
+// loads without it.
+final class FastImageSvg {
+    static final String MISSING =
+            "SVG images need AndroidSVG: add implementation 'com.caverock:androidsvg-aar:1.4' to the app's dependencies";
+    private static final int HEAD_LENGTH = 1024;
+    @Nullable
+    private static Boolean available;
+
+    private FastImageSvg() {
+    }
+
+    static synchronized boolean available() {
+        if (available == null) {
+            try {
+                Class.forName("com.caverock.androidsvg.SVG");
+                available = true;
+            } catch (Throwable e) {
+                available = false;
+            }
+        }
+        return available;
+    }
+
+    static void register(@NonNull Registry registry, @NonNull BitmapPool pool) {
+        registry.append(InputStream.class, Bitmap.class, new StreamDecoder(pool))
+                // Data Glide holds in memory, e.g. from its disk cache.
+                .append(ByteBuffer.class, Bitmap.class, new BufferDecoder(pool));
+    }
+
+    // Whether the data starts like an SVG document: its first element is
+    // <svg> (after a byte order mark, whitespace, an XML declaration, comments
+    // or a doctype), so e.g. an HTML page with an inline SVG isn't one.
+    static boolean looksLikeSvg(@NonNull byte[] head, int length) {
+        String text = new String(head, 0, length, StandardCharsets.UTF_8).toLowerCase(Locale.ROOT);
+        int i = text.startsWith("\uFEFF") ? 1 : 0;
+        while (i < text.length()) {
+            char c = text.charAt(i);
+            if (Character.isWhitespace(c)) {
+                i++;
+            } else if (text.startsWith("<?", i)) {
+                i = skipPast(text, i, "?>");
+            } else if (text.startsWith("<!--", i)) {
+                i = skipPast(text, i, "-->");
+            } else if (text.startsWith("<!", i)) {
+                // A doctype, whose internal subset ([...]) can have '>'s.
+                int subset = text.indexOf('[', i);
+                int close = text.indexOf('>', i);
+                if (subset >= 0 && subset < close) i = skipPast(text, subset, "]");
+                if (i >= 0) i = skipPast(text, i, ">");
+            } else {
+                return text.startsWith("<svg", i);
+            }
+            if (i < 0) return false;
+        }
+        return false;
+    }
+
+    // The index after the end marker from i, or -1 if it isn't there.
+    private static int skipPast(String text, int i, String end) {
+        int found = text.indexOf(end, i);
+        return found < 0 ? -1 : found + end.length();
+    }
+
+    private static byte[] readAll(InputStream stream) throws IOException {
+        ByteArrayOutputStream out = new ByteArrayOutputStream();
+        byte[] chunk = new byte[16 * 1024];
+        int read;
+        while ((read = stream.read(chunk)) != -1) {
+            out.write(chunk, 0, read);
+        }
+        return out.toByteArray();
+    }
+
+    private static Resource<Bitmap> decode(byte[] data, int width, int height, Options options, BitmapPool pool)
+            throws IOException {
+        if (!available()) {
+            throw new IOException(MISSING);
+        }
+        return FastImageSvgRenderer.render(data, width, height, options, pool);
+    }
+
+    private static final class StreamDecoder implements ResourceDecoder<InputStream, Bitmap> {
+        private final BitmapPool pool;
+
+        StreamDecoder(BitmapPool pool) {
+            this.pool = pool;
+        }
+
+        @Override
+        public boolean handles(@NonNull InputStream source, @NonNull Options options) throws IOException {
+            // Glide rewinds the stream before decoding.
+            byte[] head = new byte[HEAD_LENGTH];
+            int length = 0;
+            int read;
+            while (length < head.length && (read = source.read(head, length, head.length - length)) != -1) {
+                length += read;
+            }
+            return looksLikeSvg(head, length);
+        }
+
+        @Nullable
+        @Override
+        public Resource<Bitmap> decode(@NonNull InputStream source, int width, int height, @NonNull Options options)
+                throws IOException {
+            return FastImageSvg.decode(readAll(source), width, height, options, pool);
+        }
+    }
+
+    private static final class BufferDecoder implements ResourceDecoder<ByteBuffer, Bitmap> {
+        private final BitmapPool pool;
+
+        BufferDecoder(BitmapPool pool) {
+            this.pool = pool;
+        }
+
+        @Override
+        public boolean handles(@NonNull ByteBuffer source, @NonNull Options options) {
+            ByteBuffer copy = source.duplicate();
+            byte[] head = new byte[Math.min(HEAD_LENGTH, copy.remaining())];
+            copy.get(head);
+            return looksLikeSvg(head, head.length);
+        }
+
+        @Nullable
+        @Override
+        public Resource<Bitmap> decode(@NonNull ByteBuffer source, int width, int height, @NonNull Options options)
+                throws IOException {
+            return FastImageSvg.decode(readAll(ByteBufferUtil.toStream(source)), width, height, options, pool);
+        }
+    }
+}

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

@@ -0,0 +1,86 @@
+package com.dylanvann.fastimage;
+
+import android.graphics.Bitmap;
+import android.graphics.Canvas;
+import android.graphics.RectF;
+
+import com.bumptech.glide.load.Options;
+import com.bumptech.glide.load.engine.Resource;
+import com.bumptech.glide.load.engine.bitmap_recycle.BitmapPool;
+import com.bumptech.glide.load.resource.bitmap.BitmapResource;
+import com.bumptech.glide.load.resource.bitmap.DownsampleStrategy;
+import com.caverock.androidsvg.SVG;
+import com.caverock.androidsvg.SVGParseException;
+
+import java.io.ByteArrayInputStream;
+import java.io.IOException;
+
+// Draws an SVG into a bitmap with AndroidSVG, at the size the request's
+// downsample strategy gives for the view (as Glide decodes other images, but
+// also larger than the SVG's own size, as it's drawn, not scaled up). Glide
+// then applies the view's transformations (scale type, blur) as for any
+// bitmap. Only used when the app has AndroidSVG (see FastImageSvg).
+final class FastImageSvgRenderer {
+    // An SVG with neither a size nor a viewBox, as browsers size one.
+    private static final float DEFAULT_WIDTH = 300;
+    private static final float DEFAULT_HEIGHT = 150;
+    // At most this many pixels (a 4096 x 4096 bitmap), however large the view.
+    private static final float MAX_PIXELS = 4096f * 4096f;
+
+    private FastImageSvgRenderer() {
+    }
+
+    static Resource<Bitmap> render(byte[] data, int width, int height, Options options, BitmapPool pool)
+            throws IOException {
+        SVG svg;
+        try {
+            svg = SVG.getFromInputStream(new ByteArrayInputStream(data));
+        } catch (SVGParseException e) {
+            throw new IOException("Cannot decode the SVG: " + e.getMessage(), e);
+        }
+        // The SVG's own size: its width and height, or its viewBox's.
+        RectF viewBox = svg.getDocumentViewBox();
+        float ownWidth = svg.getDocumentWidth();
+        float ownHeight = svg.getDocumentHeight();
+        if (viewBox != null && viewBox.width() > 0 && viewBox.height() > 0) {
+            if (ownWidth <= 0 && ownHeight <= 0) {
+                ownWidth = viewBox.width();
+                ownHeight = viewBox.height();
+            } else if (ownWidth <= 0) {
+                ownWidth = ownHeight * viewBox.width() / viewBox.height();
+            } else if (ownHeight <= 0) {
+                ownHeight = ownWidth * viewBox.height() / viewBox.width();
+            }
+        } else {
+            if (ownWidth <= 0 || ownHeight <= 0) {
+                ownWidth = DEFAULT_WIDTH;
+                ownHeight = DEFAULT_HEIGHT;
+            }
+            // Scaled to the bitmap through a viewBox of its own size.
+            svg.setDocumentViewBox(0, 0, ownWidth, ownHeight);
+        }
+        int sourceWidth = Math.max(1, Math.round(ownWidth));
+        int sourceHeight = Math.max(1, Math.round(ownHeight));
+
+        // The strategy also records the SVG's own size for onLoad
+        // (FastImageSourceSize.Capture).
+        DownsampleStrategy strategy = options.get(DownsampleStrategy.OPTION);
+        int targetWidth = width > 0 ? width : sourceWidth;
+        int targetHeight = height > 0 ? height : sourceHeight;
+        float scale = strategy != null
+                ? strategy.getScaleFactor(sourceWidth, sourceHeight, targetWidth, targetHeight)
+                : 1f;
+        if (Float.isNaN(scale) || Float.isInfinite(scale) || scale <= 0) scale = 1f;
+        float pixels = sourceWidth * scale * sourceHeight * scale;
+        if (pixels > MAX_PIXELS) scale *= (float) Math.sqrt(MAX_PIXELS / pixels);
+        int bitmapWidth = Math.max(1, Math.round(sourceWidth * scale));
+        int bitmapHeight = Math.max(1, Math.round(sourceHeight * scale));
+
+        svg.setDocumentWidth(bitmapWidth);
+        svg.setDocumentHeight(bitmapHeight);
+        // Cleared (transparent), from Glide's pool.
+        Bitmap bitmap = pool.get(bitmapWidth, bitmapHeight, Bitmap.Config.ARGB_8888);
+        svg.renderToCanvas(new Canvas(bitmap));
+        return BitmapResource.obtain(bitmap, pool);
+    }
+}

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

@@ -14,6 +14,7 @@ import androidx.annotation.NonNull;
 
 import com.bumptech.glide.Glide;
 import com.bumptech.glide.RequestManager;
+import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.bridge.WritableNativeMap;
@@ -69,6 +70,11 @@ class FastImageViewManager extends SimpleViewManager<FastImageViewWithUrl> imple
         view.setSource(source);
     }
 
+    @ReactProp(name = "sources")
+    public void setSources(FastImageViewWithUrl view, @Nullable ReadableArray sources) {
+        view.setSources(sources);
+    }
+
     @ReactProp(name = "defaultSource")
     public void setDefaultSource(FastImageViewWithUrl view, @Nullable String source) {
         view.setDefaultSource(

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

@@ -35,6 +35,7 @@ import com.bumptech.glide.request.target.SizeReadyCallback;
 import com.bumptech.glide.request.transition.NoTransition;
 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.WritableMap;
 import com.facebook.react.bridge.WritableNativeMap;
@@ -63,7 +64,89 @@ class FastImageViewWithUrl extends AppCompatImageView {
 
     public void setSource(@Nullable ReadableMap source) {
         mNeedsReload = true;
-        mSource = source;
+        mPropSource = source;
+        if (mSources == null) mSource = source;
+    }
+
+    // The `source` prop. With several `sources`, mSource is the one picked for
+    // the view's size instead.
+    @Nullable
+    private ReadableMap mPropSource = 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
+    private ReadableArray mSources = null;
+    // Several sources: the index of the one picked (-1 before one is), and
+    // whether the load waits for the view's size (after layout), or has
+    // waited (then it loads the largest if the view still has no size).
+    private int mSourceIndex = -1;
+    private boolean mWaitsForSize = false;
+    private boolean mWaitedForSize = false;
+    // Several sources: the next load switches to another one for a new view
+    // size. It's the same picture at another size, so it doesn't fade in.
+    private boolean mSwitchesSource = false;
+    // What the last update was called with, to load once the view has a size.
+    @Nullable
+    private FastImageViewManager mManager;
+    @Nullable
+    private Map<String, List<FastImageViewWithUrl>> mViewsForUrlsMap;
+
+    public void setSources(@Nullable ReadableArray sources) {
+        mNeedsReload = true;
+        mSources = sources != null && sources.size() > 1 ? sources : null;
+        mSourceIndex = -1;
+        if (mSources == null) mSource = mPropSource;
+    }
+
+    // Of several sources, the index of the one whose size in pixels (width ×
+    // height × scale²) is closest to the view's (by pixel count), or of the
+    // largest while the view has no size (e.g. one sized from onLoad).
+    private int sourceIndexForSize() {
+        ReadableArray sources = mSources;
+        if (sources == null) return -1;
+        double viewPixels = (double) getWidth() * getHeight();
+        int best = -1;
+        double bestFit = Double.MAX_VALUE;
+        for (int i = 0; i < sources.size(); i++) {
+            ReadableMap source = sources.getMap(i);
+            if (source == null) continue;
+            double scale = number(source, "scale", 1);
+            double pixels = number(source, "width", 0) * number(source, "height", 0) * scale * scale;
+            double fit = viewPixels > 0 ? Math.abs(1 - pixels / viewPixels) : -pixels;
+            if (best < 0 || fit < bestFit) {
+                best = i;
+                bestFit = fit;
+            }
+        }
+        return best;
+    }
+
+    // Picks the source for the view's size (several sources).
+    private void pickSource() {
+        mSourceIndex = sourceIndexForSize();
+        mSource = mSourceIndex >= 0 && mSources != null ? mSources.getMap(mSourceIndex) : null;
+    }
+
+    private static double number(ReadableMap map, String key, double fallback) {
+        return map.hasKey(key) && !map.isNull(key) ? map.getDouble(key) : fallback;
+    }
+
+    // Several sources: another one fits the view's new size better. Loads it
+    // (after layout), keeping the image showing until then, without a fade.
+    private boolean switchSourceIfResized() {
+        if (mSources == null || mNeedsReload || mWaitsForSize || getWidth() <= 0 || getHeight() <= 0
+                || mManager == null || sourceIndexForSize() == mSourceIndex) {
+            return false;
+        }
+        mSwitchesSource = true;
+        mNeedsReload = true;
+        post(new Runnable() {
+            @Override
+            public void run() {
+                if (mNeedsReload && mManager != null) onAfterUpdate(mManager, requestManager, mViewsForUrlsMap);
+            }
+        });
+        return true;
     }
 
     public void setDefaultSource(@Nullable Drawable source) {
@@ -520,7 +603,7 @@ class FastImageViewWithUrl extends AppCompatImageView {
             mFadeFrom = null;
             invalidate();
         }
-        reloadIfResized();
+        if (!switchSourceIfResized()) reloadIfResized();
     }
 
     private void reloadIfResized() {
@@ -671,16 +754,42 @@ class FastImageViewWithUrl extends AppCompatImageView {
             @Nonnull FastImageViewManager manager,
             @Nullable RequestManager requestManager,
             @Nonnull Map<String, List<FastImageViewWithUrl>> viewsForUrlsMap) {
+        mManager = manager;
+        mViewsForUrlsMap = viewsForUrlsMap;
         if (mBlurChanged && !mNeedsReload) {
             mBlurChanged = false;
             reblur();
         }
         if (!mNeedsReload)
             return;
+        // Several sources: one is picked for the view's size, so a view that
+        // hasn't been laid out yet loads after layout (props and layout are
+        // applied in the same batch). A view that still has no size then
+        // (e.g. one sized from onLoad) loads the largest source.
+        if (mSources != null) {
+            if (mWaitsForSize) return;
+            if ((getWidth() <= 0 || getHeight() <= 0) && !mWaitedForSize) {
+                mWaitsForSize = true;
+                post(new Runnable() {
+                    @Override
+                    public void run() {
+                        if (!mWaitsForSize) return;
+                        mWaitsForSize = false;
+                        mWaitedForSize = true;
+                        onAfterUpdate(manager, requestManager, viewsForUrlsMap);
+                    }
+                });
+                return;
+            }
+            mWaitedForSize = false;
+            pickSource();
+        }
         // Only reload for changes that affect the request (source,
         // defaultSource, resizeMode), not for every prop update.
         mNeedsReload = false;
         mBlurChanged = false;
+        boolean switching = mSwitchesSource;
+        mSwitchesSource = false;
         boolean restarting = mRestarting;
         mRestarting = false;
         mLoadCount++;
@@ -791,7 +900,7 @@ class FastImageViewWithUrl extends AppCompatImageView {
             // replaces it at once, as Glide, Coil and Fresco fade an image in
             // from nothing and never between images.
             boolean replacing = shownRequest != null && model != null;
-            if (mTransitionDuration > 0 && (!replacing || mTransitionBetweenImages)) {
+            if (mTransitionDuration > 0 && !switching && (!replacing || mTransitionBetweenImages)) {
                 builder = builder.transition(DrawableTransitionOptions.with(
                         new FadeFactory(mTransitionDuration, mTransitionSkipOnCacheHit)));
             }

package/dist/index.cjs.js

@@ -125,7 +125,7 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 	};
 	const resolvedTintColor = tintColor != null ? tintColor : tintColorFromStyle(style);
 	if (fallback) {
-		const cleanedSource = typeof source === "number" ? source : withoutCache(source);
+		const cleanedSource = typeof source === "number" ? source : Array.isArray(source) ? source.map(withoutCache) : withoutCache(source);
 		const resolvedSource = react_native.Image.resolveAssetSource(cleanedSource);
 		return /* @__PURE__ */ react.default.createElement(react_native.View, {
 			style: [styles.imageContainer, style],
@@ -164,7 +164,9 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 			resizeMode
 		}), children);
 	}
-	const resolvedSource = react_native.Image.resolveAssetSource(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);
 	const resolvedDefaultSource = resolveDefaultSource(defaultSource);
 	return /* @__PURE__ */ react.default.createElement(react_native.View, {
 		style: [styles.imageContainer, style],
@@ -177,6 +179,7 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 		...transitionProps(transition),
 		style: react_native.StyleSheet.absoluteFill,
 		source: resolvedSource,
+		sources,
 		defaultSource: resolvedDefaultSource,
 		onFastImageLoadStart: onLoadStart,
 		onFastImageProgress: withProgress(onProgress),
@@ -200,8 +203,14 @@ const FastImage = FastImageComponent;
 FastImage.resizeMode = resizeMode;
 FastImage.cacheControl = cacheControl;
 FastImage.priority = priority;
-FastImage.preload = (sources) => Promise.resolve(react_native.NativeModules.FastImageView.preload(sources.map((s) => s || {}))).then((results) => sources.map((source, i) => {
+const ONE_SOURCE = "Takes one source, not an array of sizes: pass the size to use";
+FastImage.preload = (sources) => Promise.resolve(react_native.NativeModules.FastImageView.preload(sources.map((s) => s && !Array.isArray(s) ? s : {}))).then((results) => sources.map((source, i) => {
 	var _results$i;
+	if (Array.isArray(source)) return {
+		ok: false,
+		error: ONE_SOURCE,
+		uri: void 0
+	};
 	const uri = source ? source.uri : void 0;
 	const result = (_results$i = results === null || results === void 0 ? void 0 : results[i]) !== null && _results$i !== void 0 ? _results$i : noResult;
 	if (!result.ok) return {
@@ -220,8 +229,14 @@ FastImage.preload = (sources) => Promise.resolve(react_native.NativeModules.Fast
 FastImage.clearMemoryCache = () => react_native.NativeModules.FastImageView.clearMemoryCache();
 FastImage.clearDiskCache = () => react_native.NativeModules.FastImageView.clearDiskCache();
 FastImage.configureCache = (limits = {}) => Promise.resolve(react_native.NativeModules.FastImageView.configureCache(limits));
-FastImage.writeToCache = (source, file) => Promise.resolve(react_native.NativeModules.FastImageView.writeToCache(source || {}, file));
-FastImage.getCachePath = (source) => Promise.resolve(react_native.NativeModules.FastImageView.getCachePath(source || {}));
+FastImage.writeToCache = (source, file) => Array.isArray(source) ? Promise.resolve({
+	ok: false,
+	error: ONE_SOURCE
+}) : Promise.resolve(react_native.NativeModules.FastImageView.writeToCache(source || {}, file));
+FastImage.getCachePath = (source) => Array.isArray(source) ? Promise.resolve({
+	ok: false,
+	error: ONE_SOURCE
+}) : Promise.resolve(react_native.NativeModules.FastImageView.getCachePath(source || {}));
 const styles = react_native.StyleSheet.create({
 	fallbackImage: {
 		position: "absolute",