diff --git a/README.md b/README.md index f62863b06..36ed93367 100644 --- a/README.md +++ b/README.md @@ -191,6 +191,12 @@ A React Native style. Supports using `borderRadius`. If true will fallback to using `Image`. In this case the image will still be styled and laid out the same way as `FastImage`. +--- + +### `tintColor?: number | string` + +If supplied, changes the color of all the non-transparent pixels to the given color. + ## Static Methods ### `FastImage.preload: (source[]) => void` diff --git a/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java b/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java index 757b99fa6..d7cd7bd81 100644 --- a/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java +++ b/android/src/main/java/com/dylanvann/fastimage/FastImageViewManager.java @@ -2,6 +2,7 @@ import android.app.Activity; import android.content.Context; +import android.graphics.PorterDuff; import android.os.Build; import com.bumptech.glide.Glide; @@ -108,6 +109,15 @@ public void setSrc(FastImageViewWithUrl view, @Nullable ReadableMap source) { } } + @ReactProp(name = "tintColor", customType = "Color") + public void setTintColor(FastImageViewWithUrl view, @Nullable Integer color) { + if (color == null) { + view.clearColorFilter(); + } else { + view.setColorFilter(color, PorterDuff.Mode.SRC_IN); + } + } + @ReactProp(name = "resizeMode") public void setResizeMode(FastImageViewWithUrl view, String resizeMode) { final FastImageViewWithUrl.ScaleType scaleType = FastImageViewConverter.getScaleType(resizeMode); diff --git a/ios/FastImage/FFFastImageView.h b/ios/FastImage/FFFastImageView.h index b336d1a0e..d505acf23 100644 --- a/ios/FastImage/FFFastImageView.h +++ b/ios/FastImage/FFFastImageView.h @@ -25,6 +25,7 @@ @property (nonatomic, copy) RCTDirectEventBlock onFastImageLoadEnd; @property (nonatomic, assign) RCTResizeMode resizeMode; @property (nonatomic, strong) FFFastImageSource *source; +@property (nonatomic, strong) UIColor *imageColor; @end diff --git a/ios/FastImage/FFFastImageView.m b/ios/FastImage/FFFastImageView.m index 913de3778..35215c357 100644 --- a/ios/FastImage/FFFastImageView.m +++ b/ios/FastImage/FFFastImageView.m @@ -59,6 +59,31 @@ - (void)setOnFastImageLoadStart:(RCTDirectEventBlock)onFastImageLoadStart { } } +- (void)setImageColor:(UIColor *)imageColor { + if (imageColor != nil) { + _imageColor = imageColor; + super.image = [self makeImage:super.image withTint:self.imageColor]; + } +} + +- (UIImage*)makeImage:(UIImage *)image withTint:(UIColor *)color { + UIImage *newImage = [image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]; + UIGraphicsBeginImageContextWithOptions(image.size, NO, newImage.scale); + [color set]; + [newImage drawInRect:CGRectMake(0, 0, image.size.width, newImage.size.height)]; + newImage = UIGraphicsGetImageFromCurrentImageContext(); + UIGraphicsEndImageContext(); + return newImage; +} + +- (void)setImage:(UIImage *)image { + if (self.imageColor != nil) { + super.image = [self makeImage:image withTint:self.imageColor]; + } else { + super.image = image; + } +} + - (void)sendOnLoad:(UIImage *)image { self.onLoadEvent = @{ @"width":[NSNumber numberWithDouble:image.size.width], diff --git a/ios/FastImage/FFFastImageViewManager.m b/ios/FastImage/FFFastImageViewManager.m index 5cc861866..4cb522078 100644 --- a/ios/FastImage/FFFastImageViewManager.m +++ b/ios/FastImage/FFFastImageViewManager.m @@ -18,6 +18,7 @@ - (FFFastImageView*)view { RCT_EXPORT_VIEW_PROPERTY(onFastImageError, RCTDirectEventBlock) RCT_EXPORT_VIEW_PROPERTY(onFastImageLoad, RCTDirectEventBlock) RCT_EXPORT_VIEW_PROPERTY(onFastImageLoadEnd, RCTDirectEventBlock) +RCT_REMAP_VIEW_PROPERTY(tintColor, imageColor, UIColor) RCT_EXPORT_METHOD(preload:(nonnull NSArray *)sources) { diff --git a/react-native-fast-image-example/src/FastImageExamples.js b/react-native-fast-image-example/src/FastImageExamples.js index 5dac37eaa..e0243d680 100644 --- a/react-native-fast-image-example/src/FastImageExamples.js +++ b/react-native-fast-image-example/src/FastImageExamples.js @@ -9,6 +9,7 @@ import FeatureText from './FeatureText' import ProgressExample from './ProgressExample' import PreloadExample from './PreloadExample' import ResizeModeExample from './ResizeModeExample' +import TintColorExample from './TintColorExample' import LocalImagesExample from './LocalImagesExample' import StatusBarUnderlay, { STATUS_BAR_HEIGHT } from './StatusBarUnderlay' import AutoSizeExample from './AutoSizeExample' @@ -35,6 +36,7 @@ const FastImageExample = () => ( + diff --git a/react-native-fast-image-example/src/TintColorExample.js b/react-native-fast-image-example/src/TintColorExample.js new file mode 100644 index 000000000..822fd0329 --- /dev/null +++ b/react-native-fast-image-example/src/TintColorExample.js @@ -0,0 +1,44 @@ +import React from 'react' +import { StyleSheet, View} from 'react-native' +import withCacheBust from './withCacheBust' +import FastImage from 'react-native-fast-image' +import Section from './Section' +import SectionFlex from './SectionFlex' +import FeatureText from './FeatureText' +import LogoImage from './images/logo.png' + +const TintColorExample = ({ onPressReload }) => ( + +
+ + +
+ + + + + +
+) + +const styles = StyleSheet.create({ + image: { + flex: 1, + height: 100, + margin: 10, + }, +}) + +export default withCacheBust(TintColorExample) diff --git a/react-native-fast-image-example/src/images/logo.png b/react-native-fast-image-example/src/images/logo.png new file mode 100644 index 000000000..663c66f66 Binary files /dev/null and b/react-native-fast-image-example/src/images/logo.png differ diff --git a/src/index.js b/src/index.js index 5309fe757..459538465 100644 --- a/src/index.js +++ b/src/index.js @@ -13,6 +13,7 @@ const FastImageViewNativeModule = NativeModules.FastImageView function FastImageBase({ source, + tintColor, onLoadStart, onProgress, onLoad, @@ -31,6 +32,7 @@ function FastImageBase({