react-native-fast-image 8.6.32 → 8.6.34

package/README.md

@@ -176,7 +176,7 @@ e.g. `onProgress={e => console.log(e.nativeEvent.loaded / e.nativeEvent.total)}`
 
 ### `onLoad?: (event) => void`
 
-Called on a successful image fetch. Called with the width and height of the loaded image.
+Called on a successful image fetch. Called with the width and height of the image itself, not of the view (on iOS, in points: an `@2x` asset reports half its pixel size).
 
 e.g. `onLoad={e => console.log(e.nativeEvent.width, e.nativeEvent.height)}`
 

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

@@ -0,0 +1,45 @@
+package com.dylanvann.fastimage;
+
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.events.Event;
+import com.facebook.react.uimanager.events.RCTEventEmitter;
+
+// An event for a FastImage view, sent with the EventDispatcher (see
+// FastImageEvents) instead of the RCTEventEmitter JS module, which the New
+// Architecture warns about on every event.
+class FastImageEvent extends Event<FastImageEvent> {
+    private final String name;
+    private final WritableMap data;
+
+    // Event(viewTag) works back to React Native 0.60. Without a surface id,
+    // Fabric finds the view by its tag.
+    @SuppressWarnings("deprecation")
+    FastImageEvent(int viewTag, String name, WritableMap data) {
+        super(viewTag);
+        this.name = name;
+        this.data = data;
+    }
+
+    @Override
+    public String getEventName() {
+        return name;
+    }
+
+    // Every event reaches JS, e.g. each progress update, as before.
+    @Override
+    public boolean canCoalesce() {
+        return false;
+    }
+
+    // Overrides Event.getEventData on React Native 0.65+ (not on older ones,
+    // hence no @Override).
+    protected WritableMap getEventData() {
+        return data;
+    }
+
+    @Override
+    @SuppressWarnings("deprecation")
+    public void dispatch(RCTEventEmitter rctEventEmitter) {
+        rctEventEmitter.receiveEvent(getViewTag(), name, data);
+    }
+}

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

@@ -0,0 +1,60 @@
+package com.dylanvann.fastimage;
+
+import android.view.View;
+
+import androidx.annotation.Nullable;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.UIManagerModule;
+import com.facebook.react.uimanager.events.EventDispatcher;
+
+import java.lang.reflect.Method;
+
+// Sends FastImage view events through React Native's EventDispatcher.
+final class FastImageEvents {
+    // UIManagerHelper.getEventDispatcherForReactTag (React Native 0.63+, also
+    // bridgeless). Looked up by reflection so older versions still compile.
+    @Nullable
+    private static final Method GET_EVENT_DISPATCHER = findGetEventDispatcher();
+
+    private FastImageEvents() {
+    }
+
+    static void send(View view, String name) {
+        send(view, name, Arguments.createMap());
+    }
+
+    static void send(View view, String name, WritableMap data) {
+        ReactContext context = FastImageViewManager.getReactContext(view.getContext());
+        if (context == null) return;
+        EventDispatcher dispatcher = eventDispatcher(context, view.getId());
+        if (dispatcher != null) {
+            dispatcher.dispatchEvent(new FastImageEvent(view.getId(), name, data));
+        }
+    }
+
+    @Nullable
+    private static EventDispatcher eventDispatcher(ReactContext context, int viewTag) {
+        if (GET_EVENT_DISPATCHER != null) {
+            try {
+                return (EventDispatcher) GET_EVENT_DISPATCHER.invoke(null, context, viewTag);
+            } catch (Exception ignored) {
+                // Fall back to the UIManagerModule's.
+            }
+        }
+        UIManagerModule uiManager = context.getNativeModule(UIManagerModule.class);
+        return uiManager == null ? null : uiManager.getEventDispatcher();
+    }
+
+    @Nullable
+    private static Method findGetEventDispatcher() {
+        try {
+            return Class.forName("com.facebook.react.uimanager.UIManagerHelper")
+                    .getMethod("getEventDispatcherForReactTag", ReactContext.class, int.class);
+        } catch (Exception e) {
+            return null;
+        }
+    }
+}

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

@@ -4,29 +4,24 @@ import android.graphics.drawable.Drawable;
 
 import com.bumptech.glide.load.DataSource;
 import com.bumptech.glide.load.engine.GlideException;
+import com.bumptech.glide.load.model.GlideUrl;
+import com.bumptech.glide.request.Request;
 import com.bumptech.glide.request.RequestListener;
 import com.bumptech.glide.request.target.ImageViewTarget;
 import com.bumptech.glide.request.target.Target;
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.bridge.WritableNativeMap;
-import com.facebook.react.bridge.ReactContext;
-import com.facebook.react.uimanager.events.RCTEventEmitter;
 
 public class FastImageRequestListener implements RequestListener<Drawable> {
     static final String REACT_ON_ERROR_EVENT = "onFastImageError";
     static final String REACT_ON_LOAD_EVENT = "onFastImageLoad";
     static final String REACT_ON_LOAD_END_EVENT = "onFastImageLoadEnd";
     private final String key;
+    private final FastImageSource source;
 
-    FastImageRequestListener(String key) {
+    FastImageRequestListener(String key, FastImageSource source) {
         this.key = key;
-    }
-
-    private static WritableMap mapFromResource(Drawable resource) {
-        WritableMap resourceData = new WritableNativeMap();
-        resourceData.putInt("width", resource.getIntrinsicWidth());
-        resourceData.putInt("height", resource.getIntrinsicHeight());
-        return resourceData;
+        this.source = source;
     }
 
     @Override
@@ -36,31 +31,41 @@ public class FastImageRequestListener implements RequestListener<Drawable> {
             return false;
         }
         FastImageViewWithUrl view = (FastImageViewWithUrl) ((ImageViewTarget) target).getView();
-        ReactContext context = FastImageViewManager.getReactContext(view.getContext());
-        if (context == null) {
-            return false;
-        }
-        RCTEventEmitter eventEmitter = context.getJSModule(RCTEventEmitter.class);
-        int viewId = view.getId();
-        eventEmitter.receiveEvent(viewId, REACT_ON_ERROR_EVENT, new WritableNativeMap());
-        eventEmitter.receiveEvent(viewId, REACT_ON_LOAD_END_EVENT, new WritableNativeMap());
+        FastImageEvents.send(view, REACT_ON_ERROR_EVENT);
+        FastImageEvents.send(view, REACT_ON_LOAD_END_EVENT);
         return false;
     }
 
     @Override
-    public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
+    public boolean onResourceReady(Drawable resource, Object model, final Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
         if (!(target instanceof ImageViewTarget)) {
             return false;
         }
-        FastImageViewWithUrl view = (FastImageViewWithUrl) ((ImageViewTarget) target).getView();
-        ReactContext context = FastImageViewManager.getReactContext(view.getContext());
-        if (context == null) {
+        final FastImageViewWithUrl view = (FastImageViewWithUrl) ((ImageViewTarget) target).getView();
+        boolean local = !(model instanceof GlideUrl);
+        int[] size = FastImageSourceSize.get(resource, model, local,
+                dataSource == DataSource.RESOURCE_DISK_CACHE);
+        if (size != null) {
+            sendLoad(view, size);
             return false;
         }
-        RCTEventEmitter eventEmitter = context.getJSModule(RCTEventEmitter.class);
-        int viewId = view.getId();
-        eventEmitter.receiveEvent(viewId, REACT_ON_LOAD_EVENT, mapFromResource(resource));
-        eventEmitter.receiveEvent(viewId, REACT_ON_LOAD_END_EVENT, new WritableNativeMap());
+        // A local image whose size isn't known: read it from the image first,
+        // unless the view starts another load meanwhile.
+        final Request request = target.getRequest();
+        FastImageSourceSize.readLocal(view.getContext(), source, resource, model, new FastImageSourceSize.Callback() {
+            @Override
+            public void onSize(int[] size) {
+                if (target.getRequest() == request) sendLoad(view, size);
+            }
+        });
         return false;
     }
+
+    private static void sendLoad(FastImageViewWithUrl view, int[] size) {
+        WritableMap event = new WritableNativeMap();
+        event.putInt("width", size[0]);
+        event.putInt("height", size[1]);
+        FastImageEvents.send(view, REACT_ON_LOAD_EVENT, event);
+        FastImageEvents.send(view, REACT_ON_LOAD_END_EVENT);
+    }
 }

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

@@ -0,0 +1,237 @@
+package com.dylanvann.fastimage;
+
+import android.content.Context;
+import android.graphics.BitmapFactory;
+import android.graphics.drawable.Drawable;
+import android.net.Uri;
+import android.os.Handler;
+import android.os.Looper;
+import android.util.Base64;
+import android.util.LruCache;
+import android.widget.ImageView;
+
+import androidx.annotation.Nullable;
+
+import com.bumptech.glide.Glide;
+import com.bumptech.glide.load.ImageHeaderParserUtils;
+import com.bumptech.glide.load.resource.bitmap.DownsampleStrategy;
+import com.bumptech.glide.load.resource.gif.GifDrawable;
+import com.bumptech.glide.request.RequestOptions;
+
+import java.io.ByteArrayInputStream;
+import java.io.IOException;
+import java.io.InputStream;
+import java.nio.ByteBuffer;
+import java.util.concurrent.Executor;
+import java.util.concurrent.Executors;
+
+// Works out an image's own size for onLoad, as iOS reports it (#608). Glide
+// decodes images to fit the view, so the loaded drawable is usually smaller
+// than the image.
+final class FastImageSourceSize {
+    // Sizes of recently decoded images, for loads from the memory cache, which
+    // don't decode.
+    private static final LruCache<String, int[]> SIZES = new LruCache<>(500);
+    private static final Executor EXECUTOR = Executors.newSingleThreadExecutor();
+    private static final Handler MAIN = new Handler(Looper.getMainLooper());
+
+    private FastImageSourceSize() {
+    }
+
+    // Wraps the downsample strategy Glide would use, to record the image's
+    // size (after EXIF rotation) when Glide decodes it. Views loading the same
+    // image at the same size share one decode, which uses the first view's
+    // options, so the size is recorded by image rather than by request.
+    static final class Capture extends DownsampleStrategy {
+        private final DownsampleStrategy strategy;
+        private final String key;
+        private boolean recorded;
+
+        Capture(DownsampleStrategy strategy, String key) {
+            this.strategy = strategy;
+            this.key = key;
+        }
+
+        @Override
+        public float getScaleFactor(int sourceWidth, int sourceHeight, int requestedWidth, int requestedHeight) {
+            // Called again with the sampled size; the first call has the image's.
+            if (!recorded) {
+                recorded = true;
+                SIZES.put(key, new int[]{sourceWidth, sourceHeight});
+            }
+            return strategy.getScaleFactor(sourceWidth, sourceHeight, requestedWidth, requestedHeight);
+        }
+
+        @Override
+        public SampleSizeRounding getSampleSizeRounding(int sourceWidth, int sourceHeight, int requestedWidth, int requestedHeight) {
+            return strategy.getSampleSizeRounding(sourceWidth, sourceHeight, requestedWidth, requestedHeight);
+        }
+
+        // Glide's memory cache keys include the strategy, so match the wrapped
+        // one to keep sharing cached images between views.
+        @Override
+        public boolean equals(Object o) {
+            return o instanceof Capture && ((Capture) o).strategy.equals(strategy);
+        }
+
+        @Override
+        public int hashCode() {
+            return strategy.hashCode();
+        }
+    }
+
+    // What RequestBuilder.into(ImageView) applies for the view's scale type
+    // (it leaves a transformation that's already set alone), with the
+    // downsample strategy it implies wrapped by capture.
+    static RequestOptions scaleTypeOptions(@Nullable ImageView.ScaleType scaleType, Capture capture) {
+        RequestOptions options = new RequestOptions();
+        if (scaleType != null) {
+            switch (scaleType) {
+                case CENTER_CROP:
+                    options = options.optionalCenterCrop();
+                    break;
+                case CENTER_INSIDE:
+                case FIT_XY:
+                    options = options.optionalCenterInside();
+                    break;
+                case FIT_CENTER:
+                case FIT_START:
+                case FIT_END:
+                    options = options.optionalFitCenter();
+                    break;
+                default:
+                    break;
+            }
+        }
+        return options.downsample(capture);
+    }
+
+    static Capture capture(@Nullable ImageView.ScaleType scaleType, Object model) {
+        return new Capture(strategy(scaleType), String.valueOf(model));
+    }
+
+    private static DownsampleStrategy strategy(@Nullable ImageView.ScaleType scaleType) {
+        if (scaleType == null) return DownsampleStrategy.DEFAULT;
+        switch (scaleType) {
+            case CENTER_CROP:
+                return DownsampleStrategy.CENTER_OUTSIDE;
+            case CENTER_INSIDE:
+            case FIT_XY:
+                return DownsampleStrategy.CENTER_INSIDE;
+            case FIT_CENTER:
+            case FIT_START:
+            case FIT_END:
+                return DownsampleStrategy.FIT_CENTER;
+            default:
+                return DownsampleStrategy.DEFAULT;
+        }
+    }
+
+    // The image's size, or null when it has to be read from a local image's
+    // header first (see readLocal).
+    @Nullable
+    static int[] get(Drawable resource, Object model, boolean local, boolean fromResourceCache) {
+        String key = String.valueOf(model);
+        if (resource instanceof GifDrawable) {
+            // Glide decodes GIFs itself (sampled to fit the view), without the
+            // downsample strategy; their header has the size.
+            int[] size = gifSize((GifDrawable) resource);
+            if (size != null) return size;
+        } else if (fromResourceCache) {
+            // Glide caches local images already resized for the view, and the
+            // decode from there recorded the resized size.
+            SIZES.remove(key);
+            return null;
+        } else {
+            int[] size = SIZES.get(key);
+            if (size != null) return size;
+            if (local) return null;
+        }
+        return new int[]{resource.getIntrinsicWidth(), resource.getIntrinsicHeight()};
+    }
+
+    @Nullable
+    private static int[] gifSize(GifDrawable gif) {
+        ByteBuffer buffer = gif.getBuffer();
+        if (buffer == null || buffer.limit() < 10) return null;
+        // The logical screen width and height (little-endian) follow the
+        // 6-byte signature.
+        int width = (buffer.get(6) & 0xff) | (buffer.get(7) & 0xff) << 8;
+        int height = (buffer.get(8) & 0xff) | (buffer.get(9) & 0xff) << 8;
+        return new int[]{width, height};
+    }
+
+    interface Callback {
+        void onSize(int[] size);
+    }
+
+    // Reads a local image's size from its header, off the main thread.
+    static void readLocal(Context context, final FastImageSource source, final Drawable resource, final Object model, final Callback callback) {
+        final Context appContext = context.getApplicationContext();
+        EXECUTOR.execute(new Runnable() {
+            @Override
+            public void run() {
+                int[] size = readBounds(appContext, source);
+                if (size != null) {
+                    SIZES.put(String.valueOf(model), size);
+                } else {
+                    size = new int[]{resource.getIntrinsicWidth(), resource.getIntrinsicHeight()};
+                }
+                final int[] result = size;
+                MAIN.post(new Runnable() {
+                    @Override
+                    public void run() {
+                        callback.onSize(result);
+                    }
+                });
+            }
+        });
+    }
+
+    @Nullable
+    private static int[] readBounds(Context context, FastImageSource source) {
+        try {
+            BitmapFactory.Options options = new BitmapFactory.Options();
+            options.inJustDecodeBounds = true;
+            InputStream stream = open(context, source);
+            try {
+                BitmapFactory.decodeStream(stream, null, options);
+            } finally {
+                stream.close();
+            }
+            if (options.outWidth <= 0 || options.outHeight <= 0) return null;
+            int orientation;
+            stream = open(context, source);
+            try {
+                Glide glide = Glide.get(context);
+                orientation = ImageHeaderParserUtils.getOrientation(
+                        glide.getRegistry().getImageHeaderParsers(), stream, glide.getArrayPool());
+            } finally {
+                stream.close();
+            }
+            // EXIF orientations 5 to 8 rotate by 90 or 270 degrees.
+            boolean rotated = orientation >= 5 && orientation <= 8;
+            return rotated
+                    ? new int[]{options.outHeight, options.outWidth}
+                    : new int[]{options.outWidth, options.outHeight};
+        } catch (IOException | RuntimeException e) {
+            return null;
+        }
+    }
+
+    private static InputStream open(Context context, FastImageSource source) throws IOException {
+        if (source.isBase64Resource()) {
+            String data = source.getSource();
+            byte[] bytes = Base64.decode(data.substring(data.indexOf(',') + 1), Base64.DEFAULT);
+            return new ByteArrayInputStream(bytes);
+        }
+        Uri uri = source.getUri();
+        String path = uri.getPath();
+        if ("file".equals(uri.getScheme()) && path != null && path.startsWith("/android_asset/")) {
+            return context.getAssets().open(path.substring("/android_asset/".length()));
+        }
+        InputStream stream = context.getContentResolver().openInputStream(uri);
+        if (stream == null) throw new IOException("Can't open " + uri);
+        return stream;
+    }
+}

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

@@ -23,7 +23,6 @@ import com.facebook.react.uimanager.SimpleViewManager;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.annotations.ReactProp;
-import com.facebook.react.uimanager.events.RCTEventEmitter;
 import com.facebook.react.views.imagehelper.ResourceDrawableIdHelper;
 
 import java.util.List;
@@ -121,11 +120,7 @@ class FastImageViewManager extends SimpleViewManager<FastImageViewWithUrl> imple
                 WritableMap event = new WritableNativeMap();
                 event.putInt("loaded", (int) bytesRead);
                 event.putInt("total", (int) expectedLength);
-                ReactContext context = getReactContext(view.getContext());
-                if (context == null) continue;
-                RCTEventEmitter eventEmitter = context.getJSModule(RCTEventEmitter.class);
-                int viewId = view.getId();
-                eventEmitter.receiveEvent(viewId, REACT_ON_PROGRESS_EVENT, event);
+                FastImageEvents.send(view, REACT_ON_PROGRESS_EVENT, event);
             }
         }
     }

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

@@ -18,8 +18,6 @@ import com.bumptech.glide.request.Request;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.bridge.WritableNativeMap;
-import com.facebook.react.bridge.ReactContext;
-import com.facebook.react.uimanager.events.RCTEventEmitter;
 
 import java.util.ArrayList;
 import java.util.Collections;
@@ -97,15 +95,10 @@ class FastImageViewWithUrl extends AppCompatImageView {
         // resolved: fire onError and onLoadEnd and show defaultSource, as on iOS
         // (#1028, #945).
         if (mSource != null && (imageSource == null || imageSource.getUri().toString().length() == 0)) {
-            ReactContext context = FastImageViewManager.getReactContext(getContext());
-            if (context != null) {
-                RCTEventEmitter eventEmitter = context.getJSModule(RCTEventEmitter.class);
-                int viewId = getId();
-                WritableMap event = new WritableNativeMap();
-                event.putString("message", "Invalid source prop:" + mSource);
-                eventEmitter.receiveEvent(viewId, REACT_ON_ERROR_EVENT, event);
-                eventEmitter.receiveEvent(viewId, REACT_ON_LOAD_END_EVENT, new WritableNativeMap());
-            }
+            WritableMap event = new WritableNativeMap();
+            event.putString("message", "Invalid source prop:" + mSource);
+            FastImageEvents.send(this, REACT_ON_ERROR_EVENT, event);
+            FastImageEvents.send(this, REACT_ON_LOAD_END_EVENT);
 
             // Cancel existing requests.
             clearView(requestManager);
@@ -140,18 +133,15 @@ class FastImageViewWithUrl extends AppCompatImageView {
             }
         }
 
-        ReactContext reactContext = FastImageViewManager.getReactContext(getContext());
-        if (imageSource != null && reactContext != null) {
+        if (imageSource != null) {
             // This is an orphan even without a load/loadend when only loading a placeholder
-            RCTEventEmitter eventEmitter = reactContext.getJSModule(RCTEventEmitter.class);
-            int viewId = this.getId();
-
-            eventEmitter.receiveEvent(viewId,
-                    FastImageViewManager.REACT_ON_LOAD_START_EVENT,
-                    new WritableNativeMap());
+            FastImageEvents.send(this, FastImageViewManager.REACT_ON_LOAD_START_EVENT);
         }
 
         if (requestManager != null) {
+            // Records the image's own size when Glide decodes it, for onLoad.
+            Object model = imageSource == null ? null : imageSource.getSourceForLoad();
+            FastImageSourceSize.Capture capture = FastImageSourceSize.capture(getScaleType(), model);
             RequestBuilder<Drawable> builder =
                     requestManager
                             // This will make this work for remote and local images. e.g.
@@ -160,14 +150,17 @@ class FastImageViewWithUrl extends AppCompatImageView {
                             //    - res:/
                             //    - android.resource://
                             //    - data:image/png;base64
-                            .load(imageSource == null ? null : imageSource.getSourceForLoad())
+                            .load(model)
                             .apply(FastImageViewConverter
                                     .getOptions(getContext(), imageSource, mSource)
                                     .placeholder(mDefaultSource) // show until loaded
-                                    .fallback(mDefaultSource)); // null will not be treated as error
+                                    .fallback(mDefaultSource)) // null will not be treated as error
+                            // What into() would apply for the scale type, with
+                            // the size capture.
+                            .apply(FastImageSourceSize.scaleTypeOptions(getScaleType(), capture));
 
             if (key != null)
-                builder.listener(new FastImageRequestListener(key));
+                builder.listener(new FastImageRequestListener(key, imageSource));
 
             builder.into(this);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-fast-image",
-    "version": "8.6.32",
+    "version": "8.6.34",
     "description": "🚩 FastImage, performant React Native image component.",
     "keywords": [
         "cache",
@@ -15,7 +15,7 @@
     },
     "repository": {
         "type": "git",
-        "url": "https://github.com/DylanVann/react-native-fast-image.git"
+        "url": "git+https://github.com/DylanVann/react-native-fast-image.git"
     },
     "license": "(MIT AND Apache-2.0)",
     "author": "Dylan Vann <dylan@dylanvann.com> (https://dylanvann.com)",