Merge pull request #12 from bamlab/feature/add-blackOverlayColor

Allow to change the overlay color

Author: Nhacsam

README.md

@@ -55,6 +55,7 @@ The `HeaderImageScrollView` handle also the following props. None is required :
 | `minHeight` | `number` | `125` | Min height for the header (in navbar mode) |
 | `minOverlayOpacity` | `number` | `0` | Opacity of a black overlay on the header before any scroll |
 | `maxOverlayOpacity` | `number` | `0.3` | Opacity of a black overlay on the header when in navbar mode |
+| `overlayColor` | `string` | `black` | Color of the overlay on the header |
 
 
 ### Foreground

package.json

@@ -13,7 +13,7 @@
     "README.md",
     "LICENCE",
     "src",
-    "demo.gif"
+    "readmeAssets"
   ],
   "repository": {
     "type": "git",

src/ImageHeaderScrollView.js

@@ -24,8 +24,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'transparent',
     justifyContent: 'center',
   },
-  blackOverlay: {
-    backgroundColor: 'black',
+  overlay: {
     position: 'absolute',
     top: 0,
     right: 0,
@@ -106,9 +105,14 @@ class ImageHeaderScrollView extends Component {
       transform: [{ scale: headerScale }],
     };
 
+    const overlayStyle = [
+      styles.overlay,
+      { opacity: overlayOpacity, backgroundColor: this.props.overlayColor },
+    ];
+
     return (
       <Animated.View style={[styles.header, headerTransformStyle]}>
-        <Animated.View style={[styles.blackOverlay, { opacity: overlayOpacity }]} />
+        <Animated.View style={overlayStyle} />
         <View style={styles.fixedForeground}>
           { this.props.renderFixedForeground(this.state.scrollY) }
         </View>
@@ -183,6 +187,7 @@ class ImageHeaderScrollView extends Component {
 ImageHeaderScrollView.propTypes = {
   children: React.PropTypes.node || React.PropTypes.nodes,
   childrenStyle: View.propTypes.style,
+  overlayColor: React.PropTypes.string,
   fadeOutForeground: React.PropTypes.bool,
   foregroundParallaxRatio: React.PropTypes.number,
   maxHeight: React.PropTypes.number,
@@ -196,6 +201,7 @@ ImageHeaderScrollView.propTypes = {
 };
 
 ImageHeaderScrollView.defaultProps = {
+  overlayColor: 'black',
   fadeOutForeground: false,
   foregroundParallaxRatio: 1,
   maxHeight: 125,