react-native-fast-image 8.19.1 → 8.20.0

package/README.md

@@ -230,9 +230,9 @@ Called when the image starts to load.
 
 ### `onProgress?: (event) => void`
 
-Called when the image is loading.
+Called while the image downloads, with the bytes `loaded` so far, the `total`, and `progress` (`loaded / total`, from 0 to 1; the last event has 1). Not called while the total is unknown (a response without a `Content-Length`).
 
-e.g. `onProgress={e => console.log(e.nativeEvent.loaded / e.nativeEvent.total)}`
+e.g. `onProgress={e => console.log(e.nativeEvent.progress)}`
 
 ---
 

package/dist/index.cjs.js

@@ -84,6 +84,13 @@ function loadResult(event) {
 		error: (_event$error = event.error) !== null && _event$error !== void 0 ? _event$error : "Failed to load the image"
 	};
 }
+function withProgress(onProgress) {
+	return onProgress && ((event) => {
+		const { loaded, total } = event.nativeEvent;
+		event.nativeEvent.progress = total > 0 ? Math.min(1, Math.max(0, loaded / total)) : 0;
+		onProgress(event);
+	});
+}
 function withoutCache(source) {
 	const { cache: _cache, ...rest } = source || {};
 	return rest;
@@ -114,7 +121,7 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 			source: resolvedSource,
 			defaultSource,
 			onLoadStart,
-			onProgress,
+			onProgress: withProgress(onProgress),
 			onLoad: onLoadEnd ? (event) => {
 				const { width, height } = event.nativeEvent.source;
 				fallbackResult.current = {
@@ -155,7 +162,7 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 		source: resolvedSource,
 		defaultSource: resolvedDefaultSource,
 		onFastImageLoadStart: onLoadStart,
-		onFastImageProgress: onProgress,
+		onFastImageProgress: withProgress(onProgress),
 		onFastImageLoad: onLoad,
 		onFastImageError: onError,
 		onFastImageLoadEnd: onLoadEnd && ((event) => onLoadEnd(loadResult(event.nativeEvent))),

package/dist/index.cjs.js.flow

@@ -23,6 +23,8 @@ export type OnProgressEvent = SyntheticEvent<
     $ReadOnly<{|
         loaded: number,
         total: number,
+        // loaded / total, from 0 to 1.
+        progress: number,
     |}>,
 >
 

package/dist/index.d.ts

@@ -84,6 +84,7 @@ export interface OnProgressEvent {
     nativeEvent: {
         loaded: number;
         total: number;
+        progress: number;
     };
 }
 export interface ImageStyle extends ViewStyle {

package/dist/index.js

@@ -57,6 +57,13 @@ function loadResult(event) {
 		error: (_event$error = event.error) !== null && _event$error !== void 0 ? _event$error : "Failed to load the image"
 	};
 }
+function withProgress(onProgress) {
+	return onProgress && ((event) => {
+		const { loaded, total } = event.nativeEvent;
+		event.nativeEvent.progress = total > 0 ? Math.min(1, Math.max(0, loaded / total)) : 0;
+		onProgress(event);
+	});
+}
 function withoutCache(source) {
 	const { cache: _cache, ...rest } = source || {};
 	return rest;
@@ -87,7 +94,7 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 			source: resolvedSource,
 			defaultSource,
 			onLoadStart,
-			onProgress,
+			onProgress: withProgress(onProgress),
 			onLoad: onLoadEnd ? (event) => {
 				const { width, height } = event.nativeEvent.source;
 				fallbackResult.current = {
@@ -128,7 +135,7 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
 		source: resolvedSource,
 		defaultSource: resolvedDefaultSource,
 		onFastImageLoadStart: onLoadStart,
-		onFastImageProgress: onProgress,
+		onFastImageProgress: withProgress(onProgress),
 		onFastImageLoad: onLoad,
 		onFastImageError: onError,
 		onFastImageLoadEnd: onLoadEnd && ((event) => onLoadEnd(loadResult(event.nativeEvent))),

package/dist/index.js.flow

@@ -23,6 +23,8 @@ export type OnProgressEvent = SyntheticEvent<
     $ReadOnly<{|
         loaded: number,
         total: number,
+        // loaded / total, from 0 to 1.
+        progress: number,
     |}>,
 >
 

package/package.json

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