Merge pull request DylanVann#1 from adammcarth/ADD-RESIZE-IMAGE_ANDRO…

…ID-PROP

Add suport for resizeImageAndroid prop

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 `<Image />` component.
+
+---
+
 ### `onLoadStart?: () => void`
 
 Called when the image starts to load.

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);
     }

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.

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);

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

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,

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,
 |}>