feat: Add tint color support.

    fix DylanVann#124

Author: DylanVann

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)

react-native-fast-image-example/src/images/logo.png

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