feat: transparentHeader prop added

netguru · Apr 30, 2020 · aa8b1d0 · aa8b1d0
1 parent ed9b783
commit aa8b1d0
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 9 deletions.
diff --git a/src/StickyParallaxHeader.js b/src/StickyParallaxHeader.js
@@ -175,7 +175,7 @@ class StickyParallaxHeader extends Component {
   }
 
   renderHeader = () => {
-    const { header, headerHeight, backgroundColor } = this.props
+    const { header, headerHeight, backgroundColor, transparentHeader } = this.props
 
     const headerStyle = header.props.style
     const isArray = Array.isArray(headerStyle)
@@ -192,7 +192,8 @@ class StickyParallaxHeader extends Component {
             height: headerHeight,
             backgroundColor: isArray
               ? arrayHeaderStyle.backgroundColor
-              : backgroundColor || headerStyle?.backgroundColor
+              : backgroundColor || headerStyle?.backgroundColor,
+            ...( transparentHeader && styles.transparentHeader )
           })
         }
       >
@@ -413,7 +414,8 @@ StickyParallaxHeader.propTypes = {
   tabsContainerStyle: ViewPropTypes.style,
   snapStartTreshold: number,
   snapStopTreshold: number,
-  snapValue: number
+  snapValue: number,
+  transparentHeader: bool
 }
 
 StickyParallaxHeader.defaultProps = {
@@ -427,7 +429,8 @@ StickyParallaxHeader.defaultProps = {
   tabTextContainerActiveStyle: {},
   tabTextContainerStyle: {},
   tabTextStyle: {},
-  tabWrapperStyle: {}
+  tabWrapperStyle: {},
+  transparentHeader: false
 }
 
 export default StickyParallaxHeader
diff --git a/src/predefinedComponents/AvatarHeader/AvatarHeader.js b/src/predefinedComponents/AvatarHeader/AvatarHeader.js
@@ -184,7 +184,7 @@ class AvatarHeader extends React.Component {
       bounces,
       scrollEvent,
       parallaxHeight,
-      foreground
+      transparentHeader
     } = this.props
 
     return (
@@ -205,6 +205,7 @@ class AvatarHeader extends React.Component {
           bounces={bounces}
           snapToEdge={snapToEdge}
           parallaxHeight={parallaxHeight}
+          transparentHeader={transparentHeader}
         >
           {renderBody(Brandon)}
         </StickyParallaxHeader>
@@ -229,9 +230,10 @@ AvatarHeader.propTypes = {
   image: number,
   renderBody: func,
   scrollEvent: func,
-  parralaxHeight: number,
+  parallaxHeight: number,
   foreground: func,
-  header: func
+  header: func,
+  transparentHeader: bool
 }
 AvatarHeader.defaultProps = {
   leftTopIconOnPress: () => {},
@@ -248,7 +250,8 @@ AvatarHeader.defaultProps = {
   bounces: true,
   snapToEdge: true,
   hasBorderRadius: true,
-  parallaxHeight: sizes.userScreenParallaxHeader
+  parallaxHeight: sizes.userScreenParallaxHeader,
+  transparentHeader: false
 }
 
 export default AvatarHeader
diff --git a/src/styles.js b/src/styles.js
@@ -30,11 +30,20 @@ const styles = StyleSheet.create({
     right: 0,
     overflow: 'scroll'
   },
-  transparentBackground : {
+  transparentBackground: {
     position: 'absolute',
     left: 0,
     bottom: 0,
     backgroundColor: 'transparent'
+  },
+  transparentHeader: {
+    backgroundColor: 'transparent',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    overflow: 'hidden',
+    zIndex: 3
   }
 })