feat: Add tint color support.

    fix DylanVann#124

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`

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

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
 

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

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<FFFastImageSource *> *)sources)
 {

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 = () => (
  <ProgressExample />
  <PreloadExample />
  <ResizeModeExample />
+ <TintColorExample />
  <LocalImagesExample />
  <AutoSizeExample />
  </View>

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 }) => (
+ <View>
+ <Section>
+ <FeatureText text="Images with tint color." />
+ <FeatureText text="All non-transparent pixels are changed to the color." />
+ </Section>
+ <SectionFlex onPress={onPressReload}>
+ <FastImage
+ style={styles.image}
+ tintColor={'green'}
+ source={LogoImage}
+ />
+ <FastImage
+ style={styles.image}
+ tintColor={'#9324c3'}
+ source={LogoImage}
+ />
+ <FastImage
+ style={styles.image}
+ tintColor={'rgba(0,0,0,0.5)'}
+ source={LogoImage}
+ />
+ </SectionFlex>
+ </View>
+)
+
+const styles = StyleSheet.create({
+ image: {
+ flex: 1,
+ height: 100,
+ margin: 10,
+ },
+})
+
+export default withCacheBust(TintColorExample)

src/index.js

@@ -13,6 +13,7 @@ const FastImageViewNativeModule = NativeModules.FastImageView
 
 function FastImageBase({
  source,
+ tintColor,
  onLoadStart,
  onProgress,
  onLoad,
@@ -31,6 +32,7 @@ function FastImageBase({
  <View style={[styles.imageContainer, style]} ref={forwardedRef}>
  <Image
  {...props}
+ tintColor={tintColor}
  style={StyleSheet.absoluteFill}
  source={resolvedSource}
  onLoadStart={onLoadStart}
@@ -48,6 +50,7 @@ function FastImageBase({
  <View style={[styles.imageContainer, style]} ref={forwardedRef}>
  <FastImageView
  {...props}
+ tintColor={tintColor}
  style={StyleSheet.absoluteFill}
  source={resolvedSource}
  onFastImageLoadStart={onLoadStart}
@@ -118,6 +121,7 @@ const FastImageSourcePropType = PropTypes.shape({
 FastImage.propTypes = {
  ...ViewPropTypes,
  source: PropTypes.oneOfType([FastImageSourcePropType, PropTypes.number]),
+ tintColor: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  onLoadStart: PropTypes.func,
  onProgress: PropTypes.func,
  onLoad: PropTypes.func,