From f2d13f9d7c76393054401951a8e128c0a79e39c3 Mon Sep 17 00:00:00 2001 From: Adam McArthur Date: Fri, 1 Feb 2019 03:30:57 +1100 Subject: [PATCH] Add suport for resizeImageAndroid prop --- README.md | 9 +++++++++ .../dylanvann/fastimage/FastImageViewConverter.java | 12 ++++++++++++ .../dylanvann/fastimage/FastImageViewManager.java | 10 ++++++++++ .../dylanvann/fastimage/FastImageViewWithUrl.java | 3 +++ src/index.d.ts | 6 ++++++ src/index.js | 4 ++++ src/index.js.flow | 6 ++++++ 7 files changed, 50 insertions(+) diff --git a/README.md b/README.md index 41d6bc2ea..d2c0e6bd5 100644 --- a/README.md +++ b/README.md @@ -144,6 +144,15 @@ Headers to load the image with. e.g. `{ Authorization: 'someAuthToken' }`. --- +### `resizeImageAndroid?: object` (Android Only) + +- `width` (required) +- `height` (required) + +You may sometimes encouter [performance issues](https://github.com/DylanVann/react-native-fast-image/issues/285) on Android with very large images being scaled down to a small container. The best solution is to always try and request images with the appropriate size, however if you know the original image dimensions - you can use this property to set a custom `width` and `height` for the image. This will manually scale the image down before loading it into the view - giving you similar performance benefits to how React Native's [`resizeMethod="resize"`](https://facebook.github.io/react-native/docs/image#resizemethod) would work on the default `` component. + +--- + ### `onLoadStart?: () => void` Called when the image starts to load. diff --git a/android/src/main/java/com/dylanvann/fastimage/FastImageViewConverter.java b/android/src/main/java/com/dylanvann/fastimage/FastImageViewConverter.java index 6b19954d2..112ae056c 100644 --- a/android/src/main/java/com/dylanvann/fastimage/FastImageViewConverter.java +++ b/android/src/main/java/com/dylanvann/fastimage/FastImageViewConverter.java @@ -110,6 +110,18 @@ static RequestOptions getOptions(ReadableMap source) { .placeholder(TRANSPARENT_DRAWABLE); } + static RequestOptions getImageResizeOptions(ReadableMap imageSizeOverride) { + if (imageSizeOverride != null) { + return new RequestOptions().override( + imageSizeOverride.getInt("width"), + imageSizeOverride.getInt("height") + ); + } + + // No Image Size Override Required + return new RequestOptions(); + } + private static FastImageCacheControl getCacheControl(ReadableMap source) { return getValueFromSource("cache", "immutable", FAST_IMAGE_CACHE_CONTROL_MAP, source); } diff --git a/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java b/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java index 757b99fa6..adfd071d4 100644 --- a/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java +++ b/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java @@ -54,6 +54,8 @@ protected FastImageViewWithUrl createViewInstance(ThemedReactContext reactContex @ReactProp(name = "source") public void setSrc(FastImageViewWithUrl view, @Nullable ReadableMap source) { + view.source = source; + if (source == null || !source.hasKey("uri") || isNullOrEmpty(source.getString("uri"))) { // Cancel existing requests. if (requestManager != null) { @@ -103,6 +105,7 @@ public void setSrc(FastImageViewWithUrl view, @Nullable ReadableMap source) { // - data:image/png;base64 .load(imageSource.getSourceForLoad()) .apply(FastImageViewConverter.getOptions(source)) + .apply(FastImageViewConverter.getImageResizeOptions(view.imageSizeOverride)) .listener(new FastImageRequestListener(key)) .into(view); } @@ -114,6 +117,13 @@ public void setResizeMode(FastImageViewWithUrl view, String resizeMode) { view.setScaleType(scaleType); } + @ReactProp(name = "resizeImageAndroid") + public void setImageResize(FastImageViewWithUrl view, ReadableMap imageSizeOverride) { + // Re-run Glide with width and height override values set. + view.imageSizeOverride = imageSizeOverride; + setSrc(view, view.source); + } + @Override public void onDropViewInstance(FastImageViewWithUrl view) { // This will cancel existing requests. diff --git a/android/src/main/java/com/dylanvann/fastimage/FastImageViewWithUrl.java b/android/src/main/java/com/dylanvann/fastimage/FastImageViewWithUrl.java index 0b74d92f9..955c373ca 100644 --- a/android/src/main/java/com/dylanvann/fastimage/FastImageViewWithUrl.java +++ b/android/src/main/java/com/dylanvann/fastimage/FastImageViewWithUrl.java @@ -4,9 +4,12 @@ import android.widget.ImageView; import com.bumptech.glide.load.model.GlideUrl; +import com.facebook.react.bridge.ReadableMap; class FastImageViewWithUrl extends ImageView { public GlideUrl glideUrl; + public ReadableMap source; + public ReadableMap imageSizeOverride; public FastImageViewWithUrl(Context context) { super(context); diff --git a/src/index.d.ts b/src/index.d.ts index 20fce12f9..4b309f8fc 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -44,6 +44,11 @@ declare namespace FastImage { | FastImage.cacheControl.web } +export type ResizeImageAndroid = { + width: number + height: number +} + export type FastImageSource = { uri?: string headers?: { [key: string]: string } @@ -83,6 +88,7 @@ export interface OnProgressEvent { export interface FastImageProperties { source: FastImageSource | number resizeMode?: FastImage.ResizeMode + resizeImageAndroid?: ResizeImageAndroid fallback?: boolean onLoadStart?(): void diff --git a/src/index.js b/src/index.js index 16951acb7..8b379a482 100644 --- a/src/index.js +++ b/src/index.js @@ -122,6 +122,10 @@ const FastImageSourcePropType = PropTypes.shape({ FastImage.propTypes = { ...ViewPropTypes, source: PropTypes.oneOfType([FastImageSourcePropType, PropTypes.number]), + resizeImageAndroid: PropTypes.shape({ + width: PropTypes.number.isRequired, + height: PropTypes.number.isRequired, + }), onLoadStart: PropTypes.func, onProgress: PropTypes.func, onLoad: PropTypes.func, diff --git a/src/index.js.flow b/src/index.js.flow index 71fac3a92..3f9d57e9c 100644 --- a/src/index.js.flow +++ b/src/index.js.flow @@ -24,6 +24,11 @@ export type ResizeMode = $ReadOnly<{| center: 'center', |}> +export type ImageResizeAndroid = $ReadOnly<{| + width: number, + height: number, +|}> + export type Priority = $ReadOnly<{| low: 'low', normal: 'normal', @@ -59,6 +64,7 @@ export type FastImageProps = $ReadOnly<{| source: FastImageSource | number, resizeMode?: ?ResizeModes, + imageResizeAndroid?: ?ImageResizeAndroid, fallback?: ?boolean, testID?: ?string, |}>