react-native-fast-image 8.14.0 → 8.15.0

package/README.md

@@ -242,9 +242,19 @@ e.g. `onError={e => console.log(e.nativeEvent.error)}`
 
 ---
 
-### `onLoadEnd?: () => void`
+### `onLoadEnd?: (result) => void`
 
-Called when the image finishes loading, whether it was successful or an error.
+Called when the image finishes loading, whether it was successful or an error, with the result: `{ ok: true, width, height }` (the image's size, as `onLoad` gets it) or `{ ok: false, error }` (as `onError` gets it). TypeScript makes you check `ok` before reading the size or the error.
+
+```jsx
+<FastImage
+    source={{ uri }}
+    onLoadEnd={(result) => {
+        if (result.ok) setAspectRatio(result.width / result.height)
+        else setFailed(result.error)
+    }}
+/>
+```
 
 ---
 

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

@@ -26,6 +26,24 @@ final class FastImageEvents {
         send(view, name, Arguments.createMap());
     }
 
+    // onLoadEnd with the load's result: ok with the image's size, as onLoad
+    // sent it.
+    static void sendLoadEnd(View view, int width, int height) {
+        WritableMap event = Arguments.createMap();
+        event.putBoolean("ok", true);
+        event.putInt("width", width);
+        event.putInt("height", height);
+        send(view, FastImageRequestListener.REACT_ON_LOAD_END_EVENT, event);
+    }
+
+    // onLoadEnd with the load's result: not ok, with the error onError sent.
+    static void sendLoadEnd(View view, String error) {
+        WritableMap event = Arguments.createMap();
+        event.putBoolean("ok", false);
+        event.putString("error", error);
+        send(view, FastImageRequestListener.REACT_ON_LOAD_END_EVENT, event);
+    }
+
     static void send(View view, String name, WritableMap data) {
         ReactContext context = FastImageViewManager.getReactContext(view.getContext());
         if (context == null) return;

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

@@ -41,10 +41,11 @@ public class FastImageRequestListener implements RequestListener<Drawable> {
         }
         FastImageViewWithUrl view = (FastImageViewWithUrl) ((ImageViewTarget) target).getView();
         view.onImageFailed(thumbnail);
+        String error = errorMessage(e);
         WritableMap event = new WritableNativeMap();
-        event.putString("error", errorMessage(e));
+        event.putString("error", error);
         FastImageEvents.send(view, REACT_ON_ERROR_EVENT, event);
-        FastImageEvents.send(view, REACT_ON_LOAD_END_EVENT);
+        FastImageEvents.sendLoadEnd(view, error);
         return false;
     }
 
@@ -98,6 +99,6 @@ public class FastImageRequestListener implements RequestListener<Drawable> {
         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);
+        FastImageEvents.sendLoadEnd(view, size[0], size[1]);
     }
 }

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

@@ -1,7 +1,6 @@
 package com.dylanvann.fastimage;
 
 import static com.dylanvann.fastimage.FastImageRequestListener.REACT_ON_ERROR_EVENT;
-import static com.dylanvann.fastimage.FastImageRequestListener.REACT_ON_LOAD_END_EVENT;
 
 import android.annotation.SuppressLint;
 import android.content.Context;
@@ -376,10 +375,11 @@ 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)) {
+            String error = "Invalid source: " + mSource;
             WritableMap event = new WritableNativeMap();
-            event.putString("error", "Invalid source: " + mSource);
+            event.putString("error", error);
             FastImageEvents.send(this, REACT_ON_ERROR_EVENT, event);
-            FastImageEvents.send(this, REACT_ON_LOAD_END_EVENT);
+            FastImageEvents.sendLoadEnd(this, error);
 
             // Cancel existing requests.
             clearView(requestManager);

package/dist/index.cjs.js

@@ -73,12 +73,24 @@ function loopCount(loop) {
 	if (loop === false) return 1;
 	return Number.isFinite(loop) ? Math.max(1, Math.floor(loop)) : 0;
 }
+function loadResult(event) {
+	var _event$width, _event$height, _event$error;
+	return event.ok ? {
+		ok: true,
+		width: (_event$width = event.width) !== null && _event$width !== void 0 ? _event$width : 0,
+		height: (_event$height = event.height) !== null && _event$height !== void 0 ? _event$height : 0
+	} : {
+		ok: false,
+		error: (_event$error = event.error) !== null && _event$error !== void 0 ? _event$error : "Failed to load the image"
+	};
+}
 function withoutCache(source) {
 	const { cache: _cache, ...rest } = source || {};
 	return rest;
 }
 function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgress, onLoad, onError, onLoadEnd, style, fallback, children, resizeMode = "cover", loop, forwardedRef, onLayout, pointerEvents, ...viewProps }) {
 	const { onClick, ...props } = viewProps;
+	const fallbackResult = (0, react.useRef)(void 0);
 	const wrapperProps = {
 		onLayout,
 		onClick,
@@ -103,9 +115,29 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 			defaultSource,
 			onLoadStart,
 			onProgress,
-			onLoad,
-			onError,
-			onLoadEnd,
+			onLoad: onLoadEnd ? (event) => {
+				const { width, height } = event.nativeEvent.source;
+				fallbackResult.current = {
+					ok: true,
+					width,
+					height
+				};
+				onLoad === null || onLoad === void 0 || onLoad(event);
+			} : onLoad,
+			onError: onLoadEnd ? (event) => {
+				fallbackResult.current = {
+					ok: false,
+					error: String(event.nativeEvent.error)
+				};
+				onError === null || onError === void 0 || onError(event);
+			} : onError,
+			onLoadEnd: onLoadEnd && (() => {
+				var _fallbackResult$curre;
+				return onLoadEnd((_fallbackResult$curre = fallbackResult.current) !== null && _fallbackResult$curre !== void 0 ? _fallbackResult$curre : {
+					ok: false,
+					error: "Failed to load the image"
+				});
+			}),
 			resizeMode
 		}), children);
 	}
@@ -126,7 +158,7 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 		onFastImageProgress: onProgress,
 		onFastImageLoad: onLoad,
 		onFastImageError: onError,
-		onFastImageLoadEnd: onLoadEnd,
+		onFastImageLoadEnd: onLoadEnd && ((event) => onLoadEnd(loadResult(event.nativeEvent))),
 		resizeMode
 	}), children);
 }

package/dist/index.cjs.js.flow

@@ -49,6 +49,10 @@ export type ResizeModes = $Values<ResizeMode>
 export type Priorities = $Values<Priority>
 export type CacheControls = $Values<CacheControl>
 
+export type LoadResult =
+    | {| ok: true, width: number, height: number |}
+    | {| ok: false, error: string |}
+
 export type PreloadSuccess = {|
     uri: string,
     ok: true,
@@ -78,7 +82,7 @@ export type FastImageProps = $ReadOnly<{|
     ...ViewProps,
     onError?: ?(event: OnErrorEvent) => void,
     onLoad?: ?(event: OnLoadEvent) => void,
-    onLoadEnd?: ?() => void,
+    onLoadEnd?: ?(result: LoadResult) => void,
     onLoadStart?: ?() => void,
     onProgress?: ?(event: OnProgressEvent) => void,
 

package/dist/index.d.ts

@@ -40,6 +40,14 @@ export interface OnErrorEvent {
         error: string;
     };
 }
+export type LoadResult = {
+    ok: true;
+    width: number;
+    height: number;
+} | {
+    ok: false;
+    error: string;
+};
 export interface OnProgressEvent {
     nativeEvent: {
         loaded: number;
@@ -105,7 +113,11 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
     onProgress?(event: OnProgressEvent): void;
     onLoad?(event: OnLoadEvent): void;
     onError?(event: OnErrorEvent): void;
-    onLoadEnd?(): void;
+    /**
+     * Called once the image has loaded or failed to, with the result: `ok` and
+     * the image's size, or not `ok` and the error.
+     */
+    onLoadEnd?(result: LoadResult): void;
     /**
      * onLayout function
      *

package/dist/index.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, memo } from "react";
+import React, { forwardRef, memo, useRef } from "react";
 import { Image, NativeModules, Platform, StyleSheet, View, requireNativeComponent } from "react-native";
 //#region src/index.tsx
 const resizeMode = {
@@ -46,12 +46,24 @@ function loopCount(loop) {
 	if (loop === false) return 1;
 	return Number.isFinite(loop) ? Math.max(1, Math.floor(loop)) : 0;
 }
+function loadResult(event) {
+	var _event$width, _event$height, _event$error;
+	return event.ok ? {
+		ok: true,
+		width: (_event$width = event.width) !== null && _event$width !== void 0 ? _event$width : 0,
+		height: (_event$height = event.height) !== null && _event$height !== void 0 ? _event$height : 0
+	} : {
+		ok: false,
+		error: (_event$error = event.error) !== null && _event$error !== void 0 ? _event$error : "Failed to load the image"
+	};
+}
 function withoutCache(source) {
 	const { cache: _cache, ...rest } = source || {};
 	return rest;
 }
 function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgress, onLoad, onError, onLoadEnd, style, fallback, children, resizeMode = "cover", loop, forwardedRef, onLayout, pointerEvents, ...viewProps }) {
 	const { onClick, ...props } = viewProps;
+	const fallbackResult = useRef(void 0);
 	const wrapperProps = {
 		onLayout,
 		onClick,
@@ -76,9 +88,29 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 			defaultSource,
 			onLoadStart,
 			onProgress,
-			onLoad,
-			onError,
-			onLoadEnd,
+			onLoad: onLoadEnd ? (event) => {
+				const { width, height } = event.nativeEvent.source;
+				fallbackResult.current = {
+					ok: true,
+					width,
+					height
+				};
+				onLoad === null || onLoad === void 0 || onLoad(event);
+			} : onLoad,
+			onError: onLoadEnd ? (event) => {
+				fallbackResult.current = {
+					ok: false,
+					error: String(event.nativeEvent.error)
+				};
+				onError === null || onError === void 0 || onError(event);
+			} : onError,
+			onLoadEnd: onLoadEnd && (() => {
+				var _fallbackResult$curre;
+				return onLoadEnd((_fallbackResult$curre = fallbackResult.current) !== null && _fallbackResult$curre !== void 0 ? _fallbackResult$curre : {
+					ok: false,
+					error: "Failed to load the image"
+				});
+			}),
 			resizeMode
 		}), children);
 	}
@@ -99,7 +131,7 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 		onFastImageProgress: onProgress,
 		onFastImageLoad: onLoad,
 		onFastImageError: onError,
-		onFastImageLoadEnd: onLoadEnd,
+		onFastImageLoadEnd: onLoadEnd && ((event) => onLoadEnd(loadResult(event.nativeEvent))),
 		resizeMode
 	}), children);
 }

package/dist/index.js.flow

@@ -49,6 +49,10 @@ export type ResizeModes = $Values<ResizeMode>
 export type Priorities = $Values<Priority>
 export type CacheControls = $Values<CacheControl>
 
+export type LoadResult =
+    | {| ok: true, width: number, height: number |}
+    | {| ok: false, error: string |}
+
 export type PreloadSuccess = {|
     uri: string,
     ok: true,
@@ -78,7 +82,7 @@ export type FastImageProps = $ReadOnly<{|
     ...ViewProps,
     onError?: ?(event: OnErrorEvent) => void,
     onLoad?: ?(event: OnLoadEvent) => void,
-    onLoadEnd?: ?() => void,
+    onLoadEnd?: ?(result: LoadResult) => void,
     onLoadStart?: ?() => void,
     onProgress?: ?(event: OnProgressEvent) => void,
 

package/ios/FastImage/FFFastImageView.m

@@ -161,7 +161,7 @@ static CFTimeInterval FFFEnteredBackgroundAt = 0;
 - (void) setOnFastImageLoadEnd: (RCTDirectEventBlock)onFastImageLoadEnd {
     _onFastImageLoadEnd = onFastImageLoadEnd;
     if (self.hasCompleted && _onFastImageLoadEnd) {
-        _onFastImageLoadEnd(@{});
+        _onFastImageLoadEnd([self loadEndEvent: YES]);
     }
 }
 
@@ -284,6 +284,14 @@ NSString *FFFErrorMessage(NSError *error)
     }
 }
 
+// onLoadEnd's event: the load's result, as onLoad or onError sent it (ok: its
+// size, or not ok: the error).
+- (NSDictionary*) loadEndEvent: (BOOL)ok {
+    NSMutableDictionary* event = [NSMutableDictionary dictionaryWithDictionary: (ok ? self.onLoadEvent : self.onErrorEvent) ?: @{}];
+    event[@"ok"] = @(ok);
+    return event;
+}
+
 - (void) setSource: (FFFastImageSource*)source {
     if (_source != source) {
         _source = source;
@@ -429,7 +437,7 @@ NSString *FFFErrorMessage(NSError *error)
                 self.showsLoadedImage = NO;
                 [self sendOnError: @"Failed to decode the image"];
                 if (self.onFastImageLoadEnd) {
-                    self.onFastImageLoadEnd(@{});
+                    self.onFastImageLoadEnd([self loadEndEvent: NO]);
                 }
                 return;
             }
@@ -445,7 +453,7 @@ NSString *FFFErrorMessage(NSError *error)
             [self sendOnLoad: image];
 
             if (self.onFastImageLoadEnd) {
-                self.onFastImageLoadEnd(@{});
+                self.onFastImageLoadEnd([self loadEndEvent: YES]);
             }
             return;
         }
@@ -621,14 +629,14 @@ NSString *FFFErrorMessage(NSError *error)
                     weakSelf.showsLoadedImage = NO;
                     [weakSelf sendOnError: FFFErrorMessage(error)];
                     if (weakSelf.onFastImageLoadEnd) {
-                        weakSelf.onFastImageLoadEnd(@{});
+                        weakSelf.onFastImageLoadEnd([weakSelf loadEndEvent: NO]);
                     }
                 } else {
                     weakSelf.hasCompleted = YES;
                     weakSelf.showsLoadedImage = YES;
                     [weakSelf sendOnLoad: image];
                     if (weakSelf.onFastImageLoadEnd) {
-                        weakSelf.onFastImageLoadEnd(@{});
+                        weakSelf.onFastImageLoadEnd([weakSelf loadEndEvent: YES]);
                     }
                 }
             }];

package/package.json

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