support custom color for Image overlays

Author: ethanshar

demo/src/screens/componentScreens/OverlaysScreen.js

@@ -15,7 +15,7 @@ export default class OverlaysScreen extends Component {
     return (
       <View centerH>
         <Text dark10>{text}</Text>
-        <Image style={styles.image} source={image} overlayType={type} customOverlayContent={customOverylay}/>
+        <Image /* overlayColor={'red'} */ style={styles.image} source={image} overlayType={type} customOverlayContent={customOverylay}/>
       </View>
     );
   };

src/components/image/index.js

@@ -50,6 +50,10 @@ class Image extends PureBaseComponent {
      * https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/OverlaysScreen.js
      */
     overlayType: Overlay.propTypes.type,
+    /**
+     * Pass a custom color for the overlay
+     */
+    overlayColor: PropTypes.string,
     /**
      * Render an overlay with custom content
      */
@@ -110,6 +114,7 @@ class Image extends PureBaseComponent {
       cover,
       aspectRatio,
       overlayType,
+      overlayColor,
       customOverlayContent,
       ...others
     } = this.getThemeProps();
@@ -132,7 +137,7 @@ class Image extends PureBaseComponent {
         source={source}
       >
         {(overlayType || customOverlayContent) && (
-          <Overlay style={style} type={overlayType} customContent={customOverlayContent}/>
+          <Overlay style={style} type={overlayType} color={overlayColor} customContent={customOverlayContent}/>
         )}
       </ImageView>
     );

src/components/overlay/index.js

@@ -27,6 +27,10 @@ export default class Overlay extends PureBaseComponent {
      * The type of overlay to set on top of the image
      */
     type: PropTypes.oneOf(_.values(OVERLY_TYPES)),
+    /**
+     * The overlay color
+     */
+    color: PropTypes.string,
     /**
      * Custom overlay content to be rendered on top of the image
      */
@@ -58,7 +62,8 @@ export default class Overlay extends PureBaseComponent {
   };
 
   renderImage = (style, source) => {
-    return <Image style={[styles.container, style]} resizeMode={'stretch'} source={source}/>;
+    const {color} = this.props;
+    return <Image style={[styles.container, {tintColor: color}, style]} resizeMode={'stretch'} source={source}/>;
   };
 
   render() {