react-native-fast-image 8.13.2 → 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)
+    }}
+/>
+```
 
 ---
 
@@ -265,6 +275,31 @@ In this case the image will still be styled and laid out the same way as `FastIm
 
 If supplied, changes the color of all the non-transparent pixels to the given color.
 
+## `FastImageBackground`
+
+An image with content on top of it, like React Native's `ImageBackground`: a view that the image fills, with the children on top.
+
+Use it rather than giving `FastImage` children: in the next major version, `FastImage` won't render children, since the image will be a single native view ([#1137](https://github.com/DylanVann/react-native-fast-image/pull/1137)), which can't hold them. `FastImageBackground` works the same in both.
+
+```jsx
+import { FastImageBackground } from 'react-native-fast-image'
+
+const Banner = () => (
+    <FastImageBackground
+        source={{ uri: 'https://unsplash.it/400/200?image=1' }}
+        style={{ width: 200, height: 100 }}
+        imageStyle={{ borderRadius: 8 }}
+    >
+        <Text>On top of the image</Text>
+    </FastImageBackground>
+)
+```
+
+- `style`: the view's style (it sizes the view, which the image fills).
+- `imageStyle`: the image's style.
+- `imageRef`: a ref to the image.
+- The other props are `FastImage`'s, for the image.
+
 ## Static Methods
 
 ### `FastImage.preload: (source[]) => Promise<result[]>`

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

@@ -1,3 +1,7 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 //#region \0rolldown/runtime.js
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -69,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,
@@ -99,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);
 	}
@@ -122,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);
 }
@@ -169,6 +205,26 @@ const styles = react_native.StyleSheet.create({
 	},
 	imageContainer: { overflow: "hidden" }
 });
+const FastImageWithRef = FastImageComponent;
+/**
+* An image with content on top of it, like React Native's `ImageBackground`: a
+* view that the image fills, with the children on top. Use it rather than
+* giving `FastImage` children, which it won't render in the next major version
+* (the image will be a single native view). The other props go to the image;
+* the ref is the view's.
+*/
+const FastImageBackground = (0, react.forwardRef)(({ style, imageStyle, imageRef, children, importantForAccessibility, ...props }, ref) => /* @__PURE__ */ react.default.createElement(react_native.View, {
+	accessibilityIgnoresInvertColors: true,
+	importantForAccessibility,
+	style,
+	ref
+}, /* @__PURE__ */ react.default.createElement(FastImageWithRef, {
+	...props,
+	importantForAccessibility,
+	style: [react_native.StyleSheet.absoluteFill, imageStyle],
+	ref: imageRef
+}), children));
+FastImageBackground.displayName = "FastImageBackground";
 const FastImageView = (0, react_native.requireNativeComponent)("FastImageView", FastImage, { nativeOnly: {
 	onFastImageLoadStart: true,
 	onFastImageProgress: true,
@@ -177,4 +233,5 @@ const FastImageView = (0, react_native.requireNativeComponent)("FastImageView",
 	onFastImageLoadEnd: true
 } });
 //#endregion
-module.exports = FastImage;
+exports.FastImageBackground = FastImageBackground;
+exports.default = FastImage;

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,
 
@@ -96,6 +100,15 @@ export type FastImageProps = $ReadOnly<{|
     testID?: ?string,
 |}>
 
+export type FastImageBackgroundProps = $ReadOnly<{|
+    ...FastImageProps,
+    imageStyle?: $PropertyType<ViewProps, 'style'>,
+    imageRef?: React$Ref<any>,
+    children?: React$Node,
+|}>
+
+declare export var FastImageBackground: React$ComponentType<FastImageBackgroundProps>
+
 declare export default class FastImage extends React$Component<FastImageProps> {
     static resizeMode: ResizeMode;
     static priority: Priority;

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
      *
@@ -155,4 +167,22 @@ export interface FastImageStaticProperties {
     clearDiskCache: () => Promise<void>;
 }
 declare const FastImage: React.ComponentType<FastImageProps> & FastImageStaticProperties;
+export interface FastImageBackgroundProps extends Omit<FastImageProps, 'style' | 'children'> {
+    /** The container's style; the image fills it. */
+    style?: StyleProp<ViewStyle>;
+    /** The image's style. */
+    imageStyle?: StyleProp<ImageStyle>;
+    /** A ref to the image (the FastImage inside). */
+    imageRef?: React.Ref<any>;
+    /** Content shown on top of the image. */
+    children?: React.ReactNode;
+}
+/**
+ * An image with content on top of it, like React Native's `ImageBackground`: a
+ * view that the image fills, with the children on top. Use it rather than
+ * giving `FastImage` children, which it won't render in the next major version
+ * (the image will be a single native view). The other props go to the image;
+ * the ref is the view's.
+ */
+export declare const FastImageBackground: React.ComponentType<FastImageBackgroundProps>;
 export default FastImage;

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);
 }
@@ -146,6 +178,26 @@ const styles = StyleSheet.create({
 	},
 	imageContainer: { overflow: "hidden" }
 });
+const FastImageWithRef = FastImageComponent;
+/**
+* An image with content on top of it, like React Native's `ImageBackground`: a
+* view that the image fills, with the children on top. Use it rather than
+* giving `FastImage` children, which it won't render in the next major version
+* (the image will be a single native view). The other props go to the image;
+* the ref is the view's.
+*/
+const FastImageBackground = forwardRef(({ style, imageStyle, imageRef, children, importantForAccessibility, ...props }, ref) => /* @__PURE__ */ React.createElement(View, {
+	accessibilityIgnoresInvertColors: true,
+	importantForAccessibility,
+	style,
+	ref
+}, /* @__PURE__ */ React.createElement(FastImageWithRef, {
+	...props,
+	importantForAccessibility,
+	style: [StyleSheet.absoluteFill, imageStyle],
+	ref: imageRef
+}), children));
+FastImageBackground.displayName = "FastImageBackground";
 const FastImageView = requireNativeComponent("FastImageView", FastImage, { nativeOnly: {
 	onFastImageLoadStart: true,
 	onFastImageProgress: true,
@@ -154,4 +206,4 @@ const FastImageView = requireNativeComponent("FastImageView", FastImage, { nativ
 	onFastImageLoadEnd: true
 } });
 //#endregion
-export { FastImage as default };
+export { FastImageBackground, FastImage as default };

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,
 
@@ -96,6 +100,15 @@ export type FastImageProps = $ReadOnly<{|
     testID?: ?string,
 |}>
 
+export type FastImageBackgroundProps = $ReadOnly<{|
+    ...FastImageProps,
+    imageStyle?: $PropertyType<ViewProps, 'style'>,
+    imageRef?: React$Ref<any>,
+    children?: React$Node,
+|}>
+
+declare export var FastImageBackground: React$ComponentType<FastImageBackgroundProps>
+
 declare export default class FastImage extends React$Component<FastImageProps> {
     static resizeMode: ResizeMode;
     static priority: Priority;

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.13.2",
+    "version": "8.15.0",
     "description": "🚩 FastImage, performant React Native image component.",
     "keywords": [
         "cache",