Merge pull request #1 from iisue/master

Add resizeMode support
vovkasm · Jan 6, 2017 · 9530143 · 9530143
2 parents 276b913 + d63c7ea
commit 9530143
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 0 deletions.
diff --git a/WebImage/WebImage/WebImageViewManager.m b/WebImage/WebImage/WebImageViewManager.m
@@ -12,6 +12,7 @@ @interface WebImageViewManager : RCTViewManager
 @implementation RCTConvert (WebImageSource)
 
 + (WebImageSource*)WebImageSource:(id)json {
+
     json = [self NSDictionary:json];
     return [[WebImageSource alloc] initWithURI:json[@"uri"]];
 }
@@ -25,6 +26,7 @@ @implementation WebImageViewManager
 - (UIView*)view {
     UIImageView* view = [[UIImageView alloc] init];
     view.contentMode = UIViewContentModeScaleAspectFit;
+    view.clipsToBounds = YES;
     return view;
 }
 
@@ -35,4 +37,18 @@ - (UIView*)view {
     }
 }
 
+RCT_CUSTOM_VIEW_PROPERTY(resizeMode, NSString, UIImageView) {
+    if (json) {
+        if ([@"cover" isEqualToString:json]) {
+            view.contentMode = UIViewContentModeScaleAspectFill;
+        } else if ([@"contain" isEqualToString:json]) {
+            view.contentMode = UIViewContentModeScaleAspectFit;
+        } else if ([@"stretch" isEqualToString:json]) {
+            view.contentMode = UIViewContentModeScaleToFill;
+        } else if ([@"center" isEqualToString:json]) {
+            view.contentMode = UIViewContentModeCenter;
+        }
+    }
+}
+
 @end
diff --git a/android/src/main/java/org/vovkasm/WebImage/WebImageViewManager.java b/android/src/main/java/org/vovkasm/WebImage/WebImageViewManager.java
@@ -3,16 +3,27 @@
 import android.net.Uri;
 import android.support.annotation.Nullable;
 import android.widget.ImageView;
+import android.widget.ImageView.ScaleType;
 
 import com.bumptech.glide.Glide;
 import com.facebook.react.bridge.ReadableMap;
 import com.facebook.react.uimanager.SimpleViewManager;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.annotations.ReactProp;
 
+import java.util.HashMap;
+import java.util.Map;
+
 class WebImageViewManager extends SimpleViewManager<ImageView> {
     private static final String REACT_CLASS = "WebImageView";
 
+    private static Map<String, ImageView.ScaleType> RESIZE_MODE_MAP = new HashMap<String, ImageView.ScaleType>(){{
+        put("cover", ScaleType.CENTER_CROP);
+        put("contain", ScaleType.FIT_CENTER);
+        put("stretch", ScaleType.FIT_XY);
+        put("center", ScaleType.CENTER);
+    }};
+
     @Override
     public String getName() {
         return REACT_CLASS;
@@ -30,4 +41,14 @@ public void setSrc(ImageView view, @Nullable ReadableMap source) {
         final Uri uri = Uri.parse(uriProp);
         Glide.with(view.getContext()).load(uri).into(view);
     }
+
+    @ReactProp(name="resizeMode")
+    public void setResizeMode(ImageView view, String resizeMode) {
+        ImageView.ScaleType scaleType = RESIZE_MODE_MAP.get(resizeMode);
+
+        if (scaleType != null) {
+            view.setScaleType(scaleType);
+        }
+    }
+
 }
diff --git a/index.js b/index.js
@@ -12,7 +12,29 @@ class WebImage extends React.Component {
   static propTypes = {
     ...View.propTypes,
     source: SourcePropType.isRequired,
+
+    /**
+     * Determines how to resize the image when the frame doesn't match the raw
+     * image dimensions.
+     *
+     * 'cover': Scale the image uniformly (maintain the image's aspect ratio)
+     * so that both dimensions (width and height) of the image will be equal
+     * to or larger than the corresponding dimension of the view (minus padding).
+     *
+     * 'contain': Scale the image uniformly (maintain the image's aspect ratio)
+     * so that both dimensions (width and height) of the image will be equal to
+     * or less than the corresponding dimension of the view (minus padding).
+     *
+     * 'stretch': Scale width and height independently, This may change the
+     * aspect ratio of the src.
+     *
+     * 'center': Scale the image down so that it is completely visible,
+     * if bigger than the area of the view.
+     * The image will not be scaled up.
+     */
+    resizeMode: PropTypes.oneOf(['cover', 'contain', 'stretch', 'center']),
   }
+
   render() {
     const { source, ...props } = this.props
     const resolvedSource = resolveAssetSource(source)
@@ -21,6 +43,10 @@ class WebImage extends React.Component {
   }
 }
 
+WebImage.defaultProps = {
+    resizeMode: 'contain',
+};
+
 var WebImageView = requireNativeComponent('WebImageView', WebImage)
 
 export default WebImage