feat: added foregroundImage prop to tabbedHeader

netguru · Apr 22, 2020 · 289b1ff · 289b1ff
1 parent 73008f8
commit 289b1ff
Showing 1 changed file with 20 additions and 7 deletions.
diff --git a/src/predefinedComponents/TabbedHeader/TabbedHeader.js b/src/predefinedComponents/TabbedHeader/TabbedHeader.js
@@ -5,6 +5,7 @@ import StickyParallaxHeader from '../../index'
 import { constants, colors, sizes } from '../../constants'
 import styles from './TabbedHeader.styles'
 import RenderContent from './defaultProps/defaultProps'
+import isUndefined from 'lodash/isUndefined'
 
 const { event, ValueXY } = Animated
 export default class TabbedHeader extends React.Component {
@@ -52,7 +53,7 @@ export default class TabbedHeader extends React.Component {
   }
 
   renderForeground = (scrollY) => {
-    const { title } = this.props
+    const { title, foregroundImage } = this.props
     const startSize = constants.responsiveWidth(18)
     const endSize = constants.responsiveWidth(10)
     const [startImgFade, finishImgFade] = [this.scrollPosition(22), this.scrollPosition(27)]
@@ -75,14 +76,26 @@ export default class TabbedHeader extends React.Component {
       extrapolate: 'clamp'
     })
 
+    const renderImage = () => {
+      const logo = isUndefined(foregroundImage)
+      ? require('../../assets/images/photosPortraitMe.png')
+      : foregroundImage
+
+      if(foregroundImage !== null){
+        return (
+          <Animated.View style={{ opacity: imageOpacity }}>
+            <Animated.Image
+              source={logo}
+              style={[styles.profilePic, { width: imageSize, height: imageSize }]}
+            />
+          </Animated.View>
+        )
+      }
+    }
+
     return (
       <View style={styles.foreground}>
-        <Animated.View style={{ opacity: imageOpacity }}>
-          <Animated.Image
-            source={require('../../assets/images/photosPortraitMe.png')}
-            style={[styles.profilePic, { width: imageSize, height: imageSize }]}
-          />
-        </Animated.View>
+        {renderImage()}
         <Animated.View style={[styles.messageContainer, { opacity: titleOpacity }]}>
           <Text style={styles.message}>{title}</Text>
         </Animated.View>