Permalink
Browse files

[Image] Add support for tintColor to remote images

Summary:
Remote images now support the `tintColor` prop.

Also picked nicer demo colors for the UIExplorer example.

Fixes #1867

Closes #1932
Github Author: James Ide <ide@jameside.com>
  • Loading branch information...
ide committed Jul 13, 2015
1 parent 90dd7a1 commit d5943b0e47428fda78121a5b51c7a40a646af865
@@ -194,23 +194,46 @@ exports.examples = [
'pixels to the tint color.',
render: function() {
return (
- <View style={styles.horizontal}>
- <Image
- source={require('image!uie_thumb_normal')}
- style={[styles.icon, {tintColor: 'blue' }]}
- />
- <Image
- source={require('image!uie_thumb_normal')}
- style={[styles.icon, styles.leftMargin, {tintColor: 'green' }]}
- />
- <Image
- source={require('image!uie_thumb_normal')}
- style={[styles.icon, styles.leftMargin, {tintColor: 'red' }]}
- />
- <Image
- source={require('image!uie_thumb_normal')}
- style={[styles.icon, styles.leftMargin, {tintColor: 'black' }]}
- />
+ <View>
+ <View style={styles.horizontal}>
+ <Image
+ source={require('image!uie_thumb_normal')}
+ style={[styles.icon, {tintColor: '#5ac8fa' }]}
+ />
+ <Image
+ source={require('image!uie_thumb_normal')}
+ style={[styles.icon, styles.leftMargin, {tintColor: '#4cd964' }]}
+ />
+ <Image
+ source={require('image!uie_thumb_normal')}
+ style={[styles.icon, styles.leftMargin, {tintColor: '#ff2d55' }]}
+ />
+ <Image
+ source={require('image!uie_thumb_normal')}
+ style={[styles.icon, styles.leftMargin, {tintColor: '#8e8e93' }]}
+ />
+ </View>
+ <Text style={styles.sectionText}>
+ It also works with downloaded images:
+ </Text>
+ <View style={styles.horizontal}>
+ <Image
+ source={smallImage}
+ style={[styles.base, {tintColor: '#5ac8fa' }]}
+ />
+ <Image
+ source={smallImage}
+ style={[styles.base, styles.leftMargin, {tintColor: '#4cd964' }]}
+ />
+ <Image
+ source={smallImage}
+ style={[styles.base, styles.leftMargin, {tintColor: '#ff2d55' }]}
+ />
+ <Image
+ source={smallImage}
+ style={[styles.base, styles.leftMargin, {tintColor: '#8e8e93' }]}
+ />
+ </View>
</View>
);
},
@@ -283,6 +306,9 @@ var styles = StyleSheet.create({
background: {
backgroundColor: '#222222'
},
+ sectionText: {
+ marginVertical: 6,
+ },
nestedText: {
marginLeft: 12,
marginTop: 20,
@@ -38,6 +38,7 @@ typedef void (^RCTImageDownloadCancellationBlock)(void);
size:(CGSize)size
scale:(CGFloat)scale
resizeMode:(UIViewContentMode)resizeMode
+ tintColor:(UIColor *)tintColor
backgroundColor:(UIColor *)backgroundColor
progressBlock:(RCTDataProgressBlock)progressBlock
block:(RCTImageDownloadBlock)block;
@@ -131,6 +131,7 @@ - (RCTImageDownloadCancellationBlock)downloadImageForURL:(NSURL *)url
size:(CGSize)size
scale:(CGFloat)scale
resizeMode:(UIViewContentMode)resizeMode
+ tintColor:(UIColor *)tintColor
backgroundColor:(UIColor *)backgroundColor
progressBlock:(RCTDataProgressBlock)progressBlock
block:(RCTImageDownloadBlock)block
@@ -173,6 +174,10 @@ - (RCTImageDownloadCancellationBlock)downloadImageForURL:(NSURL *)url
[blendColor setFill];
UIRectFill((CGRect){CGPointZero, destSize});
}
+ if (tintColor) {
+ image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
+ [tintColor setFill];
+ }
[image drawInRect:imageRect];
image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
@@ -28,6 +28,11 @@
*/
@property (nonatomic, strong) NSURL *imageURL;
+/**
+ * Whether the image should be masked with this view's tint color.
+ */
+@property (nonatomic, assign) BOOL tinted;
+
/**
* By default, changing imageURL will reset whatever existing image was present
* and revert to defaultImage while the new image loads. In certain obscure cases you
@@ -60,6 +60,12 @@ - (void)setBackgroundColor:(UIColor *)backgroundColor
[self _updateImage];
}
+- (void)setTintColor:(UIColor *)tintColor
+{
+ super.tintColor = tintColor;
+ [self _updateImage];
+}
+
- (void)setProgressHandlerRegistered:(BOOL)progressHandlerRegistered
{
_progressHandlerRegistered = progressHandlerRegistered;
@@ -144,9 +150,14 @@ - (void)setImageURL:(NSURL *)imageURL resetToDefaultImageWhileLoading:(BOOL)rese
}
}];
} else {
- _downloadToken = [_imageDownloader downloadImageForURL:imageURL size:self.bounds.size scale:RCTScreenScale()
- resizeMode:self.contentMode backgroundColor:self.backgroundColor
- progressBlock:progressHandler block:^(UIImage *image, NSError *error) {
+ _downloadToken = [_imageDownloader downloadImageForURL:imageURL
+ size:self.bounds.size
+ scale:RCTScreenScale()
+ resizeMode:self.contentMode
+ tintColor:_tinted ? self.tintColor : nil
+ backgroundColor:self.backgroundColor
+ progressBlock:progressHandler
+ block:^(UIImage *image, NSError *error) {
if (image) {
dispatch_async(dispatch_get_main_queue(), ^{
if (imageURL != self.imageURL) {
@@ -31,6 +31,16 @@ - (UIView *)view
RCT_REMAP_VIEW_PROPERTY(src, imageURL, NSURL)
RCT_REMAP_VIEW_PROPERTY(resizeMode, contentMode, UIViewContentMode)
RCT_EXPORT_VIEW_PROPERTY(progressHandlerRegistered, BOOL)
+RCT_CUSTOM_VIEW_PROPERTY(tintColor, UIColor, RCTNetworkImageView)
+{
+ if (json) {
+ view.tinted = YES;
+ view.tintColor = [RCTConvert UIColor:json];
+ } else {
+ view.tinted = defaultView.tinted;
+ view.tintColor = defaultView.tintColor;
+ }
+}
- (NSDictionary *)customDirectEventTypes
{

4 comments on commit d5943b0

@mkonicek

This comment has been minimized.

Show comment
Hide comment
@mkonicek

mkonicek Aug 17, 2015

Contributor

@ide Should tintColor be exposed in Image's propTypes (with @platform ios in JS docs to make it clear it's an iOS-only prop)?

Contributor

mkonicek replied Aug 17, 2015

@ide Should tintColor be exposed in Image's propTypes (with @platform ios in JS docs to make it clear it's an iOS-only prop)?

@ide

This comment has been minimized.

Show comment
Hide comment
@ide

ide Aug 17, 2015

Collaborator

@mkonicek yes, it should be. (I didn't check because tintColor was already supported for static images and this diff just added it to remote images too.)

Collaborator

ide replied Aug 17, 2015

@mkonicek yes, it should be. (I didn't check because tintColor was already supported for static images and this diff just added it to remote images too.)

@ide

This comment has been minimized.

Show comment
Hide comment
@ide

ide Aug 17, 2015

Collaborator

@mkonicek actually, the recommended usage is under style so maybe we need @platform support for style properties too: https://facebook.github.io/react-native/docs/image.html#style

Collaborator

ide replied Aug 17, 2015

@mkonicek actually, the recommended usage is under style so maybe we need @platform support for style properties too: https://facebook.github.io/react-native/docs/image.html#style

@mkonicek

This comment has been minimized.

Show comment
Hide comment
@mkonicek

mkonicek Aug 17, 2015

Contributor

Good point! Looks like there is a comment already:
https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageStylePropTypes.js

Let me try to make it a JSDoc and see how it renders the next time we push to github.

Contributor

mkonicek replied Aug 17, 2015

Good point! Looks like there is a comment already:
https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageStylePropTypes.js

Let me try to make it a JSDoc and see how it renders the next time we push to github.

Please sign in to comment.