status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-01-26 09:19:10 +00:00
Code Issues Projects Releases Wiki Activity

[Image] Add support for tintColor to remote images

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

Also picked nicer demo colors for the UIExplorer example.

Fixes #1867

Closes https://github.com/facebook/react-native/pull/1932
Github Author: James Ide <ide@jameside.com>
This commit is contained in:
James Ide 2015-07-13 10:30:34 -07:00
parent 90dd7a13f0
commit d5943b0e47
6 changed files with 78 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
Examples/UIExplorer/ImageExample.js
View File

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

1
Libraries/Image/RCTImageDownloader.h
View File

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

5
Libraries/Image/RCTImageDownloader.m
View File

@ -131,6 +131,7 @@ CGRect RCTClipRect(CGSize, CGFloat, CGSize, CGFloat, UIViewContentMode);
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 @@ CGRect RCTClipRect(CGSize, CGFloat, CGSize, CGFloat, UIViewContentMode);
[blendColor setFill];
UIRectFill((CGRect){CGPointZero, destSize});
}
if (tintColor) {
image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
[tintColor setFill];
}
[image drawInRect:imageRect];
image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

5
Libraries/Image/RCTNetworkImageView.h
View File

@ -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

17
Libraries/Image/RCTNetworkImageView.m
View File

@ -60,6 +60,12 @@ RCT_NOT_IMPLEMENTED(-initWithCoder:(NSCoder *)aDecoder)
[self _updateImage];
}
- (void)setTintColor:(UIColor *)tintColor
{
super.tintColor = tintColor;
[self _updateImage];
}
- (void)setProgressHandlerRegistered:(BOOL)progressHandlerRegistered
{
_progressHandlerRegistered = progressHandlerRegistered;
@ -144,9 +150,14 @@ RCT_NOT_IMPLEMENTED(-initWithCoder:(NSCoder *)aDecoder)
}
}];
} 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) {

10
Libraries/Image/RCTNetworkImageViewManager.m
View File

@ -31,6 +31,16 @@ RCT_REMAP_VIEW_PROPERTY(defaultImageSrc, defaultImage, UIImage)
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
{