react-native-fast-image 8.27.4 → 8.28.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -3
- package/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java +10 -0
- package/android/src/main/java/com/dylanvann/fastimage/FastImageViewWithUrl.java +2 -0
- package/dist/index.cjs.js +3 -1
- package/dist/index.d.ts +3 -3
- package/dist/index.js +3 -1
- package/ios/FastImage/FFFastImageView.h +2 -0
- package/ios/FastImage/FFFastImageView.m +4 -1
- package/ios/FastImage/FFFastImageViewManager.m +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -276,7 +276,7 @@ Changing it restarts the animation.
|
|
|
276
276
|
How the image is filtered when it's drawn smaller or larger than its size (like CSS's `image-rendering`):
|
|
277
277
|
|
|
278
278
|
- `'auto'` **(Default)** - The platform's usual filtering.
|
|
279
|
-
- `'smooth'` - iOS only. Keeps a large image drawn much smaller than its size (e.g. a big photo as a thumbnail, or fine lines and text) from looking jagged or noisy. **It uses more memory:** the image is also kept at smaller sizes for drawing, about a third more than the decoded image. On Android it's the same as `'auto'` (images are
|
|
279
|
+
- `'smooth'` - iOS only. Keeps a large image drawn much smaller than its size (e.g. a big photo as a thumbnail, or fine lines and text) from looking jagged or noisy. Such an image is already decoded at about the view's size by default (see `downsample`), so this is for images shown at less than half their size with `downsample={false}`, or a little smaller than their size. **It uses more memory:** the image is also kept at smaller sizes for drawing, about a third more than the decoded image. On Android it's the same as `'auto'` (images are always decoded at about the view's size there).
|
|
280
280
|
- `'pixelated'` - Sharp pixels, without smoothing, e.g. for pixel art drawn larger than its size. On Android, animated images are still smoothed.
|
|
281
281
|
|
|
282
282
|
---
|
|
@@ -312,9 +312,12 @@ Downloads, local files (`file://`, `content://`) and bundled images (`require()`
|
|
|
312
312
|
|
|
313
313
|
iOS only. Decodes a large image at about the size it's shown at, instead of at full size, so it takes much less memory.
|
|
314
314
|
|
|
315
|
-
|
|
315
|
+
- `true` **(Default)** - An image at least twice the size its view needs is decoded at about the view's size. If the view grows, the image is decoded again for its new size (from the disk cache).
|
|
316
|
+
- `false` - Images are decoded at full size, e.g. for an image that's zoomed in on with a transform (a pinch-to-zoom viewer), which would otherwise show the smaller copy enlarged.
|
|
316
317
|
|
|
317
|
-
|
|
318
|
+
It doesn't change `onLoad`'s width and height (the image's own size) or the cached file. Needs SDWebImage 5.19.7 or later: before 5.19 images are decoded at full size, and 5.19.0 to 5.19.6 show photos stored sideways with an EXIF orientation (most phone photos) sideways. Photo library images are always decoded this way, and on Android images are always decoded at about the view's size.
|
|
319
|
+
|
|
320
|
+
If you control the images, serve them at the size they're shown (resized on your server or by an image CDN), which also saves bandwidth.
|
|
318
321
|
|
|
319
322
|
---
|
|
320
323
|
|
|
@@ -131,6 +131,12 @@ class FastImageViewManager extends SimpleViewManager<FastImageViewWithUrl> imple
|
|
|
131
131
|
view.setPaused(paused);
|
|
132
132
|
}
|
|
133
133
|
|
|
134
|
+
// Set when the image has an onProgress (see onProgress).
|
|
135
|
+
@ReactProp(name = "trackProgress")
|
|
136
|
+
public void setTrackProgress(FastImageViewWithUrl view, boolean trackProgress) {
|
|
137
|
+
view.trackProgress = trackProgress;
|
|
138
|
+
}
|
|
139
|
+
|
|
134
140
|
@ReactProp(name = "resizeMode")
|
|
135
141
|
public void setResizeMode(FastImageViewWithUrl view, String resizeMode) {
|
|
136
142
|
// repeat fills the view with the tiled image (see setImageDrawable).
|
|
@@ -163,11 +169,15 @@ class FastImageViewManager extends SimpleViewManager<FastImageViewWithUrl> imple
|
|
|
163
169
|
.build();
|
|
164
170
|
}
|
|
165
171
|
|
|
172
|
+
// Sends the progress to the views loading the url that have an onProgress:
|
|
173
|
+
// the others would send an event to JS for every chunk, for nothing (and
|
|
174
|
+
// on the New Architecture each would log an unhandled event).
|
|
166
175
|
@Override
|
|
167
176
|
public void onProgress(String key, long bytesRead, long expectedLength) {
|
|
168
177
|
List<FastImageViewWithUrl> viewsForKey = VIEWS_FOR_URLS.get(key);
|
|
169
178
|
if (viewsForKey != null) {
|
|
170
179
|
for (FastImageViewWithUrl view : viewsForKey) {
|
|
180
|
+
if (!view.trackProgress) continue;
|
|
171
181
|
WritableMap event = new WritableNativeMap();
|
|
172
182
|
event.putInt("loaded", (int) bytesRead);
|
|
173
183
|
event.putInt("total", (int) expectedLength);
|
|
@@ -183,6 +183,8 @@ class FastImageViewWithUrl extends AppCompatImageView {
|
|
|
183
183
|
|
|
184
184
|
// Pauses GIFs on the frame they're showing (the view's own animation).
|
|
185
185
|
private boolean mPaused = false;
|
|
186
|
+
// Whether to send progress events (the image has an onProgress).
|
|
187
|
+
boolean trackProgress = false;
|
|
186
188
|
|
|
187
189
|
// The `transition` prop (from the next load): how long a loaded image
|
|
188
190
|
// takes to fade in, in milliseconds (0 for no fade), whether it also fades
|
package/dist/index.cjs.js
CHANGED
|
@@ -183,6 +183,7 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
|
|
|
183
183
|
defaultSource: resolvedDefaultSource,
|
|
184
184
|
onFastImageLoadStart: onLoadStart,
|
|
185
185
|
onFastImageProgress: withProgress(onProgress),
|
|
186
|
+
trackProgress: !!onProgress,
|
|
186
187
|
onFastImageLoad: onLoad,
|
|
187
188
|
onFastImageError: onError,
|
|
188
189
|
onFastImageLoadEnd: onLoadEnd && ((event) => onLoadEnd(loadResult(event.nativeEvent))),
|
|
@@ -272,7 +273,8 @@ const FastImageView = (0, react_native.requireNativeComponent)("FastImageView",
|
|
|
272
273
|
onFastImageProgress: true,
|
|
273
274
|
onFastImageLoad: true,
|
|
274
275
|
onFastImageError: true,
|
|
275
|
-
onFastImageLoadEnd: true
|
|
276
|
+
onFastImageLoadEnd: true,
|
|
277
|
+
trackProgress: true
|
|
276
278
|
} });
|
|
277
279
|
//#endregion
|
|
278
280
|
exports.FastImageBackground = FastImageBackground;
|
package/dist/index.d.ts
CHANGED
|
@@ -161,9 +161,9 @@ export interface FastImageProps extends AccessibilityProps, ViewProps {
|
|
|
161
161
|
transition?: boolean | number | Transition | null;
|
|
162
162
|
/**
|
|
163
163
|
* iOS only. Decodes a large image at about the size it's shown at, so it
|
|
164
|
-
* takes much less memory.
|
|
165
|
-
*
|
|
166
|
-
*
|
|
164
|
+
* takes much less memory. `true` (default). `false` decodes images at
|
|
165
|
+
* full size, e.g. for an image that's zoomed in on with a transform. See
|
|
166
|
+
* the README.
|
|
167
167
|
*/
|
|
168
168
|
downsample?: boolean;
|
|
169
169
|
/**
|
package/dist/index.js
CHANGED
|
@@ -156,6 +156,7 @@ function FastImageBase({ source, defaultSource, tintColor, onLoadStart, onProgre
|
|
|
156
156
|
defaultSource: resolvedDefaultSource,
|
|
157
157
|
onFastImageLoadStart: onLoadStart,
|
|
158
158
|
onFastImageProgress: withProgress(onProgress),
|
|
159
|
+
trackProgress: !!onProgress,
|
|
159
160
|
onFastImageLoad: onLoad,
|
|
160
161
|
onFastImageError: onError,
|
|
161
162
|
onFastImageLoadEnd: onLoadEnd && ((event) => onLoadEnd(loadResult(event.nativeEvent))),
|
|
@@ -245,7 +246,8 @@ const FastImageView = requireNativeComponent("FastImageView", FastImage, { nativ
|
|
|
245
246
|
onFastImageProgress: true,
|
|
246
247
|
onFastImageLoad: true,
|
|
247
248
|
onFastImageError: true,
|
|
248
|
-
onFastImageLoadEnd: true
|
|
249
|
+
onFastImageLoadEnd: true,
|
|
250
|
+
trackProgress: true
|
|
249
251
|
} });
|
|
250
252
|
//#endregion
|
|
251
253
|
export { FastImageBackground, FastImage as default };
|
|
@@ -12,6 +12,8 @@
|
|
|
12
12
|
|
|
13
13
|
@property (nonatomic, copy) RCTDirectEventBlock onFastImageLoadStart;
|
|
14
14
|
@property (nonatomic, copy) RCTDirectEventBlock onFastImageProgress;
|
|
15
|
+
// Whether to send progress events (the image has an onProgress).
|
|
16
|
+
@property (nonatomic, assign) BOOL trackProgress;
|
|
15
17
|
@property (nonatomic, copy) RCTDirectEventBlock onFastImageError;
|
|
16
18
|
@property (nonatomic, copy) RCTDirectEventBlock onFastImageLoad;
|
|
17
19
|
@property (nonatomic, copy) RCTDirectEventBlock onFastImageLoadEnd;
|
|
@@ -88,6 +88,9 @@ static UIImage* FFFBlurredImage(UIImage* image, CGFloat scale, CGFloat radius, B
|
|
|
88
88
|
// rather than dimming like the system's controls.
|
|
89
89
|
self.tintAdjustmentMode = UIViewTintAdjustmentModeNormal;
|
|
90
90
|
_loopCount = -1;
|
|
91
|
+
// Images are decoded at about the size they're shown at unless
|
|
92
|
+
// downsample is false, as on Android.
|
|
93
|
+
_downsample = YES;
|
|
91
94
|
return self;
|
|
92
95
|
}
|
|
93
96
|
|
|
@@ -1033,7 +1036,7 @@ NSString *FFFErrorMessage(NSError *error)
|
|
|
1033
1036
|
// there's a handler as the load starts. A handler added while loading is
|
|
1034
1037
|
// used from the next load.
|
|
1035
1038
|
SDImageLoaderProgressBlock progress = nil;
|
|
1036
|
-
if (events && self.onFastImageProgress) {
|
|
1039
|
+
if (events && self.trackProgress && self.onFastImageProgress) {
|
|
1037
1040
|
progress = ^(NSInteger receivedSize, NSInteger expectedSize, NSURL* _Nullable targetURL) {
|
|
1038
1041
|
// Without a Content-Length the total is unknown (-1 or 0), and a
|
|
1039
1042
|
// percentage can't be worked out from it, so don't send those.
|
|
@@ -114,6 +114,7 @@ RCT_EXPORT_VIEW_PROPERTY(transitionBetweenImages, BOOL)
|
|
|
114
114
|
RCT_EXPORT_VIEW_PROPERTY(transitionSkipOnCacheHit, NSString)
|
|
115
115
|
RCT_EXPORT_VIEW_PROPERTY(downsample, BOOL)
|
|
116
116
|
RCT_EXPORT_VIEW_PROPERTY(blurRadius, CGFloat)
|
|
117
|
+
RCT_EXPORT_VIEW_PROPERTY(trackProgress, BOOL)
|
|
117
118
|
RCT_EXPORT_VIEW_PROPERTY(onFastImageLoadStart, RCTDirectEventBlock)
|
|
118
119
|
RCT_EXPORT_VIEW_PROPERTY(onFastImageProgress, RCTDirectEventBlock)
|
|
119
120
|
RCT_EXPORT_VIEW_PROPERTY(onFastImageError, RCTDirectEventBlock)
|