Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add resizeMode support #1

Merged
merged 3 commits into from
Jan 6, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions WebImage/WebImage/WebImageViewManager.m
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ @interface WebImageViewManager : RCTViewManager
@implementation RCTConvert (WebImageSource)

+ (WebImageSource*)WebImageSource:(id)json {

json = [self NSDictionary:json];
return [[WebImageSource alloc] initWithURI:json[@"uri"]];
}
Expand All @@ -25,6 +26,7 @@ @implementation WebImageViewManager
- (UIView*)view {
UIImageView* view = [[UIImageView alloc] init];
view.contentMode = UIViewContentModeScaleAspectFit;
view.clipsToBounds = YES;
return view;
}

Expand All @@ -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
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
}
}

}
26 changes: 26 additions & 0 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -21,6 +43,10 @@ class WebImage extends React.Component {
}
}

WebImage.defaultProps = {
resizeMode: 'contain',
};

var WebImageView = requireNativeComponent('WebImageView', WebImage)

export default WebImage